Loom gives you a way to build your own atomic design systems. Organised using ITCSS, and uses BEM as a naming convention, it aims to give you a quick way of scaffolding sites, and then give you a way of building your own atomic components.
Loom tries to find that sweet spot between Atomic CSS and manually written, appended-to-the-end-of-one-huge-css-file CSS.
It's highly modular, and lets you easily extend it with your own modules and classes.
.c-fancy-button {
@include button(get-color(white), get-color(primary-background));
@include font-size(large);
padding: get-spacing(xsmall) get-spacing(small);
}
Loom's manifesto and opinions:
@extends. These so, so, so easily mess up the source order of a project. Because ITCSS, the core of this, is source order dependent, it's best to avoid any use of @extend.Eventually this will be an npm module, a bower module and gem. For now it's installable via npm:
$ npm install loomcss --save-dev
Or go old-school and copy/paste the contents of the assets folder into your project. Hey, whatever works, right?
Once installed, you will need to add the installation path to your own build system. This will probably be something like node_modules/loomcss/assets.
Once you have made that folder available to your build you can access the Loom layers using:
@import 'loom/10-global-settings/misc';
// etc
Please DON'T just link to main.scss! This will prevent you getting access to the interweaved layers of the ITCSS stack (it's there as an example only). Instead, copy the list of imports from main.scss into your main project file. Yes, it feels unusual, but you'll gain a lot of power by doing so.
This library is a basis for your own design system and won't give you much visually out of the box!
The Sass in the project is arranged in layers, with specificity and scope increasing as you decend from layer 10 to 100. Layers at the top (10) are extremely broad in scope and of low specificity, and those at the bottom (100) being extremely specific and high specificity.
You can add your own layers, but the default ones are as follows:
Sass global variables. Should only contain those things used by multiple layers and modules.
Mixins and functions to support the lower layers.
Generic CSS, imported Normalize and Reset CSS. Things that aren't really visual, but have a lot of impact across the project.
Specific simple styling for base elements. Loom gives some extremely simple styling to those elements that have a standard visual "state" and are not normally styled with the aid of classes (<p>, <ul>, <dl>, etc).
Headings (<h1> to <h6>) are the exception to this, as they are often used to provide semantic meaning, and so have their styling removed by default.
In general styling for must be added via a module from the Objects, UI Components or Utilities layers.
Layer modules that provide layout-specific styling. They are used on wrapper containers that themselves contain Objects or UI Components.
NOTE: Complications will likely occur if a Layout module and a lower layer module are used on the same HTML element!
Complex chunks of CSS that are used as the base for UI Component modules. Each object is defined as a mixin and expressed as a class, and each class can be used on its own.
The classes can be used for quick scaffolding, anchoring their classnames directly to CSS. (However, Loom opines that they should eventually be converted into UI Components, which directly consume the Object mixins. But Loom has some funny ideas and talks about The War a lot).
Some things might stay as class-based objects, and be used as a base for skinning, in true OOCSS style. For example, .button can serve as the OO base for .c-button and .c-button--primary.
<button class="o-button c-button c-button--primary">Continue</button>
Or .c-button might consume @include o-button directly:
.c-button {
@include button();
}
<button class="c-button c-button--primary">Continue</button>
Your choice!
These are highly visual components built from Object mixins, Loom settings and custom CSS.
This layer will probably form the core of your own projects! :D
Utility modules provide classes that do one thing. While most visual styling should come from the component layer, there are always occasions where a separate class is needed to quickly nudge a component into shape.
Loom thinks that these should be used with caution, and that excessive use of these implies that a component or setting is lacking.
"Trumps" as in "a trump card". Extremely high specificity selectors live here!
Anything in this layer is used with some embarrassment. An example use might be to override CSS coming from external sources.
The only layer that !important is permitted in a module.
By default this project uses BEM notation for the optional CSS selectors.
You can specify fonts via the $LOOM-fonts. By default there is a primary and a secondary font. The default usage is secondary for headings and primary for everything else.
Each of these has a base and a webfont variant. These are for use with a font-observer system, that will add the class specified in $LOOM-fonts-loaded to the HTML element, allowing webfonts to be used without FOIC occurring.
Always looking for fellow conspirators.
FAQs
Weave your own pattern libraries.
The npm package loomcss receives a total of 0 weekly downloads. As such, loomcss popularity was classified as not popular.
We found that loomcss 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
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.