80 likes | 243 Vues
PROFOUND GRID. What is this Technology. A responsive grid system for fixed and fluid layouts. Based on compass, it gives you flexibility and complete control . Its was Web Development / Sass Since its inception in January 2013, profoundgrid.com has received over 300,000 unique visitors.
E N D
What is this Technology • A responsive grid system for fixed and fluid layouts. • Based on compass, it gives you flexibility and complete control. • Its was Web Development / Sass Since its inception in January 2013, profoundgrid.com has received over 300,000 unique visitors. • It has Three main Controls • Responsive • Semantic • Precise • Different examples which the grid is used as. • Fixed • Fluid • Multiple Grids • Push/pull
Why would I use Profound Grid? • Basically the Profound Grid allows both fluid and fixed layouts. • Ability to change the column and gutters width and the ability to remove or add columns any responsive layout can be supported. • Keeping websites mark-up semantic makes the code more readable and maintaining website easier.
How do I use it? • How do the three main controls work? • Responsive • Making the grid fluid or fixed, and adding per-media layouts as needed changing the column and gutter widths, and removing or adding columns as needed • Semantic • The grid keeps your mark-up semantic and work without any ‘grid_x’ classes. Unless you want to use them, in which case they are included. • Precise • Profound Grid uses negative margins to calculate columns unlike with other grids system. Fluid layouts will look exactly the same in every browser.
Basic Usage • This repo is a mirror of http://www.profoundgrid.com and should be understood as one big example. The grid is just one file: /sass/grid/_grid.scss • // ////////////////////// • // CONFIG • // ////////////////////// • @import 'grid/grid'; • $total_width: 100%; • $container_margin: 3.85%; • $gutter_width: 3.85%; • $max_width: 1233px; • .somecontainer{ • @include container();} • .somecolumn{ • @include column(9);} • .somesidebar{ • @include column(3); • @include push(9);}
How does the examples work? • Fixed • It has a standard fixed grid layout. Defines the amount of columns, column width and gutter width. • Fluid • A fluid grid that uses percentages of the total available width for the columns.
Multiple Grids • Different grid layout on the same page. • Push/pull • Add empty columns into the grid, or swap the order of columns from how they appears in the source.
Where do I get it? • There is website which shows some pictures and examples and how to download Profound Grid and also a forum page. • Reference • Website • http://www.profoundgrid.com/ • Forum • https://github.com/artofrawr/profoundgrid/