Pure CSS: Purest CSS Framework from Yahoo!

As you know, it is not the birth time of the internet and people have almost forgotten websites, that have 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 of 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 the 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 cool grid-based CSS Framework from Yahoo!, the leading internet giant. Happily, you can use this framework without paying a single penny.

Pure CSS

You might have used other frameworks like Zurb Foundation for building attractive webpages and websites. Using the CSS framework is very useful because you can get templates for various elements in the page such as divisions, forms, menus,s, etc. This is the same function of Pure CSS by Yahoo! Rather than downloading and adding files to the ‘CSS’ folder, Pure CSS can work like Google Fonts, where you have to add a single line of code to integrate the framework into HTML. As the framework is the latest one, it is completely responsive. On top of all, Pure CSS is one of the simplest frameworks you can find on the 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 for 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, paragraphs, 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 a 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 the framework and use it for styling specific sections of the webpage. Of course, less code seems even great!
• All Inside: At least in some of the other frameworks, they are using third-party JavaScript plugins and codes to make the visual impact better. However, Pure CSS does not use any kind of JS plugins excluding the case of the one used in a drop-down effect. Less third-party code can provide you with quicker page loads and neatness in code.
• 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 a single line of external file links to bring 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 to put all CSS files (Guess this will not happen ever). As Yahoo! turns the wheel of the project the project, you do not want to be 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 to use it.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css" integrity="sha384-GnvM8mdj0ISPSQnWBz7AJu1zJZjPU2A5Ru5wW/8qMfbC5uEJDkDO08JwEq9sOX1D" crossorigin="anonymous" />

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. The 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 the intuitive control buttons of the skin builder page. However, we advise you should download the CSS files to understand the 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 on the left side, listing out sections like forms, buttons, etc. On each page, previews are available along with HTML code to bring that effect to your website. Hence, it is very easy to insert such elements into your webpage. Shown below is the preview and code of a single login type form.

Conclusion

When analyzing all the features of Pure CSS, this is one of the optimum contributions by Yahoo! to the design world. Yahoo! User Interface, commonly known as YUI supports 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 the Pure CSS website to use and learn more about the simple compact framework. Do let us know your opinion about this framework after checking out examples and using it on your project.