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