sass - SCSS Susy Configuration Settings -


i trying replicate bootstrap equivalent grid project. love idea having trouble config. using codekit, on latest version.

i want grid use following:

  • box-sizing: border-box;
  • 15px gutter each side of grid item
  • no un-need margin (unless @include push(); used).
  • 12 column grid default

these current settings:

$susy: (     container:          1170px,     columns:            12,     gutter:             .25,     global-box-sizing:  border-box,     output:             isolate ); 

at moment when want create 5 column grid:

.members{    &--li{     @include span(1 of 5);   }   } 

i expected this:

.members--li{   width: 20%;   float: left; } 

but got this:

.members--li{   width: 16.6666666667%;   float: left;   margin-right: 4.1666666667%; } 

i not sure margin right comes from, due addition never 5 column grid, expected 20% width. aware default 12 columns above have set 1 of 5.

ah that's bit tricky. in same situation , wrote mixins generate bootstrap grid susy , breakpoint. not yet perfect doing job ^^

checkout: http://sassmeister.com/gist/toh82/6d31d28888e930783f02

so take it, change breakpoint values wish , maybe helps you. there iteration container sizes missing in gist, if problem, let me know.

one of main things achieve bs-grid gutter-position: inside , different container max-width.


Comments

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -