Gutter helper is a scss tool designer to quickly generate helpers classes for margin and padding.
Gutter helper is available via bower with the following command
bower install silverhold-gutter
Gutter Helper is based on one single value (the $gh-gutter variable
located into the _parameters.scss
file) declinated through multipliers, properties (margin
and padding
), directions and responsive breakpoints and compiled as css classes.
The idea behind Gutter Helper is to fit perfectly to your needs and not generate too much useless css classes. For it you have a bunch of scss variables to set :
As mentioned previously, this is the base value for all the helper classes generated.
$gh-gutter: 30px !default;
A scss list that will regroup all the coefficient used to be multiplied to $gh-gutter
, the scss will loop through this list to generate multiplied helpers. Multplier can not be more than 9.9, only one digit behind the decimal point.
$gh-multipliers: (.5, 1, 2) !default;
A scss list that will regroup the kind of property that could be generated. The list can only contain 'margin' and/or 'padding'. If you are using px
units, the decimal for multiplied number will be rounded.
$gh-properties: ('margin', 'padding') !default;
A scss list that will regroup all the direction that can be generated. For example 'top' will generate class for the specific top direction will property as margin-top
or padding-top
. The only accepted value in this list are:
'a'
: for all, will generate for examplemargin
orpadding
property (without specific direction)'x'
: shortcut forleft
&right
'y'
: shortcut fortop
&bottom
'top'
,'right'
,'bottom'
and/or'left'
$gh-directions: ('a', 'x', 'y', 'top', 'right', 'bottom', 'left') !default;
A scss boolean that will generate (if true), responsive helper class based on the responsive-helper breakpoints.
$gh-responsive: true !default;
All the listed variables below are deprecated and replaced by its equivalent referenced. Don't panic, this is just some naming convention fixes, so there is no changes excepted the name of the variable, no feature change.
$gutter-helper--gutter
is deprecated and replaced by the$gh-gutter
$gutter-helper--multipliers
is deprecated and replaced by the$gh-multipliers
$gutter-helper--properties
is deprecated and replaced by the$gh-properties
$gutter-helper--directions
is deprecated and replaced by the$gh-directions
$gutter-helper-responsive
is deprecated and replaced by the$gh-responsive
Once you have set your variable, you are ready to go and use your classes ! You have follow the pattern below:
<div class="gutter-{property}-{direction}-{multiplier}x-{breakpoint}"></div>
Some observation :
- In order to have not to heavy class names,
padding
andmargin
have respectivep
andm
aliases instead.gutter-padding-...
will not work - For all direction, use
a
likegutter-p-a-xs
- For
left
andright
direction, usex
likegutter-p-x-2x-xs
- For
top
andbottom
direction, usey
likegutter-p-y-2x-xs
- If you want to use an helper class with 1 as multiplier just don't put any mutliplier in your class name like
gutter-p-a
- If you want to use a decimal multiplier, remove the decimal point like
gutter-p-a-15x-xs
- If your decimal multiplier is less than 0, put a 0 in your class. For example a .5 mutlplier class must be
gutter-p-a-05x-xs
- You can not write any breakpoint descriminator in your helper class for avoid media queries like
gutter-p-a-15x
.
You can use the get-gutter()
function that will return a value for depending of the parameter will pass (default value is 1
). This parameter must be a number that is indexed into the the $gh-multipliers
map.
$gh-gutter: 30px;
$gh-multipliers: (.5, 1, 2);
html {
padding-top: get-gutter(2);
}
// Will compile
html {
padding-top: 60px;
}
Gutter Helper can generates a lot of css, and it could be very costly on a performance perspective. In order to fully enjoy gutter helper without any generated classes unused we recommand the usage of unscss