Twitter Bootstrap has only 12 columns, whereas PocketGrid columns are unlimited!.Twitter Bootstrap breakpoints are hard-coded and limited, whereas PocketGrid breakpoints are free and unlimited!.Twitter Bootstrap 2's grid has only 1 breakpoint (like many grid systems), whereas with PocketGrid you can define as many breakpoints as you want!.PocketGrid is really lightweight, so you can use it in all your projects at no cost (Twitter Bootstrap is about 200x bigger, even minified!).Moreover, PocketGrid has many nice features: Indeed, PocketGrid is compatible with any other framework such as Twitter Bootstrap or Zurb Foundation (because it does not use 'grid', 'row' or 'col' classes which are used by too many grid systems).įor example, you could use PocketGrid for your layout positioning, and use Twitter Bootstrap for styling, tabs or special components. You can follow on Twitter! Should I use PocketGrid instead of Twitter Bootstrap or other grids? Compatibility: IE6+, Firefox, Chrome, Safari, Opera, and mobile browsers (iPhone, iPad, Android.).and use the Pocket grid for other layout) Compatible with CSS frameworks such as Twitter Bootstrap or Zurb Foundation (you can use the Bootstrap or Foundation components such as buttons, tabs, etc.Automatic rows (when a row is full, the next blocks go to a new row without doing anything).Manage consistent gutters (gutters can be defined in pixels or ems, which is better than percentage-based solutions because it allows consistent gutters even in nested grids).Unlimited number of columns (no 12 or 16 columns restrictions: blocks just require a width in percentage).Very simple (just have to define blocks and groups of blocks).Semantic (as much as a pure CSS grid could be ) ).Content-first compatible (you can swap columns and you can define your own breakpoints for each content in your page to fine-tune and optimize your content readability: not only 'tablet' or 'smartphone' breakpoints).Mobile-first compatible (block width is 100% by default).Unlimited number of breakpoints (you can define your own Media Queries).Fluid (by default, but you can set a fixed width or max-width if you want).Pure CSS-only (no CSS preprocessor needed).pure-u-1-6 is 16.656%.PocketGrid is the smallest responsive grid system having so many features: pure-g-r > div, where x and y are positive integers. So, our CSS becomes (HTML code unaltered though). This includes the padding and border, but not the margin, to the width. To get rid of this problem, you may add box-sizing: border-box to the Grid. You may add padding directly to the grid. So this way we create separate CSS classes to add padding and nest the content within an element containing that class. The following CSS and HTML code show the first one. Looking to add some padding around your content residing within a Grid column? There are two ways. Pure CSS is modular, so you may keep adding separate modules along with the grid module like. If you want to include only the Grid module, you may replace this with for applying a responsive grid. This is how you include all the pure css modules to an html file. how much portion of the total width(y) you wan to assign to a particular column. You decide what shall be the value of x1,x2 etc depending upon the width of the column, i.e. Where, (i)x1,x2.xn and y are positive integers, (ii)x1+x2+._xn = y. So, the general syntax for creating Grids with Pure CSS is as follows View a simple layout on this in a separate window. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Here is the code for the above (responsive) Both of the columns must be a descendant of an element having either pure-g-r or pure-g depending upon whether you are creating a responsive layout or an unresponsive one. available width), then CSS class pure-u-2-3 is to be applied on the left column and the right column has to adopt CSS class pure-1-3. Now, suppose you want to create a two column grid and the left column takes two third and the right column takes one third of the viewport (i.e. Columns are created with a CSS class which looks like pure-u-x-x, where 'x' is a positive integer. pure-g-r and pure-g are the CSS classes responsible for creating responsive and unresponsive rows here. FundamentalsĪs always, Pure Grids are made up of rows and columns. In this, we will delve deep to understand the minutes of Grids offered by Pure CSS. It has a module for both Responsive and an unresponsive Grid. Grids have become ubiquitous when it comes to Web project layouts.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |