#RESPONSIVE LAYOUT CSS FRAMEWORK HOW TO#
#RESPONSIVE LAYOUT CSS FRAMEWORK CODE#

Once downloaded and unzipped, the organization of files may look like following:

Like to get it on your own machine? You may download a zipped version of it from it's Github Repo. That will include all of the modules described above to your web project.

#RESPONSIVE LAYOUT CSS FRAMEWORK CODE#

Buttons: This module includes styles for Default, Disabled, Active, Primary and several customized buttons.Īdd the following code within the head section of your HTML page.Tables: Style for Default, Bordered, with Horizontal Borders and Striped tables are included in this module.Navigation: This module comprises of Horizontal Menu, Menu with Headings, Vertical Menu, Dropdowns, Menus with Disabled Items and Paginations.Forms: Style for default, stacked, Aligned and Multi-Column form Grouped Inputs, Input Sizing and some more related stuff comes under this module.Grids: A responsive Grid to set the layout.Setting CSS rules for typography, headings, code elements, link, img etc comes under this. ComponentsĪlmost every web project requires following modules, which is included by Pure: In fact, there only a few instance where it uses JavaScript, like drop down menus and fixed top menu. Unlike other established CSS frameworks (like Bootstrap or Zurb Foundation), Pure does not come with any JavaScript Plugin out of the box. Gzipped and minified version of Pure sizes only 5.7KB, pretty tiny compared to other CSS frameworks. Moreover, you may use a combination of Pure, a CSS framework, and your own customize CSS. You may write your own style for customization on top of that. Pure intends to fix this by making only compulsory CSS modules required by almost all the web projects. And then you also consume a lot of unused CSS rules.

On top that, your own style, which you need to customize the vanilla CSS code, makes it more stuffy. But they are heavy since they include lots of CSS code. There are several awesome CSS frameworks available (namely Twitter Bootstrap, Zurb Foundation).

#RESPONSIVE LAYOUT CSS FRAMEWORK HOW TO#

We will discuss what is the basic idea behind the creation of this, what are the different components and finally how to implement it on your web projects.

This tutorial is an introduction to the Pure, a set of responsive CSS modules build by YUI team.

Responsive layout css framework