As you know, it is not the birth time of internet and people have almost forgotten websites, having single paragraph text and some hyperlinks. If you want to move on with the current web standards, you have to make your website enjoyable rather than frankly viewable. Regardless the coding language such as HTML or PHP used for building the user-interface, CSS will be your tool for making the webpage look stylish. When we compare a webpage to a human body, HTML works as your bones whereas CSS is something near to skin and muscles, made for giving shape and structure.
Just like all other things in world of design and development, CSS also acquired minor and major updates making it fit to reach CSS3, which is the best pair when HTML5 accompanies the journey. However, the star of the play is the CSS trend or pattern you choose to use! As you know, there are various CSS frameworks available for you with different looks and features such as Bootstrap, Zurb etc. What we are introducing to you today is Pure CSS, a simply coolgrid-based CSS Framework from Yahoo!, the leading internet giant. Happily, you can use this framework without paying a single penny.
You might have used other frameworks like Zurb Foundation for building attractive webpages and websites. Using CSS framework is much useful because you can get templates for various elements in page such as divisions, forms, menu etc. This is the same function of Pure CSS by Yahoo! Rather than downloading and adding files to ‘CSS’ folder, Pure CSS can work like Google Fonts, where you have to add a single line of code for integrating the framework to HTML. As the framework is a latest one, it is completely responsive. On top of all, Pure CSS is one of the simplest frameworks you can find in web. You can either use the framework for powering your website or download specific modules for styling sections like forms, menus etc. There are six individual modules available free. Modules of Pure CSS are as follows, which seem to be light-sized (less than 2 Kb) when extracted.
- Base: Base Web Page Elements like headings, paragraph, typography
- Buttons: Various buttons with effects like active, on hover etc.
- Tables: Base tables available with border etc.
- Menus: Horizontal, Vertical, Dropdown.
- Grids: Responsive Grids.
- Forms: Grouped input, multi-column etc.
SEE ALSO: Subtle Patterns Bookmarklet: Preview Background Patterns on Your Website.
Why Use Pure CSS
- Less unused Code: It is very usual that you can see large number of non-used code when using other css frameworks. On the other hand, in the case of Pure CSS, you will never face this problem because you can use the specific version of framework and use it for styling specific sections of webpage. Of course, less code seems even great!
- Templates: If you are not an expert to design your own layout for your website, Pure CSS can help in that section. The website contains a number of layout examples, matching websites with different intentions like marketing, landing page etc.
- Skin Builder: In case the templates and styles can satisfy the creative designer in you, you can make use of Pure CSS’s skin builder for building your own skin. As you can guess, the skin builder does not consider your coding level expertise.
SEE ALSO: Icon Fonts: Pros and Cons of the Font Awesome Generator.
Using Pure CSS
As specified earlier Pure CSS,have many favorable features when compared to other frameworks. Recalling what we said before, you can use Pure CSS through the same method of Google Fonts. You have to add single line of external file link for bringing style to your webpage. This feature is quite useful when you have to build single file webpages and when you do not have enough space for putting all css files (Guess this will not happen ever). As Yahoo! turns the wheel of project the project, you do not want to tense about loading errors or technical failures.
If you want to use the full CSS templates of Pure CSS, you can add the following code to the main webpage. You can also click on the CSS file link and download the CSS file in order to use it.
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css" />
In case, if you just want to make use of specific CSS versions like menus, forms etc. there are special codes available along with dedicated CSS files. List of URLs is as follows:
Using the skin builder of Pure CSS is also an easier task because you can control the properties of elements using intuitive control buttons of skin builder page. However, we advise you should download the CSS files in order to understand elements’ names. As we said, putting these less than 2 Kb files will not consume your disk space.
Pure CSS’s website is set up in such a way that even a newbie can insert Pure CSS based elements in their websites. You can see a simple sidebar in left side, listing out sections like forms, buttons etc. In each page, previews are available along with HTML code to bring that effect into your website. Hence, it is very easy to insert such elements in your webpage. Shown below is the preview and code of a single login type form.
When analyzing all the features of Pure CSS, this is one of the optimum contributions by Yahoo! to design world. Yahoo! User Interface, commonly known as YUI support all strings attached to Pure CSS making the framework the best when there is a comparison. Apart from using pre-set elements, you can also customize Pure CSS. You have to lead yourself to Pure CSS website for using and learning more about the simply compact framework. Do let us know your opinion about this framework after checking out examples and using it on your project.
What people are saying
Thanks for posting this wonderful review of pure css. Since i am trying to develop my own wordpress themes for community, I think this new css from yahoo.com can help me a lot.
I find it really very useful. Will explore each of them later.
Wow. This is really interesting. Thank you for sharing this information.
Would you recommend Pure over Bootstrap or Foundation at this point? I’ve found Bootstrap a little less than optimally documented as a first time user of it.
Hello Abhijith N Arjunan, I must tell you that you have done a great job and thanks for enlightening my knowledge and skills.
Great article Abhijit. I used PureCSS to create a theme for a new content management system called PyroCMS. Take a look at [PyroPure]).
It was great fun developing the theme. I think it was much lighter than other frameworks out there. The styling is also very customizable.
Wow .. This is something that is interesting to learn, I know I’m not talented in programming and design, but it was interesting to do. The PureCSS probably something I need, very.
Hello I have been using (PureCss) pureness from Yahoo on 3 project’s and it is really a awesome light framework so to say, compared to Bootstrap or foundation its focus is that its light and bring back design to the developer and rely on 300kb UI kit that you don’t use 70% of elements anyways, and if you take out parts from Bootstrap it still needs Java it is still in the 200kb section. Not to mention every website looks Bootstrappy, which is why I will never use Bootstrap to build a website or Zurb foundation they all heavy and you need to use their 12 column grid which got really boring. I see website sites they all look nice and cool however they just look so boxy and well Bootstrap-foundation, Yahoo PureCss is amazing UI kit light fast easy to use modify and best of all works very Fast with WordPress as a theme! I used it for 4 WordPress projects with YUI PureCss and the client was amazed after switching over from Bootstrap, first notice was the speed of the site the second the beautiful FLAT design by default.