@barguide/style-guide
Advanced tools
Comparing version 0.0.2 to 0.0.3
@@ -6,4 +6,12 @@ # Change Log | ||
## [0.0.3](https://github.com/barguide/taps/compare/@barguide/style-guide@0.0.2...@barguide/style-guide@0.0.3) (2020-05-12) | ||
**Note:** Version bump only for package @barguide/style-guide | ||
## 0.0.2 (2020-05-05) | ||
**Note:** Version bump only for package @barguide/style-guide |
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : | ||
typeof define === 'function' && define.amd ? define(['exports'], factory) : | ||
(global = global || self, factory(global.Component = {})); | ||
(global = global || self, factory(global.default = {})); | ||
}(this, (function (exports) { 'use strict'; | ||
@@ -6,0 +6,0 @@ |
@@ -5,3 +5,3 @@ { | ||
"name": "@barguide/style-guide", | ||
"version": "0.0.2", | ||
"version": "0.0.3", | ||
"--------": "--------------------------------------------------------", | ||
@@ -38,3 +38,3 @@ "bugs": { | ||
}, | ||
"gitHead": "39bfae9f29955cd934974a0487f7026448733483" | ||
"gitHead": "ea82b5c6e277288080e870f7f4926f06651021a5" | ||
} |
@@ -1,39 +0,3 @@ | ||
# Applications CSS | ||
# @barguide/style-guide | ||
This folder should remain pretty slim. Everything in here should have and continue to follow the patterns provided. If we need 100 yellows that's fine but, we need to follow the `--spot` convention and carefully name things. | ||
**Folder Structure:** | ||
The basic idea is to separate concerns and minimize duplication of code. No longer will variables need to live everywhere in the site, they will **ALWAYS** be in the variables folder. If you need one off variables in your Component just create a `:root {}` tag in the CSS module limit the scope to that file. | ||
## Base | ||
These files reset and normalize our CSS. It sets up the overall `feel` for `Applications` and should remain extremely simple. Using this approach we will eventually be able to throw together a page of just standard tags with no classes, and it would still `feel right`. | ||
## Global | ||
This folder is imported into this new `style-guide`. This serves as an easy spot to add new `Global CSS` that will not be parsed through the CSS Module loader, meaning it will output `Standard CSS` which is very useful for 3rd party / vendor code. | ||
## Variables | ||
Colors, grid, typography and all that good stuff goes in here, as a variable within a `:root {}` tag. Following this pattern, we can `@import 'node_modules/@barguide/style-guide/src/variables/index.css'` from each new CSS module. The variables values are brought in to replace our `var()` with the value from the style-guide producing `0` waste or duplication. | ||
**Note:** If, we were to add standard `.selector { color: orange; }` in these files, that CSS would be brought into EACH and EVERY file that imported it 👎 👎 👎 | ||
### Style linter | ||
The basic idea here is the same as Eslint... We can enforce rules and standards around how we write CSS. This is setup to run on all CSS files in the shop application. | ||
- prevent the usage of ID selectors, | ||
- the are less performant | ||
- Preferred spacing and allowed values | ||
- ex: don't use seconds, instead use `milliseconds` | ||
- Avoid compound selectors ie: `a.link-class` -> `.link-class` | ||
- Avoid long selectors (capped at 3) | ||
**Note:** we can still disable these rules as needed: | ||
```css | ||
/* stylelint-disable-line */ | ||
/* stylelint-disable-next-line */ | ||
``` | ||
This package is a high level abstraction of our site-wide CSS for [BarGuide.io](https://barguide.io). |
134
268428
9375
4