1 / 8

PROFOUND GRID

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.

edena
Télécharger la présentation

PROFOUND GRID

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PROFOUND GRID

  2. 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

  3. 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.

  4. 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.

  5. 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);}

  6. 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.

  7. 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.

  8. 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/

More Related