loomcss - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

package.json

 {
   "name": "loomcss",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Weave your own pattern libraries.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -13,3 +13,3 @@ # Loom
 .c-fancy-button {
-  @include button(get-color(white), get-color(primary-background);
+  @include button(get-color(white), get-color(primary-background));
   @include font-size(large);
@@ -27,6 +27,6 @@ padding: get-spacing(xsmall) get-spacing(small);
 - Loom is a tool and isn't designed to "drop in and go". It is something to help professional designer/developers in their everyday tasks.
-- Loom loves design systems. THey're built into it from the core, with standardised ways of accessing global colours, spacing units and fonts.
+- Loom loves design systems. They're built into it from the core, with standardised ways of accessing global colours, spacing units and fonts.
 - Loom doesn't try and force you into the binary of choosing to write components or utility classes. It leaves that choice up to you.
 - Loom is opinionated about Sass structure, but kinda indifferent to CSS output. Loom would LOVE it if you used BEM, but you don't have to. Your final UI components can be written however you wish.
-- Loom is modular. You can easily add your own modules into a layer and have them working alongside the prebuilt ones.
+- Loom is modular. You can easily add your own modules into a layer and make them work alongside the prebuilt ones.
 - Loom loves best practise, and is quite opinionated on this, even if it doesn't force your hand. It loves the avoidance of nesting, styling of classes rather than base elements and the avoidance of specificity battles!
@@ -36,4 +36,4 @@ - No nesting. Loom really doesn't like nesting. Nesting makes for horrible specificity problems.
   - Specificity should come from source order, not selector specificity weight.
-  - CSS decoupled from markup. Only the Base Elements layer touches HTML directly, and then only to lightly style it. Every other layer should interact with HTML via classes.
-  - No `@extend`s. 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.
+  - CSS decoupled from HTML. Only the Base Elements layer touches HTML directly, and then only to lightly style it. Every other layer should interact with HTML via classes.
+  - No `@extend`s. 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`.
 - Loom knows when others do it better. Browser prefixes are (when necessary) best left to Autoprefixer, no?
@@ -67,4 +67,6 @@
 
-The layers of this project descend in specificity and scope order, from 10 to 100, with those at the top (10) being extremely broad 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:
+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:
+
 ## 10 - Global settings
@@ -74,29 +76,59 @@ Sass global variables. Should only contain those things used by multiple layers and modules.
 ## 20 - Tools
-Mixins and functions to support lower layers.
+Mixins and functions to support the lower layers.
 
 ## 30 - Generic
-Generic CSS, imported Normalize and Reset CSS. Things that aren't really visual.
+Generic CSS, imported Normalize and Reset CSS. Things that aren't really visual, but have a lot of impact across the project.
 
 ## 40 - Base elements
-Specific simple styling for base elements. Loom gives some extremely simple styling to those elements that have a standard visual "state" 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. Styling must be added via the Objects, UI Components or Utilities.
+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.
+
 ## 50 - Layouts
-Layer modules that provide layout-specific styling. They are used on wrapper containers that contain objects or components. Complications will likely occur if a Layout module and a lower layer module are used on the same HTML element.
+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!
+
 ## 60 - Objects
-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, they should eventually be converted into UI Components, which directly consume the Object mixins.
+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.
 
-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, with the HTML being `<button class="c-button c-button--primary">Continue</button>`. Your choice!
+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).
 
-Nothing really "visual" here, although a wireframe site and be quickly built up using this layer alone.
+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`.
 
+```html
+<button class="o-button c-button c-button--primary">Continue</button>
+```
+
+Or `.c-button` might consume `@include o-button` directly:
+
+```scss
+.c-button {
+  @include button();
+}
+```
+
+```html
+<button class="c-button c-button--primary">Continue</button>
+```
+
+Your choice!
+
 ## 70 - UI components
 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
+
 ## 80 - Utilities
-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. Should be used with caution. Excessive use of these implies that a component or setting is lacking.
+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.
+
 ## 90 - Trumps
-"Trumps" as in "a trump card". Extremely high specificity selectors. Anything in this layer is used with some embarrassment. An example use might be to override CSS coming from external sources.
+"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.
@@ -103,0 +135,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58033

increased by0.61%

Number of lines in readme file

145

increased by28.32%

No dependency changes