A collection of dynamically generated utility classes for offsetting positioned elements.
Class names follow the Emmet abbreviation
syntax, with colons (':') replaced by two dashes (--
) to follow BEM naming
conventions.
Available classes
.u-t--<amount>
: top
.u-end--<amount>
: horizontal end (right in ltr
, right in ltr
)
.u-r--<amount>
: right
.u-b--<amount>
: bottom
.u-start--<amount>
: horizontal start (left in ltr
, left in ltr
)
.u-l--<amount>
: left
Where <amount>
can be either a unitless number representing a number of
typographic rhythm units as defined in
$jigsass-sizes
a percentage, or a length specified in pixels.
JigSass Offset also supports negative offsets, using min-<number>
modifiers
(e.g., h-t--min-4
), as well as auto ofsets (e.g., h-b--auto
).
Installation
Using npm:
npm i -S jigsass-utils-offset
Usage
Import JigSass Utils Offset into your main scss file near its very end, together with all
other utilities (utilities should always be the last to be imported).
@import 'path/to/jigsass-utils-offset/scss/index';
Like all other JigSass Utils, JigSass Offset does not automatically generate any CSS
when imported. You would need to explicitly indicate that each individual offset
class should actually be generated in each component or object it is used in
(clarification: This will include style declarations inside .foo
and .bar
):
// _c.foo.scss
.foo {
@include jigsass-util(u-t, $modifier: 6px); // <-- top: 6px
...
}
// _c.bar.scss
.bar {
@include jigsass-util(u-b, $modifier: 12px); // <-- bottom: 12px
@include jigsass-util(u-b, $modifier: 0, $from: large); // <-- bottom: 0 from large bp and on.
...
}
Doing so helps us a great deal with portability, as no matter where we import component or object
partials, the correct utility classes will be generated. Think of it as a poor man's dependency
management.
Developer communication is also assisted by including "dependencies" wherever they are required,
as anyone going through a partial, can easily understand how it should be marked up with just a
glance.
As far as bloat goes, just don't worry about it - the actual styles will only be generated once,
at the location in the cascade where the Jigsass Offset partial was imported into the main file.
JigSass Offset classes are responsive-enabled, using JigSass MQ
and the breakpoints defined in the $jigsass-breakpoints variable.
Based on the breakpoint arguments passed to jigsass-util
when including a Offset class,
responsive modifiers are generated according to the following logic:
.u-t--<modifier>[-[-from-<breakpoint-name>][-until-<breakpoint-name>][-misc-<breakpoint-name>]]
So, assuming the medium
, large
and landscape
breakpoints are defined in $jigsass-breakpoints
as 600px
, 1024px
and (orientation: landscape)
respectively,
@include jigsass-util(u-t, $modifier: 2);
will generate the .u-t--2
class, which is not limited to any media-query.
@include jigsass-util(u-b, $modifier: min-4, $until: medium);
will generate the .u-b--min-4--until-medium
class, which will be in effect at
(max-width: 37.49em)
and will override styles in the default class until that point.
@include jigsass-util(u-l, $modifier: 20%, $from: large, $misc: landscape);
will generate the .u-l--20%--from-large-when-landscape
class, which will go into
effect at (min-width: 64em) and (orientation: landscape)
and will override styles in the default
class under these conditions.
License: MIT