@littlemissrobot/sass-container
Advanced tools
Little Miss Robot container setup providing classes to define multiple container elements that apply a reusable max-width
This package provides a configuration object, to generate classes for a "container" layout. The container layout set a maximum width on content and centers it.
Make use of Dart Sass:
This library makes use of Dart Sass, which is the primary implementation of Sass. Make sure that your Sass compiler is making use of Dart Sass.
Generate only what you need:
This library generates classes based on your configuration. The larger the configuration, the more css, the larger the CSS file. DO NOT enable all the config options, but only the ones you actually use and need!
# As a dependency
$ npm install @littlemissrobot/sass-container
# As a dev-dependency
$ npm install --save-dev @littlemissrobot/sass-container
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-container";
// Dependency
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-system" as _system with (
$spacing: (
baseline: 8px,
),
$breakpoints: (
viewports: (
"3": 360px,
"4": 480px,
"7": 720px,
"9": 992px,
"12": 1200px
)
)
);
// Library
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-container" as _container with (
$settings: (),
$container: (),
$container-l: (),
$container-r: (),
$container-width: (),
$container-width-l: (),
$container-width-r: (),
$container-inset: (),
$container-inset-l: (),
$container-inset-r: (),
$container-inset-width: (),
$container-inset-width-l: (),
$container-inset-width-r: (),
$container-space: (),
$container-space-l: (),
$container-space-r: (),
$container-max-width: (),
$variants: (),
);
A map to setup the specifics of your default container. The map requires certain keys:
default key to indicate a fallback. if
the viewport goes below the latest breakpoint, then the default spacing values
is used.@use "@littlemissrobot/sass-container" as _container with (
$settings: (
max-width: 1024px,
spacing: (
default: 2,
"7": 4,
"12": 8
)
),
);
The container is used to create a block which applies a maximum width to its content and adds padding on the left and right side.
| Class | Variable |
|---|---|
| u-container | $container |
@use "@littlemissrobot/sass-container" as _container with (
$container: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container"></div>
<div class="u-container@7"></div>
<div class="u-container@to-7"></div>
The container is used to create a block which applies a maximum width to its content and adds padding on the left side.
| Class | Variable |
|---|---|
| u-container-l | $container-l |
@use "@littlemissrobot/sass-container" as _container with (
$container-l: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-l"></div>
<div class="u-container-l@7"></div>
<div class="u-container-l@to-7"></div>
The container is used to create a block which applies a maximum width to its content and adds padding on the right side.
| Class | Variable |
|---|---|
| u-container-r | $container-r |
@use "@littlemissrobot/sass-container" as _container with (
$container-r: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-r"></div>
<div class="u-container-r@7"></div>
<div class="u-container-r@to-7"></div>
Similar to the regular container, except that it only applies a maximum-width, and no padding on the sides.
| Class | Variable |
|---|---|
| u-container-width | $container-width |
@use "@littlemissrobot/sass-container" as _container with (
$container-width: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-width"></div>
<div class="u-container-width@7"></div>
<div class="u-container-width@to-7"></div>
Similar to the regular container, except that it only applies a maximum-width, and no padding on the left side.
| Class | Variable |
|---|---|
| u-container-width-l | $container-width-l |
@use "@littlemissrobot/sass-container" as _container with (
$container-width-l: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-width-l"></div>
<div class="u-container-width-l@7"></div>
<div class="u-container-width-l@to-7"></div>
Similar to the regular container, except that it only applies a maximum-width, and no padding on the right side.
| Class | Variable |
|---|---|
| u-container-width-r | $container-width-r |
@use "@littlemissrobot/sass-container" as _container with (
$container-width-r: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-width-r"></div>
<div class="u-container-width-r@7"></div>
<div class="u-container-width-r@to-7"></div>
Container-inset has similar behavior as the normal container, but instead of max-width it applies a padding on the left and right sides. This also takes into account the spacing defined in $settings.
| Class | Variable |
|---|---|
| u-container-inset | $container-inset |
@use "@littlemissrobot/sass-container" as _container with (
$container-inset: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-inset"></div>
<div class="u-container-inset@7"></div>
<div class="u-container-inset@to-7"></div>
Container-inset-l has similar behavior as the normal container-l, but instead of max-width it applies a padding on the left side. This also takes into account the spacing defined in $settings.
| Class | Variable |
|---|---|
| u-container-inset-l | $container-inset-l |
@use "@littlemissrobot/sass-container" as _container with (
$container-inset-l: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-inset-l"></div>
<div class="u-container-inset-l@7"></div>
<div class="u-container-inset-l@to-7"></div>
Container-inset-r has similar behavior as the normal container-r, but instead of max-width it applies a padding on the right side. This also takes into account the spacing defined in $settings.
| Class | Variable |
|---|---|
| u-container-inset-r | $container-inset-r |
@use "@littlemissrobot/sass-container" as _container with (
$container-inset-r: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-inset-r"></div>
<div class="u-container-inset-r@7"></div>
<div class="u-container-inset-r@to-7"></div>
Container-inset-width has similar behavior as the normal container, but instead of max-width it applies a padding on the left and right sides.
| Class | Variable |
|---|---|
| u-container-inset | $container-inset |
@use "@littlemissrobot/sass-container" as _container with (
$container-inset: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-inset"></div>
<div class="u-container-inset@7"></div>
<div class="u-container-inset@to-7"></div>
Container-inset-width-l has similar behavior as the normal container, but instead of max-width-l it applies a padding on the left side.
| Class | Variable |
|---|---|
| u-container-inset-l | $container-inset-l |
@use "@littlemissrobot/sass-container" as _container with (
$container-inset-l: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-inset-l"></div>
<div class="u-container-inset-l@7"></div>
<div class="u-container-inset-l@to-7"></div>
Container-inset-width-r has similar behavior as the normal container, but instead of max-width-r it applies a padding on the left side.
| Class | Variable |
|---|---|
| u-container-inset-r | $container-inset-r |
@use "@littlemissrobot/sass-container" as _container with (
$container-inset-r: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-inset-r"></div>
<div class="u-container-inset-r@7"></div>
<div class="u-container-inset-r@to-7"></div>
Similar to the regular container, except that it only applies a padding and the sides, and no width.
| Class | Variable |
|---|---|
| u-container-space | $container-space |
@use "@littlemissrobot/sass-container" as _container with (
$container-space: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-space"></div>
<div class="u-container-space@7"></div>
<div class="u-container-space@to-7"></div>
Similar to the regular container, except that it only applies a padding on the left side, and no width.
| Class | Variable |
|---|---|
| u-container-space-l | $container-space-l |
@use "@littlemissrobot/sass-container" as _container with (
$container-space-l: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-space-l"></div>
<div class="u-container-space-l@7"></div>
<div class="u-container-space-l@to-7"></div>
Similar to the regular container, except that it only applies a padding on the right side, and no width.
| Class | Variable |
|---|---|
| u-container-space-r | $container-space-r |
@use "@littlemissrobot/sass-container" as _container with (
$container-space-r: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-space-r"></div>
<div class="u-container-space-r@7"></div>
<div class="u-container-space-r@to-7"></div>
A simple class which only apples the max-width to the element. It does not center the element, nor add any spacing.
| Class | Variable |
|---|---|
| u-container-max-width | $container-max-width |
@use "@littlemissrobot/sass-container" as _container with (
$container-max-width: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
);
<div class="u-container-max-width"></div>
<div class="u-container-max-width@7"></div>
<div class="u-container-max-width@to-7"></div>
A map used to generate alternative container than the default one, which have
their own specific max-width. $variants is a map of items, each key placed
within the map is used as a name of the alternative container.
For each alternative container, you must use the key max-width to apply a
different max-width to that container. The other keys: container,
container-width are used to generate the container classes of that variant.
Within these are the samen configurable keys as the regular container:
default, at and to.
| Class | Variable |
|---|---|
| u-container-small | $variants |
| u-container-width-small | $variants |
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-container" as _container with (
$variants: (
small: (
max-width: 720px,
container: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-l: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-r: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-width: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-width-l: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-width-r: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-inset: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-inset-l: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-inset-r: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-inset-width: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-inset-width-l: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-inset-width-r: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
container-max-width: (
default: true,
at: ("3", "7"),
to: ("3", "7"),
),
),
),
);
<div class="u-container-small"></div>
<div class="u-container-l-small@7"></div>
<div class="u-container-r-small@to-7"></div>
<div class="u-container-width-small"></div>
<div class="u-container-width-l-small@7"></div>
<div class="u-container-width-r-small@to-7"></div>
FAQs
Little Miss Robot container setup providing classes to define multiple container elements that apply a reusable max-width
We found that @littlemissrobot/sass-container demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.