Lab 10 Part C

Using Pure CSS Framework

What is Pure CSS


Pure CSS is an online framework that is free to use, to help make your sites more responsive and appealing. They offer a wide varity of elements that help organize your page so it is able to cater to the different media devices consumers use. Pure CSS keeps its styles to a minimum and encourages you to add your own styles on top of them. The main advantage of Pure CSS is the layout and grid systems it has to offer.

Pure CSS Logo

How To Install the Framework


To install the Pure CSS framework it is very simple, all you have to do is insert the link tag for the framework into your HTML document, just like Bootstrap. There are many different links for Pure CSS, but it does not matter which one you would like to use, as they all have different aspects to offer. The link you choose is totally up to you.
The tag links included in this HTML document are (excluding my personal stylesheet):

  • https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css
  • https://unpkg.com/purecss@2.0.6/build/base-min.css
  • https://unpkg.com/purecss@2.0.6/build/grids-min.css
  • https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css
Once you have included the CSS link or links to your page, you are able to use all the different classes, elements and grids Pure CSS has to offer, to start to make your website look more appealing and responsive.

How To Build this Page


To build this page I first had to find a framework I would have liked to use. Searching online I found that, Pure CSS was a very common and elegant framework that helped create responsive webpages. Now that I had the framework I would like to use, I had to install it. After the very easy install, I got to work. Since, it was the first time I was using the Pure CSS framework, I had to read its documentation and understand all the different classes and elements they had to offer. From all the prebuilt grids, buttons, links and even sections they offer, once I was able to understand and implement them, the rest of the process was a breeze.

Difficulties Encountered


When I first decided to use Pure CSS, it was very overwhelming as there were so many different elements and customizability options which made it hard to find a place to start. One of the most difficult parts was understanding what the different classes did, since the templates had many elements that were not very useful to the purpose of this webpage. To solve, this I spent some time reading through the documentation and looking at how the grids were created and how to implement them. I spent a little time practicing and using different division classes so that I could fully grasp how they were used. Once I was able to do that the rest came easier.