Audience

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.

Angular Table


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.


 

declares that we are creating a Pure menu, while

 

    declares a list inside of the menu and

     

  • declares a menu item.


    Now for some artwork. Add the following code block under 


    Picasso's Crystal Period

                   

                        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">

                   

                   

                        https://upload.wikimedia.org/wikipedia/en/8/8f/Pablo_Picasso%2C_1909-10%2C_Figure_dans_un_Fauteuil_%28Seated_Nude%2C_Femme_nue_assise%29%2C_oil_on_canvas%2C_92.1_x_73_cm%2C_Tate_Modern%2C_London.jpg" alt="Art for the generations">

                   

                   

                        https://upload.wikimedia.org/wikipedia/en/b/bb/Pablo_Picasso%2C_1910%2C_Woman_with_Mustard_Pot_%28La_Femme_au_pot_de_moutarde%29%2C_oil_on_canvas%2C_73_x_60_cm%2C_Gemeentemuseum%2C_The_Hague._Exhibited_at_the_Armory_Show%2C_New_York%2C_Chicago%2C_Boston_1913.jpg" alt="Art for the generations">

                   

                   

                        https://upload.wikimedia.org/wikipedia/en/1/1c/Pablo_Picasso%2C_1910%2C_Girl_with_a_Mandolin_%28Fanny_Tellier%29%2C_oil_on_canvas%2C_100.3_x_73.6_cm%2C_Museum_of_Modern_Art_New_York..jpg" alt="Art for the generations">

                   

                   

                        https://upload.wikimedia.org/wikipedia/en/6/68/Picasso_Portrait_of_Daniel-Henry_Kahnweiler_1910.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

    and declared each grid item 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 

    would be 1/5th width, so it would be 20 percent of the total width. We added five of these images so that they would nicely take up the entire width of the page, but you can mix and match widths however you like.


    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

                   

                        https://upload.wikimedia.org/wikipedia/en/7/74/PicassoGuernica.jpg" alt="Art for the generations">

                   

               

    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


     

                   

                        https://upload.wikimedia.org/wikipedia/en/d/dd/The_Persistence_of_Memory.jpg" alt="Art for the generations">

                   

                   

                        https://upload.wikimedia.org/wikipedia/en/a/a9/The_Face_of_War.jpg" alt="Art for the generations">

                   

                   

                        https://upload.wikimedia.org/wikipedia/en/5/55/Bust_Voltaire.jpg" alt="Art for the generations">

                   

               

    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


     

                   

                        https://upload.wikimedia.org/wikipedia/commons/b/bc/Michelangelo-David_JB01.JPG" alt="Art for the generations">

                   

                   

                        https://upload.wikimedia.org/wikipedia/commons/a/a5/Michelangelo%2C_Giudizio_Universale_02.jpg" alt="Art for the generations">

                   

               


    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


     

                   

                        https://upload.wikimedia.org/wikipedia/en/d/df/Roy_Lichtenstein_Drowning_Girl.jpg" alt="Art for the generations">

                   

                   

                        https://upload.wikimedia.org/wikipedia/en/5/58/Hopeless_%28Lichtenstein%29.jpg" alt="Art for the generations">

                   

               

    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!


                   


                    .button-green,

                    .button-red,

                    .button-orange,

                    .button-blue,

                    .button-indigo {

                        color: white;

                        border-radius: 40px;

                        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

                    }


                    .button-green {

                        background: rgb(28, 184, 65); /* this is a green */

                    }


                    .button-red {

                        background: rgb(202, 60, 60); /* this is a maroon */

                    }


                    .button-orange {

                        background: rgb(223, 117, 20); /* this is an orange */

                    }


                    .button-blue {

                        background: rgb(66, 184, 221); /* this is a light blue */

                    }


                    .button-indigo {

                        background: rgb(75,0,130); /* this is a indigo */

                    }

               

           


                     

    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%


           

           

           

            var lTable = document.getElementById("voteTable");

            function toggleTable() {

            lTable.style.display = "table";

            }

            lTable.style.display = "none";

           


    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.