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
Post a Comment