Pure, the Lightweight and Mobile Friendly Solution
You want to make the best possible project, but you keep on adding framework after framework until your project is so big and bulky that no one wants to use it, let alone have it waste space on their device. But how can you build a lightweight and attention-grabbing RhoMobile App?
One answer might be Pure.css, a lightweight CSS framework that provides appealing layouts and stylings for native HTML elements. Pure includes some of the most common UI components, but none of the excess baggage. The entire set of modules in Pure clocks in at 4.0KB minified and gzipped.
Pure is responsive out of the box and was designed with mobile in mind. Elements look great on any screen, automatically adjusting to fit whatever device or monitor is in use.
Let’s put Pure into a simple RhoMobile application so you can see just how powerful something so tiny can be.
Download the starter code for our RhoMobile App.
See the Pen Angular Table by Jake Bernstein (@JakeBernstein65) on CodePen.
If you look at the starter version of our tutorial, you will see just how bare our application is without CSS.
After adding a few snippets of code, we will have something much more attractive, attention-grabbing, and mobile-friendly.
The wonderful thing about Pure is that all of the UI components adjust to the screen size. Throughout the tutorial, try stretching and scrunching your screen and see how Pure reacts.
Now go into Index.html and add the following snippet inside of the .
http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
This link allows us to make calls to Pure’s UI components and use Pure in our application.
Next, put the following code right under
This is the first Pure feature in our app. We just added a sleek side menu that will provide shortcuts to each artist and description.
https://upload.wikimedia.org/wikipedia/en/3/36/Pablo_Picasso%2C_1909%2C_Femme_assise_%28Sitzende_Frau%29%2C_oil_on_canvas%2C_100_x_80_cm%2C_Staatliche_Museen_zu_Berlin%2C_Neue_Nationalgalerie.jpg" alt="Art for the generations">
This is a grid from Pure that we are using as an art gallery.
We declared our grid with
Pure neatly organizes and arranges our grid columns (art pieces) while maintaining a variety of options for customizing our grids. Pure ships with both a 5ths and 24ths based grid. We append units to pure-u-* to decide the width of the column.
Here are some column widths as a reference
Our
Now we will add the rest of the art to our application to give our users something to look at.
add the next block after
Guernica
add
http://uploads3.wikiart.org/images/salvador-dali/the-temptation-of-st-anthony.jpg" alt="Art for the generations">after
The Temptation of St Anthony
Next, add
after
The Persistence of Memory | The Face of War | Slave Market with the Disappearing Bust of Voltaire
https://upload.wikimedia.org/wikipedia/commons/6/64/Creaci%C3%B3n_de_Ad%C3%A1n_%28Miguel_%C3%81ngel%29.jpg" alt="Art for the generations">Goes after
The Creation of Adam
and
after
David | The Last Judgement
Right after
The Scream of Nature
, add
https://upload.wikimedia.org/wikipedia/commons/f/f4/The_Scream.jpg" alt="Art for the generations">Lastly, add
after
Drowning Girl | Hopeless
and
https://upload.wikimedia.org/wikipedia/en/b/b7/Roy_Lichtenstein_Whaam.jpg" alt="Art for the generations">after
Whaam!
We have our art taken care of, so let’s add a way for users to give us feedback on their favorite artists.
Insert the following code block after the paragraph about Whaam!
Vote for your favorite Artist!
We just defined and added buttons for each of our artists, but they don’t do anything yet.
We are adding a table with the vote results for top 3 artists, and it will only be available after a user votes.
Add the next snippet after
and before
Vote for your favorite Artist!
| Top 3 | Artist | Percentage |
|---|
| 1st | Dali | 37% |
| 2nd | Lichtenstein | 20% |
| 3rd | Picasso | 15% |
Pure helped us to create a mobile-friendly art gallery through which all users can enjoy famous art pieces, regardless of their device type or screen size. And all with only a 4kb (gzipped) framework. To stop worrying about distorting important images and memory shortages, try using Pure in your next project.
Jake Bernstein
