├── .gitignore
├── .sass-lint.yml
├── LICENSE
├── README.md
├── assets
├── images
│ ├── naming-diagram--color@2x.png
│ └── naming-diagram--margin@2x.png
└── index.html
├── brunch-config.js
├── circle.yml
├── karma.conf.js
├── modules
├── all.scss
├── color
│ ├── README.md
│ └── index.scss
├── display
│ ├── README.md
│ └── index.scss
├── flex
│ ├── README.md
│ └── index.scss
├── grid
│ ├── README.md
│ └── index.scss
├── interaction
│ ├── README.md
│ └── index.scss
├── length
│ ├── README.md
│ └── index.scss
├── overlay
│ ├── README.md
│ └── index.scss
├── position
│ ├── README.md
│ └── index.scss
├── ratio
│ ├── README.md
│ └── index.scss
├── reset
│ ├── README.md
│ └── index.scss
├── spacing
│ ├── README.md
│ └── index.scss
├── style
│ ├── README.md
│ └── index.scss
├── table
│ ├── README.md
│ └── index.scss
└── typography
│ ├── README.md
│ └── index.scss
├── package.json
├── test
├── color.spec.js
├── decent.js
├── display.spec.js
├── flexbox.spec.js
├── float.spec.js
├── grid.spec.js
├── index.js
├── length.spec.js
├── position.spec.js
└── util
│ └── add-element.js
├── util
├── _defaults.scss
├── _interactions.example.scss
├── _mixins.scss
└── index.scss
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | css/
4 | npm-debug.log
5 | static
6 | public
7 | dist
8 |
--------------------------------------------------------------------------------
/.sass-lint.yml:
--------------------------------------------------------------------------------
1 | options:
2 | formatter: stylish
3 | files:
4 | include: '**/*.s+(a|c)ss'
5 | rules:
6 | # Extends
7 | extends-before-mixins: 1
8 | extends-before-declarations: 1
9 | placeholder-in-extend: 1
10 |
11 | # Mixins
12 | mixins-before-declarations: 1
13 |
14 | # Line Spacing
15 | one-declaration-per-line: 1
16 | empty-line-between-blocks: 1
17 | single-line-per-selector: 1
18 |
19 | # Disallows
20 | no-attribute-selectors: 0
21 | no-color-hex: 0
22 | no-color-keywords: 1
23 | no-color-literals: 1
24 | no-combinators: 0
25 | no-css-comments: 1
26 | no-debug: 1
27 | no-disallowed-properties: 0
28 | no-duplicate-properties: 1
29 | no-empty-rulesets: 1
30 | no-extends: 0
31 | no-ids: 1
32 | no-important: 1
33 | no-invalid-hex: 1
34 | no-mergeable-selectors: 1
35 | no-misspelled-properties: 1
36 | no-qualifying-elements: 1
37 | no-trailing-whitespace: 1
38 | no-trailing-zero: 1
39 | no-transition-all: 1
40 | no-universal-selectors: 0
41 | no-url-domains: 1
42 | no-url-protocols: 1
43 | no-vendor-prefixes: 1
44 | no-warn: 1
45 | property-units: 0
46 |
47 | # Nesting
48 | declarations-before-nesting: 1
49 | force-attribute-nesting: 1
50 | force-element-nesting: 1
51 | force-pseudo-nesting: 1
52 |
53 | # Name Formats
54 | class-name-format: 1
55 | function-name-format: 1
56 | id-name-format: 0
57 | mixin-name-format: 1
58 | placeholder-name-format: 1
59 | variable-name-format: 1
60 |
61 | # Style Guide
62 | attribute-quotes: 1
63 | bem-depth: 0
64 | border-zero: 1
65 | brace-style:
66 | - 1
67 | -
68 | style: 'stroustrup'
69 | clean-import-paths: 1
70 | empty-args: 1
71 | hex-length: 1
72 | hex-notation: 1
73 | indentation: 1
74 | leading-zero: 1
75 | max-line-length: 0
76 | max-file-line-count: 0
77 | nesting-depth: 1
78 | property-sort-order:
79 | - 1
80 | -
81 | order: 'smacss'
82 | pseudo-element: 1
83 | quotes: 1
84 | shorthand-values: 1
85 | url-quotes: 1
86 | variable-for-property: 1
87 | zero-unit: 1
88 |
89 | # Inner Spacing
90 | space-after-comma: 1
91 | space-before-colon: 1
92 | space-after-colon: 1
93 | space-before-brace: 1
94 | space-before-bang: 1
95 | space-after-bang: 1
96 | space-between-parens: 1
97 | space-around-operator: 1
98 |
99 | # Final Items
100 | trailing-semicolon: 1
101 | final-newline: 1
102 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Chris Griffith & Sean Washington
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Decent
2 |
3 | [](https://badge.fury.io/js/decent-scss)
4 | [](https://circleci.com/gh/decent-css)
5 |
6 | Decent is a flexible, functional CSS library for building _literally_ anything. Designed to be flexible and configurable, it can be used for building anything from simple prototypes to production applications and websites.
7 |
8 | * [Modules](#modules)
9 | * [Setup](#setup)
10 | * [Configuration](#configuration)
11 | * [Base](#base)
12 | * [Responsive Breakpoints](#responsive-breakpoints)
13 | * [Typography](#typography)
14 | * [Grid](#grid)
15 | * [Spacing, Length, and Position](#spacing-length-and-position)
16 | * [Style](#style)
17 | * [Overlay](#overlay)
18 | * [Principles](#principles)
19 | * [Naming & Configuration](#naming--configuration)
20 | * [Bass CSS & Tachyons](#bass-css--tachyons)
21 | ---
22 |
23 | ## Modules
24 |
25 | * [Color](/modules/color/README.md)
26 | * [Text Color](/modules/color/README.md#text-color)
27 | * [Background Color](/modules/color/README.md#background-color)
28 | * [Display](/modules/display/README.md)
29 | * [Overflow](/modules/display/README.md#overflow)
30 | * [Floats](/modules/display/README.md#overflow)
31 | * [Flex](/modules/flex/README.md)
32 | * [Flex Direction](#overflow)
33 | * [Flex Wrap](#overflow)
34 | * [Flex Grow](#flex-grow)
35 | * [Flex Shrink](#flex-shrink)
36 | * [Align Items](#align-items)
37 | * [Justify Content](#justify-content)
38 | * [Align Self](#align-self)
39 | * [Align Content](#align-content)
40 | * [Order](#order)
41 | * [Grid](/modules/grid/README.md)
42 | * [Interaction](/modules/interaction/README.md)
43 | * [Length](/modules/length/README.md)
44 | * [Overlay](/modules/overlay/README.md)
45 | * [Position](/modules/position/README.md)
46 | * [Ratio](/modules/ratio/README.md)
47 | * [Reset](/modules/reset/README.md)
48 | * [Spacing](/modules/spacing/README.md)
49 | * [Style](/modules/style/README.md)
50 | * [Table](/modules/table/README.md)
51 | * [Typography](/typography/flex/README.md)
52 |
53 |
54 | ---
55 |
56 | ## Setup
57 | ### Install Decent
58 | ```
59 | $ npm install --save-dev decent-scss
60 | ```
61 |
62 | ### Import Decent
63 | ```
64 | @import 'decent-scss/modules/all';
65 | ```
66 |
67 | ## Configuration
68 |
69 | Decent is meant to work for _your_ design, so take a few minutes to configure the framework. Create a `.scss` file to define your settings — something like `settings.scss`. And import that file _above_ your Decent import.
70 |
71 | ```
72 | @import 'path/to/settings';
73 | ```
74 |
75 | ### Base
76 |
77 | #### `rem`
78 | If you use `rem`'s for measurements and font sizes, you can update the base `rem` value with the `$rem-base` variable — this will be applied to the `body` selector. Default is `16px`.
79 |
80 | ```
81 | $rem-base: 16px;
82 | ```
83 |
84 | #### Box Sizing
85 | Setting `$border-box` to `true` will apply `box-sizing: border-box` to the `*` selector. Default is `false`.
86 |
87 | ```
88 | $border-box: true;
89 | ```
90 |
91 | #### Inputs
92 | Browser default styling of inputs aren't reset by the [Reset](/modules/reset) module, but they can be reset with Decent by setting `$reset-inputs` to `true`. Default is `false`.
93 | ```
94 | $reset-inputs: true;
95 | ```
96 |
97 | ### Responsive Breakpoints
98 | You can change or extend the breakpoints available with the `$breakpoints` map.
99 |
100 | ```
101 | $breakpoints: (
102 | sm: 480px,
103 | md: 768px,
104 | lg: 1280px,
105 | xl: 1440px
106 | );
107 | ```
108 |
109 | ### Typography
110 | [Change to font-sizes map]
111 |
112 | ```
113 | $ratio: 1.5;
114 | ```
115 |
116 | #### Typesets
117 |
118 | Typsets define the available types of your design, with two map keys being _reserved_ for semantic tags:
119 | * The `default` typeset will be set on the `body` selector.
120 | * The `monospace` typeset will be set on the `pre, code` selectors. But this typeset will also be available with the `.monospace` class.
121 |
122 | Additional maps will be availabe through classes that are defined by their keys. For example, the `display` map in the following configuration will generate a `.display` class that can be used to display a serif typeset.
123 |
124 | ```
125 | $typesets: (
126 | default: (
127 | font-family: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;),
128 | font-weight: 400,
129 | line-height-body: 1.6,
130 | line-height-heading: 1.2,
131 | text-transform: none,
132 | letter-spacing: 0
133 | ),
134 | monospace: (
135 | font-family: (Courier, monospace),
136 | font-weight: 400,
137 | line-height: 1.2,
138 | text-transform: none,
139 | letter-spacing: 0
140 | ),
141 | display: (
142 | font-family: ('Cormorant Garamond', Georgia, serif),
143 | font-weight: 400,
144 | line-height: 1.2,
145 | text-transform: uppercase,
146 | letter-spacing: 0.1em
147 | )
148 | );
149 | ```
150 |
151 | #### Weights
152 | Depending on how fonts are loaded and which weights are available, the `$font-weights` map can be used to rename the `font-weight` classes. The default map is:
153 |
154 | ```
155 | $font-weights: (
156 | 'regular': 400,
157 | 'semibold': 500,
158 | 'bold': 700
159 | );
160 | ```
161 |
162 | But, a more explicit map could be:
163 |
164 | ```
165 | $font-weights: (
166 | '400': 400,
167 | '500': 500,
168 | '700': 700
169 | );
170 | ```
171 |
172 | This would generate `.tw-400`, `.tw-500`, `.tw-700`.
173 |
174 |
175 | ### Grid
176 | The `$container-width` variable updates the `max-width` of the `.container` class.
177 | ```
178 | $container-width: 80rem;
179 | ```
180 |
181 | Decent's grid system is based off of 12 columns by default, but can be updated to support any number of columns with the `$columns` variable.
182 | ```
183 | $columns: 12;
184 | ```
185 |
186 |
187 | ### Spacing, Length, and Position
188 | The default `$measurements` are based off of a [modular scale](http://modularscale.com), but these can be any logical series of keys and values.
189 |
190 | ```
191 | $measurements: (
192 | '0': 0,
193 | '1': 0.5rem,
194 | '2': 1rem,
195 | '3': 1.75rem,
196 | '4': 3rem,
197 | '5': 5rem,
198 | '6': 9rem,
199 | '7': 16rem,
200 | '8': 28rem,
201 | '9': 48rem,
202 | '10': 72rem
203 | );
204 | ```
205 |
206 | ### Style
207 |
208 | #### Border Radius
209 | ```
210 | $border-radii: (
211 | 'default': 2px,
212 | '2': 4px
213 | );
214 | ```
215 |
216 | #### Box Shadow
217 | ```
218 | $shadows: (
219 | 'default': 0 1px 8px rgba(0, 0, 0, 0.1),
220 | '2': 0 4px 16px rgba(0, 0, 0, 0.1)
221 | );
222 | ```
223 |
224 | ### Overlay
225 | ```
226 | $overlays: (
227 | 'default': rgba(#000, 0.8),
228 | 'light': rgba(#fff, 0.8)
229 | );
230 | ```
231 |
232 |
233 | ## Principles
234 |
235 | ### Naming & Configuration
236 | Decent is designed to be incredibly flexible while balancing the right amount of assumption to be consistent and easy-to-use. Most of the Decent class names can be broken down into 5 categories (with some exceptions depending on the property):
237 |
238 |
239 | [`breakpoint-`][`property`][`modifiers`][`-key`][`-value`]
240 |
241 |
242 | #### Example — Color
243 | ```
244 | $colorsets: (
245 | 'primary': (
246 | 'alt': #
247 | )
248 | );
249 | ```
250 |
251 | 
252 |
253 |
254 | #### Example — Margin
255 |
256 | ```
257 | $modular-scale: (
258 | '1': 0.5rem
259 | );
260 | ```
261 |
262 | 
263 |
264 | ---
265 |
266 | You might see this and think to yourself, why would anyone want to write CSS this way? So did we. But after some research and using [Basscss](http://www.basscss.com/) for a bit we were hooked.
267 |
268 | Here's what convinced us:
269 |
270 | ### No Side Effects
271 | Although the cascade can be a useful thing, more often than not it becomes a hinderance in long term projects or with projects that have multiple developers working in the code base.
272 |
273 | ### Composable
274 | Think composition over inheritance. With Decent.scss you compose your ui out of already existing blocks (think legos) of css.
275 |
276 | ### Consistent
277 | Functional CSS helps to facility consistency in your end products. With Decent.scss, all of the values for whitespace, font sizes, etc are all calculated from the same settings. This means that there are no more magic numbers hiding out in your stylesheets and that consistency is as easy as using the generated classes.
278 |
279 | ### Clear & Easy to follow
280 | There's a lot of contention around this point, but we maintain that it's easier to reason about complexity in your markup as opposed to CSS. With CSS you have to worry about inheritance as well as the cascade, two things that can work against as soon as your website or app starts to grow. By taking a few minutes to familiarize yourself with the [Class Reference](https://github.com/octopuscreative/decent-scss/wiki) for Decent.scss, you'll be able to look at any markup and have a good idea of how it looks and functions.
281 |
282 | ### Customizable
283 | Decent utilizes maps to make the framework as flexible as possible. Modular scale (padding, margin, heights, and widths), font scale, typesetting, and colors are all configurable.
284 |
285 | #### Useful Reads
286 |
287 | * [About HTML semantics and front-end architecture](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)
288 | * [How not to scale css](https://gist.github.com/mrmrs/5d6c3bf60a9ff410fcec)
289 | * [Expressive CSS](http://johnpolacek.github.io/expressive-css/)
290 | * [CSS Purge](http://csspurge.com/)
291 | * [Semantic CSS](http://snook.ca/archives/html_and_css/semantic-css)
292 | * [Functional Programming, CSS, and your sanity](http://www.jon.gold/2015/07/functional-css/)
293 |
294 |
295 |
--------------------------------------------------------------------------------
/assets/images/naming-diagram--color@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/decent-css/decent/26fb92eff771e33306ca27b05cda8b030179a0e4/assets/images/naming-diagram--color@2x.png
--------------------------------------------------------------------------------
/assets/images/naming-diagram--margin@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/decent-css/decent/26fb92eff771e33306ca27b05cda8b030179a0e4/assets/images/naming-diagram--margin@2x.png
--------------------------------------------------------------------------------
/assets/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
.items-start
11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
17 |
18 |
19 |
20 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
--------------------------------------------------------------------------------
/brunch-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | paths: {
3 | watched: ['assets', 'modules'],
4 | public: 'dist'
5 | },
6 | files: {
7 | stylesheets: {
8 | joinTo: 'decent.css'
9 | },
10 | javascripts: {
11 | joinTo: 'initialize.js'
12 | }
13 | },
14 | plugins: {
15 | autoReload: {
16 | enabled: {
17 | css: true,
18 | assets: true
19 | }
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
1 | machine:
2 | timezone:
3 | America/Los_Angeles # Set the timezone
4 |
5 | # Add some environment variables
6 | environment:
7 | CIRCLE_ENV: test
8 |
9 | node:
10 | version: 8.1.0
11 |
12 | ## Customize test commands
13 | test:
14 | post:
15 | - npm test: # add an extra test type
16 | environment:
17 | NODE_ENV: test
18 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function (config) {
2 | config.set({
3 | browsers: [
4 | 'Chrome'
5 | ],
6 |
7 | files: [
8 | './dist/decent.css',
9 | './test/index.js'
10 | ],
11 |
12 | frameworks: [ 'mocha', 'chai' ],
13 |
14 | preprocessors: {
15 | 'test/*.js': [ 'webpack']
16 | },
17 |
18 | plugins: [
19 | 'karma-webpack',
20 | 'karma-chrome-launcher',
21 | 'karma-chai',
22 | 'karma-mocha',
23 | 'karma-mocha-reporter',
24 | ],
25 |
26 | reporters: [ 'mocha' ],
27 | singleRun: true,
28 |
29 | webpack: {
30 | module: {
31 | loaders: [
32 | {
33 | test: /\.css$/,
34 | loader: 'style-loader!css-loader!postcss-loader'
35 | }
36 | ]
37 | }
38 | },
39 |
40 | webpackMiddleware: {
41 | noInfo: true
42 | },
43 |
44 | client: {
45 | mocha: {
46 | reporter: 'html',
47 | ui: 'bdd'
48 | }
49 | }
50 |
51 | })
52 | }
53 |
--------------------------------------------------------------------------------
/modules/all.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import 'color/index';
7 | @import 'display/index';
8 | @import 'flex/index';
9 | @import 'grid/index';
10 | @import 'interaction/index';
11 | @import 'length/index';
12 | @import 'overlay/index';
13 | @import 'position/index';
14 | @import 'ratio/index';
15 | @import 'reset/index';
16 | @import 'spacing/index';
17 | @import 'style/index';
18 | @import 'table/index';
19 | @import 'typography/index';
20 |
--------------------------------------------------------------------------------
/modules/color/README.md:
--------------------------------------------------------------------------------
1 | # Color
2 |
3 | * [Configuration](#configuration)
4 | * [Class Reference](#class-reference)
5 | * [Text Color](#text-color)
6 | * [Background Color](#background-color)
7 |
8 | ---
9 |
10 | ## Configuration
11 |
12 | ### Colorsets
13 | ```
14 | $colorsets: (
15 | 'primary': (
16 | 'default': hsl(240, 90, 50),
17 | 'alt': hsl(240, 90, 40),
18 | 'alt-2': hsl(240, 90, 30)
19 | ),
20 | 'secondary': (
21 | 'default': hsl(27, 100, 53),
22 | 'alt': hsl(27, 100, 43)
23 | ),
24 | 'success': (
25 | 'default': hsl(122, 90, 50),
26 | 'alt': hsl(122, 90, 40),
27 | ),
28 | 'error': (
29 | 'default': hsl(0, 90, 50),
30 | 'alt': hsl(0, 90, 40),
31 | )
32 | 'grey': (
33 | 'black': hsl(240, 1, 1),
34 | '1': hsl(240, 4, 10),
35 | '2': hsl(240, 3, 24),
36 | '3': hsl(240, 3, 30),
37 | '4': hsl(240, 2, 40),
38 | '5': hsl(240, 2, 50),
39 | '6': hsl(240, 2, 84),
40 | '7': hsl(240, 1, 92),
41 | '8': hsl(240, 1, 96),
42 | 'white': hsl(240, 0, 99)
43 | )
44 | ) !default;
45 | ```
46 |
47 | ### Text Color
48 |
49 | | Class Name | Output |
50 | |----|---|
51 | | `c-primary` | `color: hsl(240, 90, 50)` |
52 | | `c-primary-alt` | `color: hsl(240, 90, 40)` |
53 | | `c-primary-alt-2` | `color: hsl(240, 90, 30)` |
54 | | `c-secondary` | `color: hsl(27, 100, 53)` |
55 | | `c-secondary-alt` | `color: hsl(27, 100, 43)` |
56 | | `c-success` | `color: hsl(122, 90, 50)` |
57 | | `c-success-alt` | `color: hsl(122, 90, 40)` |
58 | | `c-error` | `color: hsl(0, 90, 50)` |
59 | | `c-error-alt` | `color: hsl(0, 90, 40)` |
60 | | `c-grey-black` | `color: hsl(240, 1, 1)` |
61 | | `c-grey-1` | `color: hsl(240, 1, 10)` |
62 | | `c-grey-2` | `color: hsl(240, 4, 24)` |
63 | | `c-grey-3` | `color: hsl(240, 3, 30)` |
64 | | `c-grey-4` | `color: hsl(240, 3, 40)` |
65 | | `c-grey-5` | `color: hsl(240, 2, 50)` |
66 | | `c-grey-6` | `color: hsl(240, 2, 84)` |
67 | | `c-grey-7` | `color: hsl(240, 1, 92)` |
68 | | `c-grey-8` | `color: hsl(240, 1, 96)` |
69 | | `c-grey-white` | `color: hsl(240, 0, 99)` |
70 |
71 |
72 | ### Background Color
73 |
74 | | Class Name | Output |
75 | |----|---|
76 | | `cbg-primary` | `background-color: hsl(240, 90, 50)` |
77 | | `cbg-primary-alt` | `background-color: hsl(240, 90, 40)` |
78 | | `cbg-primary-alt-2` | `hsl(240, 90, 30)` |
79 | | `cbg-secondary` | `background-color: hsl(27, 100, 53)` |
80 | | `cbg-secondary-alt` | `background-color: hsl(27, 100, 43)` |
81 | | `cbg-success` | `background-color: hsl(122, 90, 50)` |
82 | | `cbg-success-alt` | `background-color: hsl(122, 90, 40)` |
83 | | `cbg-error` | `background-color: hsl(0, 90, 50)` |
84 | | `cbg-error-alt` | `background-color: hsl(0, 90, 40)` |
85 | | `cbg-grey-black` | `background-color: hsl(240, 1, 1)` |
86 | | `cbg-grey-1` | `background-color: hsl(240, 1, 10)` |
87 | | `cbg-grey-2` | `background-color: hsl(240, 4, 24)` |
88 | | `cbg-grey-3` | `background-color: hsl(240, 3, 30)` |
89 | | `cbg-grey-4` | `background-color: hsl(240, 3, 40)` |
90 | | `cbg-grey-5` | `background-color: hsl(240, 2, 50)` |
91 | | `cbg-grey-6` | `background-color: hsl(240, 2, 84)` |
92 | | `cbg-grey-7` | `background-color: hsl(240, 1, 92)` |
93 | | `cbg-grey-8` | `background-color: hsl(240, 1, 96)` |
94 | | `cbg-grey-white` | `background-color: hsl(240, 0, 99)` |
95 |
--------------------------------------------------------------------------------
/modules/color/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | @include build-colors($colorsets);
9 | @include build-greyscale($greyscale);
10 |
11 | @for $i from 0 through 10 {
12 | .a-#{$i} {
13 | opacity: $i / 10;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/modules/display/README.md:
--------------------------------------------------------------------------------
1 | # Display
2 |
3 | * [Class Reference](#class-reference)
4 | * [Overflow](#overflow)
5 | * [Floats](#overflow)
6 |
7 | ---
8 |
9 | ## Class Reference
10 |
11 | | Class | Output |
12 | |----------------|-----|
13 | | `hide` | `display: none` |
14 | | `inline` | `display: inline` |
15 | | `inline-block` | `display: inline-block` |
16 | | `inline-flex` | `display: inline-flex` |
17 | | `block` | `display: block` |
18 | | `flex` | `display: flex` |
19 |
20 | ### Overflow
21 |
22 | | Class | Output |
23 | |----------------|----------------|
24 | | `o-auto` | `overflow: auto` |
25 | | `o-visible` | `overflow: visible` |
26 | | `o-hidden` | `overflow: hidden` |
27 |
28 | ### Floats
29 |
30 | | Class | Output |
31 | |----------------|----------------|
32 | | `f-none` | `float: none` |
33 | | `f-left` | `float: left` |
34 | | `f-right` | `float: hidden` |
35 |
36 |
37 | Identifier | Key |
38 | |----------------|----------------|
39 | | `f` | `none`, `left`, `right` |
40 |
41 | `clearfix`
42 |
43 |
--------------------------------------------------------------------------------
/modules/display/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | @include build-classes(
9 | (
10 | 'hide': (display, none),
11 | 'inline': (display, inline),
12 | 'block': (display, block),
13 | 'inline-block': (display, inline-block),
14 | 'o': (overflow,
15 | (
16 | 'auto': auto,
17 | 'visible': visible,
18 | 'hidden': hidden
19 | )
20 | ),
21 | 'f': (float,
22 | (
23 | 'none': none,
24 | 'left': left,
25 | 'right': right
26 | )
27 | )
28 | ),
29 | $breakpoints
30 | );
31 |
32 | .clearfix {
33 | &::after {
34 | display: table;
35 | clear: both;
36 | content: '';
37 | }
38 | }
39 |
40 | // ============================================================================
41 | // Deprecation
42 | // sass-lint:disable-all
43 | // ----------------------------------------------------------------------------
44 |
45 | .no-wrap { white-space: nowrap; }
46 | .d-hidden, .hidden { visibility: hidden; pointer-events: none; position: absolute; left: -300%; }
47 | .d-inline-block { display: inline-block; }
48 | .d-block { display: block; }
49 | .d-none { display: none; }
50 | .d-full { width: 100%; height: 100vh; }
51 | .crop, [class^='crop-'], [class*=' crop-'] {
52 | overflow: hidden;
53 | &[class*='fit'] { width: 100%; }
54 | &[class*='cover'] img {
55 | min-height: 100%;
56 | object-fit: cover;
57 | }
58 | }
59 | [class^='bg-'],
60 | [class*=' bg-'] {
61 | &[class*='cover'] { background-size: cover; }
62 | }
63 |
64 | // ----------------------------------------------------------------------------
65 | // sass-lint:enable-all
66 |
--------------------------------------------------------------------------------
/modules/flex/README.md:
--------------------------------------------------------------------------------
1 | # Flex
2 |
3 | * [Class Reference](#class-reference)
4 | * [Flex Direction](#overflow)
5 | * [Flex Wrap](#overflow)
6 | * [Flex Grow](#flex-grow)
7 | * [Flex Shrink](#flex-shrink)
8 | * [Align Items](#align-items)
9 | * [Justify Content](#justify-content)
10 | * [Align Self](#align-self)
11 | * [Align Content](#align-content)
12 | * [Order](#order)
13 | ---
14 |
15 | ## Class Reference
16 |
17 | | Class | Output |
18 | |----------------|----------------|
19 | | `flex` | `display: flex` |
20 | | `inline-flex` | `display: inline-flex` |
21 |
22 |
23 | ### Flex Direction
24 |
25 | | Class | Output |
26 | |----------------|----------------|
27 | | `flex-row` | `flex-direction: row` |
28 | | `flex-row-reverse` | `flex-direction: row-reverse` |
29 | | `flex-column` | `flex-direction: column` |
30 | | `flex-column-reverse` | `flex-direction: column-reverse` |
31 |
32 |
33 | ### Flex Wrap
34 |
35 | | Class | Output |
36 | |----------------|----------------|
37 | | `flex-wrap` | `flex-wrap: wrap` |
38 | | `flex-nowrap` | `flex-wrap: nowrap` |
39 |
40 | ### Flex Grow
41 |
42 | | Class | Output |
43 | |----------------|----------------|
44 | | `flex-grow` | `flex-grow: 1` |
45 | | `flex-grow-0` | `flex-grow: 0` |
46 | | `flex-grow-1` | `flex-grow: 1` |
47 | | `flex-grow-2` | `flex-grow: 2` |
48 | | `flex-grow-3` | `flex-grow: 3` |
49 |
50 | ### Flex Shrink
51 |
52 | | Class | Output |
53 | |----------------|----------------|
54 | | `flex-shrink` | `flex-shrink: 1` |
55 | | `flex-shrink-0` | `flex-shrink: 0` |
56 | | `flex-shrink-1` | `flex-shrink: 1` |
57 | | `flex-shrink-2` | `flex-shrink: 2` |
58 | | `flex-shrink-3` | `flex-shrink: 3` |
59 |
60 | ### Align Items
61 |
62 | ### Justify Content
63 |
64 | ### Align Self
65 |
66 | ### Align Content
67 |
68 | ### Order
69 |
70 | ### Flex Grow
71 |
72 |
--------------------------------------------------------------------------------
/modules/flex/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | @include build-classes(
9 | (
10 | 'flex': (display, flex),
11 | 'inline-flex': (display, inline-flex),
12 | 'flex-column': (flex-direction,
13 | (
14 | 'default': column,
15 | 'reverse': column-reverse
16 | )
17 | ),
18 | 'flex-row': (flex-direction,
19 | (
20 | 'default': row,
21 | 'reverse': row-reverse
22 | )
23 | ),
24 | 'flex-wrap': (flex-wrap, wrap),
25 | 'flex-nowrap': (flex-wrap, nowrap),
26 | 'flex-grow': (flex-grow,
27 | (
28 | 'default': 1,
29 | '0': 0,
30 | '1': 1,
31 | '2': 2,
32 | '3': 3
33 | )
34 | ),
35 | 'flex-shrink': (flex-shrink,
36 | (
37 | 'default': 1,
38 | '0': 0,
39 | '1': 1,
40 | '2': 2,
41 | '3': 3
42 | )
43 | ),
44 | 'items': (align-items,
45 | (
46 | 'start': flex-start,
47 | 'end': flex-end,
48 | 'center': center,
49 | 'baseline': baseline,
50 | 'stretch': stretch
51 | )
52 | ),
53 | 'justify': (justify-content,
54 | (
55 | 'start': flex-start,
56 | 'end': flex-end,
57 | 'center': center,
58 | 'between': space-between,
59 | 'around': space-around
60 | )
61 | ),
62 | 'self': (align-self,
63 | (
64 | 'start': flex-start,
65 | 'end': flex-end,
66 | 'center': center,
67 | 'baseline': baseline,
68 | 'stretch': stretch
69 | )
70 | ),
71 | 'content': (align-content,
72 | (
73 | 'start': flex-start,
74 | 'end': flex-end,
75 | 'center': center,
76 | 'between': space-between,
77 | 'around': space-around
78 | )
79 | ),
80 | 'flex-order': (order,
81 | (
82 | '0': 0,
83 | '1': 1,
84 | '2': 2,
85 | '3': 3,
86 | '4': 4
87 | )
88 | )
89 | ),
90 | $breakpoints
91 | );
92 |
--------------------------------------------------------------------------------
/modules/grid/README.md:
--------------------------------------------------------------------------------
1 | # Grid
2 |
3 | * [Configuration](#configuration)
4 | * [Class Reference](#class-reference)
5 | * [Container](#container)
6 | * [Columns](#columns)
7 | * [Push](#push)
8 |
9 | ## Configuration
10 |
11 | ```
12 | $container-width: 80rem;
13 | $columns: 12;
14 | ```
15 |
16 | ## Class Reference
17 |
18 | ### Container
19 |
20 | `container`
21 |
22 | ### Columns
23 |
24 | ### Push
25 |
26 | | Identifier | Key |
27 | |----------------|-----|
28 | | `col` | `1` - `12` |
29 | | `push` | `1` - `12` |
30 |
--------------------------------------------------------------------------------
/modules/grid/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | .container {
9 | max-width: $container-width;
10 | margin-right: auto;
11 | margin-left: auto;
12 | }
13 |
14 | [class^='col-'],
15 | [class*='col-'] {
16 | width: 100%;
17 |
18 | // If we're clearfix-ing, it's because we intend to use float columns.
19 | .clearfix & { float: left; }
20 | }
21 |
22 | @for $i from 1 through $columns {
23 | .col-#{$i} { width: ($i / $columns * 100%); }
24 | .push-#{$i} { margin-left: ($i / $columns * 100%); }
25 | }
26 |
27 | @each $abbr, $breakpoint in $breakpoints {
28 | @media (min-width: $breakpoint) {
29 | @for $i from 1 through $columns {
30 | .#{$abbr}-col-#{$i} { width: ($i / $columns * 100%); }
31 | .#{$abbr}-push-#{$i} { margin-left: ($i / $columns * 100%); }
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/modules/interaction/README.md:
--------------------------------------------------------------------------------
1 | # Interaction
2 |
3 | ## Configuration
4 |
5 | ```
6 | $interactions: (
7 |
8 | scaleUp: (
9 | settings: (
10 | ),
11 | start: (
12 | transform: translate3d(0,0,0) scale(1)
13 | ),
14 | end: (
15 | transform: translate3d(0,0,0) scale(1.025)
16 | )
17 | ),
18 |
19 | fadeIn: (
20 | start: (
21 | opacity: 0
22 | ),
23 | end: (
24 | opacity: 1
25 | )
26 | )
27 |
28 | );
29 | ```
30 |
31 | ## Classes
32 |
33 | ### Target Classes
34 |
35 | | Identifiers | Keys (Defaults) |
36 | |-------------|-----------------|
37 | | `hover` | `scaleUp`, `fadeIn`, `...` |
38 | | `focus` | `scaleUp`, `fadeIn`, `...` |
39 | | `active` | `scaleUp`, `fadeIn`, `...` |
40 |
41 | ### Actor Classes
42 |
43 | Because there can be a difference between target element and the actual element that is animated, you have to specific the `-actor` element. If the parent element is also the one you'd like animated, you can append `-actor` to the animation class:
44 |
45 | ```
46 | hover-scaleUp-actor
47 | ```
48 |
49 | If the element that you'd like to animate is a child of the target element, you can specify an actor for each animation class:
50 |
51 | ```
52 | `scaleUp-actor`
53 | ```
54 |
55 | This allows for multiple animations per target.
56 |
57 | ```
58 |
59 |
60 |
61 |
This button does a thing.
62 |
63 |
64 | ```
65 |
--------------------------------------------------------------------------------
/modules/interaction/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | @each $interaction, $contexts in $interactions {
9 | [class^='hover-'],
10 | [class*=' hover-'] {
11 | @include interaction($interaction, $contexts, 'hover');
12 | }
13 |
14 | [class^='active-'],
15 | [class*=' active-'] {
16 | @include interaction($interaction, $contexts, 'active');
17 | }
18 |
19 | [class^='focus-'],
20 | [class*=' focus-'] {
21 | @include interaction($interaction, $contexts, 'focus');
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/modules/length/README.md:
--------------------------------------------------------------------------------
1 | # Length
2 |
3 | ## Configuration
4 |
5 | ### Modular Scale
6 | ```
7 | $modular-scale: (
8 | '0': 0,
9 | '1': 0.5rem,
10 | '2': 1rem,
11 | '3': 1.75rem,
12 | '4': 3rem,
13 | '5': 5rem,
14 | '6': 9rem,
15 | '7': 16rem,
16 | '8': 28rem,
17 | '9': 48rem,
18 | '10': 72rem
19 | );
20 | ```
21 |
22 | ### Percentage Scale
23 | ```
24 | $percentage-scale: (
25 | '0': 0,
26 | '10': 10%,
27 | '20': 20%,
28 | '30': 30%,
29 | '40': 40%,
30 | '50': 50%,
31 | '60': 60%,
32 | '70': 70%,
33 | '80': 80%,
34 | '90': 90%,
35 | '100': 100%,
36 | );
37 | ```
38 |
39 | ## Classes
40 |
41 | ### Modular
42 |
43 | | Identifier | Key |
44 | |----------------|-----|
45 | | `w` | `0` - `10` |
46 | | `h` | `0` - `10` |
47 | | `maxw` | `0` - `10` |
48 | | `maxh` | `0` - `10` |
49 |
50 |
51 | ### Percentage
52 |
53 | | Identifier | Key |
54 | |----------------|-----|
55 | | `wp` | `0`, `10`, `20`, `30`, `40`, `50`, `60`, `70`, `80`, `90`, `100` |
56 | | `hp` | `0`, `10`, `20`, `30`, `40`, `50`, `60`, `70`, `80`, `90`, `100` |
57 | | `maxwp` | `0`, `10`, `20`, `30`, `40`, `50`, `60`, `70`, `80`, `90`, `100` |
58 | | `maxhp` | `0`, `10`, `20`, `30`, `40`, `50`, `60`, `70`, `80`, `90`, `100` |
59 |
--------------------------------------------------------------------------------
/modules/length/index.scss:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2016-2017, Christian Griffith & Sean Washington.
2 | //
3 | // Permission is hereby granted, free of charge, to any person obtaining a copy
4 | // of this software and associated documentation files (the "Software"), to
5 | // deal in the Software without restriction, including without limitation the
6 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
7 | // sell copies of the Software, and to permit persons to whom the Software is
8 | // furnished to do so, subject to the following conditions:
9 | //
10 | // The above copyright notice and this permission notice shall be included in
11 | // all copies or substantial portions of the Software.
12 | //
13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
18 | // FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
19 | // IN THE SOFTWARE.
20 |
21 | @import '../../util/index';
22 |
23 | @include build-classes(
24 | (
25 | 'w': (width, map-merge($modular-scale, ('auto': auto))),
26 | 'minw': (min-width, $modular-scale),
27 | 'maxw': (max-width, $modular-scale),
28 | 'wp': (width, $percentage-scale),
29 | 'minwp': (min-width, $percentage-scale),
30 | 'maxwp': (max-width, $percentage-scale),
31 | 'h': (height, map-merge($modular-scale, ('auto': auto))),
32 | 'hp': (height, $percentage-scale),
33 | 'minh': (min-height, $modular-scale),
34 | 'maxh': (max-height, $modular-scale),
35 | 'minhp': (min-height, $percentage-scale),
36 | 'maxhp': (max-height, $percentage-scale)
37 | ),
38 | $breakpoints
39 | );
40 |
--------------------------------------------------------------------------------
/modules/overlay/README.md:
--------------------------------------------------------------------------------
1 | # Overlay
2 |
3 | ## Configuration
4 |
5 | ```
6 | $overlays: (
7 | 'default': rgba(#000, 0.8),
8 | 'light': rgba(#fff, 0.8)
9 | );
10 | ```
11 |
12 | ## Classes
13 |
14 | | Identifier | Key |
15 | |----------------|-----|
16 | | `overlay` | `light` |
17 |
--------------------------------------------------------------------------------
/modules/overlay/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | .overlay,
9 | [class^='overlay-'],
10 | [class*='overlay-'] {
11 | top: 0;
12 | left: 0;
13 | width: 100%;
14 | height: 100%;
15 | }
16 |
17 | @each $overlay, $bg in $overlays {
18 | @if $overlay == 'default' {
19 | .overlay {
20 | background: $bg;
21 | }
22 | }
23 | @else {
24 | .overlay-#{$overlay} {
25 | background: $bg;
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/modules/position/README.md:
--------------------------------------------------------------------------------
1 | # Position
2 |
3 | ## Configuration
4 |
5 | ### z-index Scale
6 |
7 | ```
8 | $z-scale: (
9 | '5': 1000,
10 | '4': 900,
11 | '3': 500,
12 | '2': 100,
13 | '1': 10,
14 | '0': 0
15 | );
16 | ```
17 |
18 |
19 | ## Classes
20 |
21 | ### Position
22 |
23 | | Key |
24 | |-----|
25 | | `relative` |
26 | | `absolute` |
27 | | `fixed` |
28 |
29 | ### Coordinates
30 |
31 | | Identifiers | Key (Default) |
32 | |-------------|---------------|
33 | | `top` | `0`, `10`, `20`, `30`, `40`, `50`, `60`, `70`, `80`, `90`, `100` |
34 | | `right` | `0`, `10`, `20`, `30`, `40`, `50`, `60`, `70`, `80`, `90`, `100` |
35 | | `bottom` | `0`, `10`, `20`, `30`, `40`, `50`, `60`, `70`, `80`, `90`, `100` |
36 | | `left` | `0`, `10`, `20`, `30`, `40`, `50`, `60`, `70`, `80`, `90`, `100` |
37 |
38 | ### z-index
39 |
40 | | Identifiers | Key (Default) |
41 | |-------------|---------------|
42 | | `z` | `1` - `5` |
43 | | `zn` | `1` - `10` |
44 |
--------------------------------------------------------------------------------
/modules/position/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | @include build-classes(
9 | (
10 | 'relative': (position, relative),
11 | 'absolute': (position, absolute),
12 | 'fixed': (position, fixed),
13 | 'top': (top, $percentage-scale),
14 | 'right': (right, $percentage-scale),
15 | 'bottom': (bottom, $percentage-scale),
16 | 'left': (left, $percentage-scale),
17 | 'z': (z-index, $z-scale),
18 | 'zn': (z-index,
19 | (
20 | '1': -1,
21 | '10': -10
22 | )
23 | ),
24 | 'origin': (transform,
25 | (
26 | 'center': translate3d(-50%, -50%, 0),
27 | 'top-left': translate3d(0, 0, 0),
28 | 'top-right': translate3d(0, 100%, 0),
29 | 'bottom-left': translate3d(100%, 0, 0),
30 | 'bottom-right': translate3d(100%, 100%, 0)
31 | )
32 | )
33 | ),
34 | $breakpoints
35 | );
36 |
--------------------------------------------------------------------------------
/modules/ratio/README.md:
--------------------------------------------------------------------------------
1 | # Ratio
2 |
3 | ## Configuration
4 |
5 | ```
6 | $ratios: (
7 | 1_1: 1/1,
8 | 1_2: 2/1,
9 | 4_3: 3/4,
10 | 5_3: 3/5,
11 | 16_9: 9/16,
12 | 21_9: 9/21,
13 | 36_9: 9/36,
14 | iphone7: 1334/750,
15 | macbookpro15: 1800/2880
16 | );
17 | ```
18 |
19 | ## Class
20 |
21 | | Identifier | Keys (Defaults) |
22 | |------------|-----------------|
23 | | `ratio` | `1_1`, `1_2`, `4_3`, `5_3`, `16_9`, `21_9`, `36_9`, `iphone7`, `macbookpro15` |
24 |
--------------------------------------------------------------------------------
/modules/ratio/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | [class^='ratio-'],
9 | [class*=' ratio-'] {
10 | position: relative;
11 |
12 | &::before {
13 | display: block;
14 | content: '';
15 | }
16 |
17 | & > * {
18 | &:not([class*='absolute']) {
19 | position: absolute;
20 | top: 0;
21 | left: 0;
22 | }
23 | }
24 |
25 | @each $name, $ratio in $ratios {
26 | &[class*='#{$name}'] {
27 | &::before {
28 | padding-top: ($ratio * 100) + 0%;
29 | }
30 | }
31 | }
32 | }
33 |
34 | // Cool little trick thanks to:
35 | // http://www.mademyday.de/css-height-equals-width-with-pure-css.html.
36 |
--------------------------------------------------------------------------------
/modules/reset/README.md:
--------------------------------------------------------------------------------
1 | # Reset
2 |
3 | ## Configuration
4 |
5 | ```
6 | $reset-inputs: true;
7 | ```
8 |
--------------------------------------------------------------------------------
/modules/reset/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | // sass-lint:disable-all
9 | // Reset the inputs (default: true)
10 | @if $reset-inputs {
11 | // Form Resets.
12 | // This allows us to define the styles ourselves – except
13 | // for radios and checkboxes where it may be useful to have
14 | // the native elements.
15 | textarea,
16 | input[type='email'],
17 | input[type='number'],
18 | input[type='search'],
19 | input[type='text'],
20 | input[type='tel'],
21 | input[type='url'],
22 | input[type='password']
23 | button {
24 | appearance: none;
25 | -webkit-appearance: none;
26 | border: none;
27 | box-shadow: none;
28 | }
29 | }
30 |
31 | a {
32 | text-decoration: none;
33 | }
34 |
35 | // Reset
36 | // (http://meyerweb.com/eric/tools/css/reset/)
37 | html,
38 | body,
39 | div,
40 | span,
41 | applet,
42 | object,
43 | iframe,
44 | h1,
45 | h2,
46 | h3,
47 | h4,
48 | h5,
49 | h6,
50 | p,
51 | blockquote,
52 | pre,
53 | a,
54 | abbr,
55 | acronym,
56 | address,
57 | big,
58 | cite,
59 | code,
60 | del,
61 | dfn,
62 | em,
63 | img,
64 | ins,
65 | kbd,
66 | q,
67 | s,
68 | samp,
69 | small,
70 | strike,
71 | strong,
72 | sub,
73 | sup,
74 | tt,
75 | var,
76 | b,
77 | u,
78 | i,
79 | center,
80 | dl,
81 | dt,
82 | dd,
83 | ol,
84 | ul,
85 | li,
86 | fieldset,
87 | form,
88 | label,
89 | legend,
90 | table,
91 | caption,
92 | tbody,
93 | tfoot,
94 | thead,
95 | tr,
96 | th,
97 | td,
98 | article,
99 | aside,
100 | canvas,
101 | details,
102 | embed,
103 | figure,
104 | figcaption,
105 | footer,
106 | header,
107 | hgroup,
108 | menu,
109 | nav,
110 | output,
111 | ruby,
112 | section,
113 | summary,
114 | time,
115 | mark,
116 | audio,
117 | video {
118 | margin: 0;
119 | padding: 0;
120 | border: 0;
121 | font-size: 100%;
122 | font-weight: normal;
123 | font-family: inherit;
124 | vertical-align: baseline;
125 | }
126 |
127 | /* HTML5 display-role reset for older browsers */
128 | article,
129 | aside,
130 | details,
131 | figcaption,
132 | figure,
133 | footer,
134 | header,
135 | hgroup,
136 | menu,
137 | nav,
138 | section {
139 | display: block;
140 | }
141 |
142 | body {
143 | line-height: 1;
144 | }
145 |
146 | ol,
147 | ul {
148 | list-style: none;
149 | }
150 |
151 | blockquote,
152 | q {
153 | quotes: none;
154 | }
155 |
156 | blockquote::before,
157 | blockquote::after,
158 | q::before,
159 | q::after {
160 | content: '';
161 | content: none;
162 | }
163 |
164 | table {
165 | border-collapse: collapse;
166 | border-spacing: 0;
167 | }
168 | // sass-lint:enable-all
169 |
--------------------------------------------------------------------------------
/modules/spacing/README.md:
--------------------------------------------------------------------------------
1 | # Spacing
2 |
3 | ## Configuration
4 |
5 | ### Modular Scale
6 | ```
7 | $modular-scale: (
8 | '0': 0,
9 | '1': 0.5rem,
10 | '2': 1rem,
11 | '3': 1.75rem,
12 | '4': 3rem,
13 | '5': 5rem,
14 | '6': 9rem,
15 | '7': 16rem,
16 | '8': 28rem,
17 | '9': 48rem,
18 | '10': 72rem
19 | );
20 | ```
21 |
22 | ## Classes
23 |
24 | ### Padding
25 |
26 | | Identifiers | Keys (Defaults) |
27 | |---------------|-------------------|
28 | | `p` | `0` - `10` |
29 | | `pt` | `0` - `10` |
30 | | `pr` | `0` - `10` |
31 | | `pb` | `0` - `10` |
32 | | `pl` | `0` - `10` |
33 | | `px` | `0` - `10` |
34 | | `py` | `0` - `10` |
35 |
36 | ### Margin
37 |
38 | | Identifiers | Keys (Defaults) |
39 | |---------------|-------------------|
40 | | `m` | `0` - `10` |
41 | | `mt` | `0` - `10` |
42 | | `mr` | `0` - `10` |
43 | | `mb` | `0` - `10` |
44 | | `ml` | `0` - `10`, `auto` |
45 | | `mx` | `0` - `10`, `auto` |
46 | | `my` | `0` - `10` |
47 | | `mtn` | `0` - `10` |
48 | | `mrn` | `0` - `10` |
49 | | `mbn` | `0` - `10` |
50 | | `mln` | `0` - `10` |
51 |
--------------------------------------------------------------------------------
/modules/spacing/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | @include build-classes(
9 | (
10 | 'p': (padding, $modular-scale),
11 | 'pt': (padding-top, $modular-scale),
12 | 'pr': (padding-right, $modular-scale),
13 | 'pb': (padding-bottom, $modular-scale),
14 | 'pl': (padding-left, $modular-scale),
15 | 'px': ((padding-left, padding-right), $modular-scale),
16 | 'py': ((padding-top, padding-bottom), $modular-scale),
17 | 'm': (margin, $modular-scale),
18 | 'mt': (margin-top, $modular-scale),
19 | 'mr': (margin-right, $modular-scale),
20 | 'mb': (margin-bottom, $modular-scale),
21 | 'ml': (margin-left, map-merge($modular-scale, ('auto': auto))),
22 | 'mx': ((margin-left, margin-right), map-merge($modular-scale, ('auto': auto))),
23 | 'my': ((margin-top, margin-bottom), $modular-scale)
24 | ),
25 | $breakpoints
26 | );
27 |
28 | @include build-classes(
29 | (
30 | 'mtn': (margin-top, $modular-scale),
31 | 'mrn': (margin-right, $modular-scale),
32 | 'mbn': (margin-bottom, $modular-scale),
33 | 'mln': (margin-left, $modular-scale),
34 | 'mxn': ((margin-left, margin-right), $modular-scale),
35 | ),
36 | $breakpoints,
37 | true
38 | );
39 |
40 | @if $border-box {
41 | * {
42 | box-sizing: border-box;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/style/README.md:
--------------------------------------------------------------------------------
1 | # Style
2 |
3 | ## Configuration
4 |
5 | ### Border
6 |
7 | ```
8 | $default-border-weight: 1px;
9 | $default-border-color: #e8e9eb;
10 | ```
11 |
12 | ### Border Radii
13 |
14 | ```
15 | $border-radii: (
16 | 'default': 2px
17 | );
18 | ```
19 |
20 | ### Shadows
21 | ```
22 | $shadows: (
23 | 'default': 0 1px 8px rgba(0, 0, 0, 0.1),
24 | 'diffused': 0 2px 16px rgba(0, 0, 0, 0.1)
25 | );
26 | ```
27 |
28 | ## Classes
29 |
30 | | Identifiers | Keys (Defaults) |
31 | |-------------|-----------------|
32 | | `b`, `bt`, `br`, `bb`, `bl` | |
33 | | `shadow` | `diffused` |
34 | | `rounded` | |
35 |
--------------------------------------------------------------------------------
/modules/style/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | @include build-classes(
9 | (
10 | 'b': (border, $default-border-weight solid $default-border-color),
11 | 'bt': (border-top, $default-border-weight solid $default-border-color),
12 | 'br': (border-right, $default-border-weight solid $default-border-color),
13 | 'bb': (border-bottom, $default-border-weight solid $default-border-color),
14 | 'bl': (border-left, $default-border-weight solid $default-border-color),
15 | 'shadow': (box-shadow, $shadows),
16 | 'rounded': (border-radius, $border-radii)
17 | )
18 | );
19 |
--------------------------------------------------------------------------------
/modules/table/README.md:
--------------------------------------------------------------------------------
1 | # Table
2 |
3 | ## Classes
4 |
5 | | Keys |
6 | |------|
7 | | `inline-table` |
8 | | `table` |
9 | | `table-caption` |
10 | | `table-column-group` |
11 | | `table-row-group` |
12 | | `table-header-group` |
13 | | `table-footer-group` |
14 | | `table-cell` |
15 | | `table-row` |
16 |
--------------------------------------------------------------------------------
/modules/table/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | @include build-classes(
9 | (
10 | 'inline-table': (display, inline-table),
11 | 'table': (display, table),
12 | 'table-caption': (display, table-caption),
13 | 'table-column-group': (display, table-column-group),
14 | 'table-header-group': (display, table-header-group),
15 | 'table-footer-group': (display, table-footer-group),
16 | 'table-row-group': (display, table-row-group),
17 | 'table-cell': (display, table-cell),
18 | 'table-row': (display, table-row),
19 | ),
20 | $breakpoints
21 | );
22 |
--------------------------------------------------------------------------------
/modules/typography/README.md:
--------------------------------------------------------------------------------
1 | # Typography
2 |
3 | ## Configuration
4 |
5 | ### Type Scale
6 |
7 | ```
8 | $rem-base: 16px;
9 | $ratio: 1.5;
10 | ```
11 |
12 | ### Typesets
13 |
14 | ```
15 | $typesets: (
16 | default: (
17 | font-family: ('Simplon Norm', Arial, sans-serif),
18 | font-weight: 400,
19 | line-height-body: 1.6,
20 | line-height-heading: 1.2,
21 | text-transform: none,
22 | letter-spacing: 0
23 | ),
24 | display: (
25 | font-family: ('Cormorant Garamond', Georgia, serif),
26 | font-weight: 400,
27 | line-height: 1.2,
28 | text-transform: uppercase,
29 | letter-spacing: 0.1em
30 | ),
31 | monospace: (
32 | font-family: (Courier, monospace),
33 | font-weight: 400,
34 | line-height: 1.2,
35 | text-transform: none,
36 | letter-spacing: 0
37 | )
38 | );
39 | ```
40 |
41 | ### Weights
42 |
43 | ```
44 | $font-weights: (
45 | 'regular': 400,
46 | 'semibold': 500,
47 | 'bold': 700
48 | );
49 | ```
50 |
51 |
52 | ## Classes
53 |
54 | ### Typesets
55 |
56 | The `'default'` typeset is applied to the `body` by _default_. The `'monospace'` typeset is applied to `pre` and `code` by default, and is also accessible through the `.monospace` class.
57 |
58 | A class is created for each additional map in the `typesets` map:
59 |
60 | | Keys (Defaults) |
61 | |-----------------|
62 | | `display` |
63 |
64 |
65 | ### Size, Weight, and Alignment
66 |
67 | | Identifiers | Keys (Defaults) |
68 | |-------------|-----------------|
69 | | `t` | `1` - `10` |
70 | | `tw` | `regular`, `semibold`, `bold` |
71 | | `ta` | `left`, `center`, `right` |
72 | | `va` | `baseline`, `sub`, `super`, `text-top`, `text-bottom`, `top`, `bottom`, `middle` |
73 |
74 |
75 | ### Type Styles/Behavior
76 |
77 | | Keys |
78 | |------|
79 | | `line-through` |
80 | | `underline` |
81 | | `italic` |
82 | | `capitalize` |
83 | | `lowercase` |
84 | | `nowrap` |
85 |
86 |
87 | ### Aliasing
88 |
89 | | Keys |
90 | |------|
91 | | `antialiased` |
92 |
--------------------------------------------------------------------------------
/modules/typography/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import '../../util/index';
7 |
8 | @include build-classes(
9 | (
10 | 'tw': (font-weight, $font-weights),
11 | 'line-through': (text-decoration, line-through),
12 | 'underline': (text-decoration, underline),
13 | 'italic': (font-style, italic),
14 | 'uppercase': (text-transform, uppercase),
15 | 'capitalize': (text-transform, capitalize),
16 | 'lowercase': (text-transform, lowercase),
17 | 'nowrap': (white-space, nowrap),
18 | 'va': (vertical-align,
19 | (
20 | 'baseline': baseline,
21 | 'sub': sub,
22 | 'super': super,
23 | 'text-top': text-top,
24 | 'text-bottom': text-bottom,
25 | 'middle': middle,
26 | 'top': top,
27 | 'bottom': bottom
28 | )
29 | )
30 | )
31 | );
32 |
33 | // Responsive.
34 | @include build-classes(
35 | (
36 | 'ta': (text-align,
37 | (
38 | 'center': center,
39 | 'left': left,
40 | 'right': right
41 | )
42 | )
43 | ), $breakpoints);
44 |
45 | // Build the font scale.
46 | @include font-scale($ratio);
47 | @include typeset($typesets)
48 |
49 | // sass-lint:disable no-important
50 | body,
51 | html {
52 | font-size: $rem-base !important;
53 | }
54 | // sass-lint:enable no-important
55 |
56 | // sass-lint:disable no-vendor-prefixes
57 | .antialiased {
58 | -moz-osx-font-smoothing: grayscale;
59 | -webkit-font-smoothing: antialiased;
60 | }
61 | // sass-lint:enable no-vendor-prefixes
62 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "decent-scss",
3 | "version": "2.1.4",
4 | "description": "A functional CSS, f(css), framework for building anything on the web – works best with modular development",
5 | "scripts": {
6 | "start": "brunch watch --server",
7 | "build": "brunch build",
8 | "prepublish": "brunch build",
9 | "karma": "karma start",
10 | "mocha": "mocha test/decent",
11 | "test": "brunch build && npm run mocha && npm run karma"
12 | },
13 | "pre-push": [
14 | "test"
15 | ],
16 | "devDependencies": {
17 | "auto-reload-brunch": "^2.7.1",
18 | "brunch": "^2.10.9",
19 | "chai": "^3.5.0",
20 | "css-loader": "^0.28.0",
21 | "karma": "^1.6.0",
22 | "karma-browserify": "^5.1.1",
23 | "karma-chai": "^0.1.0",
24 | "karma-chai-plugins": "^0.9.0",
25 | "karma-chrome-launcher": "^2.0.0",
26 | "karma-cli": "^1.0.1",
27 | "karma-mocha": "^1.3.0",
28 | "karma-mocha-reporter": "^2.2.3",
29 | "karma-webpack": "^2.0.3",
30 | "mocha": "^3.2.0",
31 | "pre-push": "^0.1.1",
32 | "sass-brunch": "^2.10.4",
33 | "sass-lint-brunch": "^1.1.0",
34 | "style-loader": "^0.16.1",
35 | "stylelint-config-standard": "^6.0.0",
36 | "watchify": "^3.9.0",
37 | "webpack": "^2.4.1"
38 | },
39 | "contributors": [
40 | {
41 | "name": "Chris Griffith",
42 | "email": "chris@chrisgriffith.co",
43 | "url": "http://chrisgriffith.co"
44 | },
45 | {
46 | "name": "Sean Washington",
47 | "email": "hello@seanwash.com",
48 | "url": "http://seanwash.com"
49 | }
50 | ],
51 | "keywords": [
52 | "css",
53 | "scss",
54 | "functional",
55 | "utility",
56 | "oocss",
57 | "framework",
58 | "atomic"
59 | ],
60 | "repository": {
61 | "type": "git",
62 | "url": "https://github.com/decent-scss/decent"
63 | },
64 | "bugs": {
65 | "url": "https://github.com/decent-scss/decent/issues"
66 | },
67 | "license": {
68 | "type": "MIT",
69 | "url": "https://opensource.org/licenses/MIT"
70 | },
71 | "dependencies": {
72 | "assert": "^1.4.1",
73 | "cssstats": "^3.0.0",
74 | "fs": "0.0.1-security",
75 | "path": "^0.12.7"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/test/color.spec.js:
--------------------------------------------------------------------------------
1 | var addElement = require('./util/add-element')
2 |
3 | describe('color', () => {
4 | var div = addElement('div')
5 |
6 | it('should set primary text color', function () {
7 | div.className = 'c-primary'
8 | expect(div.computedStyle.color).to.equal('rgb(13, 13, 242)')
9 | })
10 |
11 | it('should set primary alt text color', function () {
12 | div.className = 'c-primary-alt'
13 | expect(div.computedStyle.color).to.equal('rgb(10, 10, 194)')
14 | })
15 |
16 | it('should set primary alt 2 text color', function () {
17 | div.className = 'c-primary-alt-2'
18 | expect(div.computedStyle.color).to.equal('rgb(8, 8, 145)')
19 | })
20 |
21 | it('should set success text color', function () {
22 | div.className = 'c-success'
23 | expect(div.computedStyle.color).to.equal('rgb(13, 242, 20)')
24 | })
25 |
26 | it('should set success alt text color', function () {
27 | div.className = 'c-success-alt'
28 | expect(div.computedStyle.color).to.equal('rgb(10, 194, 16)')
29 | })
30 |
31 | it('should set primary background color', function () {
32 | div.className = 'cbg-primary'
33 | expect(div.computedStyle.backgroundColor).to.equal('rgb(13, 13, 242)')
34 | })
35 |
36 | it('should set primary alt background color', function () {
37 | div.className = 'cbg-primary-alt'
38 | expect(div.computedStyle.backgroundColor).to.equal('rgb(10, 10, 194)')
39 | })
40 |
41 | it('should set primary alt 2 background color', function () {
42 | div.className = 'cbg-primary-alt-2'
43 | expect(div.computedStyle.backgroundColor).to.equal('rgb(8, 8, 145)')
44 | })
45 |
46 | it('should set success background color', function () {
47 | div.className = 'cbg-success'
48 | expect(div.computedStyle.backgroundColor).to.equal('rgb(13, 242, 20)')
49 | })
50 |
51 | it('should set success alt background color', function () {
52 | div.className = 'cbg-success-alt'
53 | expect(div.computedStyle.backgroundColor).to.equal('rgb(10, 194, 16)')
54 | })
55 |
56 | it('should set black text', function () {
57 | div.className = 'cg-black'
58 | expect(div.computedStyle.color).to.equal('rgb(3, 3, 3)')
59 | })
60 |
61 | it('should set white text', function () {
62 | div.className = 'cg-white'
63 | expect(div.computedStyle.color).to.equal('rgb(252, 252, 252)')
64 | })
65 |
66 | it('should set text greys', function () {
67 | div.className = 'cg-5'
68 | expect(div.computedStyle.color).to.equal('rgb(125, 125, 130)')
69 | })
70 |
71 | it('should set black background', function () {
72 | div.className = 'cbgg-black'
73 | expect(div.computedStyle.backgroundColor).to.equal('rgb(3, 3, 3)')
74 | })
75 |
76 | it('should set white background', function () {
77 | div.className = 'cbgg-white'
78 | expect(div.computedStyle.backgroundColor).to.equal('rgb(252, 252, 252)')
79 | })
80 |
81 | it('should set background greys', function () {
82 | div.className = 'cbgg-5'
83 | expect(div.computedStyle.backgroundColor).to.equal('rgb(125, 125, 130)')
84 | })
85 |
86 | })
87 |
88 | // Sources:
89 | // 1. Basscss (https://github.com/basscss/basscss/blob/master/test/test.js)
90 |
--------------------------------------------------------------------------------
/test/decent.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs')
2 | var path = require('path')
3 | var assert = require('assert')
4 | var cssstats = require('cssstats')
5 |
6 | var src = fs.readFileSync(path.join(__dirname, '../dist/decent.css'), 'utf8')
7 | var stats
8 |
9 | describe('decent', function () {
10 |
11 | it('should be css', function () {
12 | assert.doesNotThrow(function() {
13 | stats = cssstats(src, { safe: false })
14 | })
15 | })
16 |
17 | it('should have rules', function() {
18 | assert(stats.rules.total > 0)
19 | })
20 |
21 | it('should have rules', function() {
22 | assert(stats.rules.total > 0)
23 | })
24 |
25 | it('should have declarations', function() {
26 | assert(stats.declarations.total > 0)
27 | })
28 |
29 | it('should have properties', function() {
30 | assert(Object.keys(stats.declarations.properties).length > 0)
31 | })
32 |
33 | })
34 |
35 | // Sources:
36 | // 1. Basscss (https://github.com/basscss/basscss/blob/master/test/test.js)
37 |
--------------------------------------------------------------------------------
/test/display.spec.js:
--------------------------------------------------------------------------------
1 | var addElement = require('./util/add-element')
2 |
3 | describe('display', () => {
4 | var div = addElement('div')
5 |
6 | it('should set display block', function () {
7 | div.className = 'block'
8 | expect(div.computedStyle.display).to.equal('block')
9 | })
10 |
11 | it('should set display inline', function () {
12 | div.className = 'inline'
13 | expect(div.computedStyle.display).to.equal('inline')
14 | })
15 |
16 | it('should set display inline-block', function () {
17 | div.className = 'inline-block'
18 | expect(div.computedStyle.display).to.equal('inline-block')
19 | })
20 |
21 | it('should set overflow auto', function () {
22 | div.className = 'o-auto'
23 | expect(div.computedStyle.overflow).to.equal('auto')
24 | })
25 |
26 | it('should set overflow visible', function () {
27 | div.className = 'o-visible'
28 | expect(div.computedStyle.overflow).to.equal('visible')
29 | })
30 |
31 | it('should set overflow hidden', function () {
32 | div.className = 'o-hidden'
33 | expect(div.computedStyle.overflow).to.equal('hidden')
34 | })
35 |
36 | })
37 |
38 | // Sources:
39 | // 1. Basscss (https://github.com/basscss/basscss/blob/master/test/test.js)
40 |
--------------------------------------------------------------------------------
/test/flexbox.spec.js:
--------------------------------------------------------------------------------
1 | var addElement = require('./util/add-element')
2 |
3 | describe('flexbox', () => {
4 | var div = addElement('div')
5 |
6 | it('should set display flex', function () {
7 | div.className = 'flex'
8 | expect(div.computedStyle.display).to.equal('flex')
9 | })
10 |
11 | it('should set display inline-flex', function () {
12 | div.className = 'inline-flex'
13 | expect(div.computedStyle.display).to.equal('inline-flex')
14 | })
15 |
16 | it('should set flex direction column', function () {
17 | div.className = 'flex-column'
18 | expect(div.computedStyle.flexDirection).to.equal('column')
19 | })
20 |
21 | it('should set flex direction column reverse', function () {
22 | div.className = 'flex-column-reverse'
23 | expect(div.computedStyle.flexDirection).to.equal('column-reverse')
24 | })
25 |
26 | it('should set flex direction row', function () {
27 | div.className = 'flex-row'
28 | expect(div.computedStyle.flexDirection).to.equal('row')
29 | })
30 |
31 | it('should set flex direction row reverse', function () {
32 | div.className = 'flex-row-reverse'
33 | expect(div.computedStyle.flexDirection).to.equal('row-reverse')
34 | })
35 |
36 | it('should set flex wrap', function () {
37 | div.className = 'flex-wrap'
38 | expect(div.computedStyle.flexWrap).to.equal('wrap')
39 | })
40 |
41 | it('should set flex nowrap', function () {
42 | div.className = 'flex-nowrap'
43 | expect(div.computedStyle.flexWrap).to.equal('nowrap')
44 | })
45 |
46 | it('should set flex grow', function () {
47 | div.className = 'flex-grow'
48 | expect(div.computedStyle.flexGrow).to.equal('1')
49 | })
50 |
51 | it('should set flex grow 0', function () {
52 | div.className = 'flex-grow-0'
53 | expect(div.computedStyle.flexGrow).to.equal('0')
54 | })
55 |
56 | it('should set flex grow 1', function () {
57 | div.className = 'flex-grow-1'
58 | expect(div.computedStyle.flexGrow).to.equal('1')
59 | })
60 |
61 | it('should set flex grow 2', function () {
62 | div.className = 'flex-grow-2'
63 | expect(div.computedStyle.flexGrow).to.equal('2')
64 | })
65 |
66 | it('should set flex grow 3', function () {
67 | div.className = 'flex-grow-3'
68 | expect(div.computedStyle.flexGrow).to.equal('3')
69 | })
70 |
71 | it('should set flex shrink', function () {
72 | div.className = 'flex-shrink'
73 | expect(div.computedStyle.flexShrink).to.equal('1')
74 | })
75 |
76 | it('should set flex shrink 0', function () {
77 | div.className = 'flex-shrink-0'
78 | expect(div.computedStyle.flexShrink).to.equal('0')
79 | })
80 |
81 | it('should set flex shrink 1', function () {
82 | div.className = 'flex-shrink-1'
83 | expect(div.computedStyle.flexShrink).to.equal('1')
84 | })
85 |
86 | it('should set flex shrink 2', function () {
87 | div.className = 'flex-shrink-2'
88 | expect(div.computedStyle.flexShrink).to.equal('2')
89 | })
90 |
91 | it('should set flex shrink 3', function () {
92 | div.className = 'flex-shrink-3'
93 | expect(div.computedStyle.flexShrink).to.equal('3')
94 | })
95 |
96 | it('should set align-items flex-start', function () {
97 | div.className = 'items-start'
98 | expect(div.computedStyle.alignItems).to.equal('flex-start')
99 | })
100 |
101 | it('should set align-items flex-end', function () {
102 | div.className = 'items-end'
103 | expect(div.computedStyle.alignItems).to.equal('flex-end')
104 | })
105 |
106 | it('should set align-items center', function () {
107 | div.className = 'items-center'
108 | expect(div.computedStyle.alignItems).to.equal('center')
109 | })
110 |
111 | it('should set align-items baseline', function () {
112 | div.className = 'items-baseline'
113 | expect(div.computedStyle.alignItems).to.equal('baseline')
114 | })
115 |
116 | it('should set align-items stretch', function () {
117 | div.className = 'items-stretch'
118 | expect(div.computedStyle.alignItems).to.equal('stretch')
119 | })
120 |
121 | it('should set justify-content flex-start', function () {
122 | div.className = 'justify-start'
123 | expect(div.computedStyle.justifyContent).to.equal('flex-start')
124 | })
125 |
126 | it('should set justify-content flex-end', function () {
127 | div.className = 'justify-end'
128 | expect(div.computedStyle.justifyContent).to.equal('flex-end')
129 | })
130 |
131 | it('should set justify-content center', function () {
132 | div.className = 'justify-center'
133 | expect(div.computedStyle.justifyContent).to.equal('center')
134 | })
135 |
136 | it('should set justify-content space-between', function () {
137 | div.className = 'justify-between'
138 | expect(div.computedStyle.justifyContent).to.equal('space-between')
139 | })
140 |
141 | it('should set justify-content space-around', function () {
142 | div.className = 'justify-around'
143 | expect(div.computedStyle.justifyContent).to.equal('space-around')
144 | })
145 |
146 | it('should set align-self flex-start', function () {
147 | div.className = 'self-start'
148 | expect(div.computedStyle.alignSelf).to.equal('flex-start')
149 | })
150 |
151 | it('should set align-self flex-end', function () {
152 | div.className = 'self-end'
153 | expect(div.computedStyle.alignSelf).to.equal('flex-end')
154 | })
155 |
156 | it('should set align-self center', function () {
157 | div.className = 'self-center'
158 | expect(div.computedStyle.alignSelf).to.equal('center')
159 | })
160 |
161 | it('should set align-self baseline', function () {
162 | div.className = 'self-baseline'
163 | expect(div.computedStyle.alignSelf).to.equal('baseline')
164 | })
165 |
166 | it('should set align-self stretch', function () {
167 | div.className = 'self-stretch'
168 | expect(div.computedStyle.alignSelf).to.equal('stretch')
169 | })
170 |
171 | it('should set align-content flex-start', function () {
172 | div.className = 'content-start'
173 | expect(div.computedStyle.alignContent).to.equal('flex-start')
174 | })
175 |
176 | it('should set align-content flex-end', function () {
177 | div.className = 'content-end'
178 | expect(div.computedStyle.alignContent).to.equal('flex-end')
179 | })
180 |
181 | it('should set align-content center', function () {
182 | div.className = 'content-center'
183 | expect(div.computedStyle.alignContent).to.equal('center')
184 | })
185 |
186 | it('should set align-content space-between', function () {
187 | div.className = 'content-between'
188 | expect(div.computedStyle.alignContent).to.equal('space-between')
189 | })
190 |
191 | it('should set align-content space-around', function () {
192 | div.className = 'content-around'
193 | expect(div.computedStyle.alignContent).to.equal('space-around')
194 | })
195 |
196 | it('should set align-content space-around', function () {
197 | div.className = 'content-around'
198 | expect(div.computedStyle.alignContent).to.equal('space-around')
199 | })
200 |
201 | it('should set order 0', function () {
202 | div.className = 'flex-order-0'
203 | expect(div.computedStyle.order).to.equal('0')
204 | })
205 |
206 | it('should set order 1', function () {
207 | div.className = 'flex-order-1'
208 | expect(div.computedStyle.order).to.equal('1')
209 | })
210 |
211 | it('should set order 2', function () {
212 | div.className = 'flex-order-2'
213 | expect(div.computedStyle.order).to.equal('2')
214 | })
215 |
216 | it('should set order 3', function () {
217 | div.className = 'flex-order-3'
218 | expect(div.computedStyle.order).to.equal('3')
219 | })
220 |
221 | it('should set order 4', function () {
222 | div.className = 'flex-order-4'
223 | expect(div.computedStyle.order).to.equal('4')
224 | })
225 |
226 | })
227 |
228 | // Sources:
229 | // 1. Basscss (https://github.com/basscss/basscss/blob/master/test/test.js)
230 |
--------------------------------------------------------------------------------
/test/float.spec.js:
--------------------------------------------------------------------------------
1 | var addElement = require('./util/add-element')
2 |
3 | describe('float', () => {
4 | var div = addElement('div')
5 |
6 | it('should set float left', function () {
7 | div.className = 'f-left'
8 | expect(div.computedStyle.float).to.equal('left')
9 | })
10 |
11 | it('should set float right', function () {
12 | div.className = 'f-right'
13 | expect(div.computedStyle.float).to.equal('right')
14 | })
15 |
16 | it('should set float none', function () {
17 | div.className = 'f-none'
18 | expect(div.computedStyle.float).to.equal('none')
19 | })
20 |
21 | })
22 |
23 | // Sources:
24 | // 1. Basscss (https://github.com/basscss/basscss/blob/master/test/test.js)
25 |
--------------------------------------------------------------------------------
/test/grid.spec.js:
--------------------------------------------------------------------------------
1 | var addElement = require('./util/add-element')
2 |
3 | describe('grid', () => {
4 | var div = addElement('div')
5 |
6 | it('should create a container class', function () {
7 | div.className = 'container'
8 | expect(div.computedStyle.maxWidth).to.exist
9 | })
10 |
11 | it('should set a col width', function () {
12 | div.className = 'col-1'
13 | expect(div.computedStyle.width).to.exist
14 | })
15 |
16 | })
17 |
18 | // Sources:
19 | // 1. Basscss (https://github.com/basscss/basscss/blob/master/test/test.js)
20 |
--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
1 | var context = require.context('.', true, /.+\.spec\.js$/)
2 | context.keys().forEach(context)
3 | module.exports = context
4 |
5 | // Sources:
6 | // 1. Basscss (https://github.com/basscss/basscss/blob/master/test/test.js)
7 |
--------------------------------------------------------------------------------
/test/length.spec.js:
--------------------------------------------------------------------------------
1 | var addElement = require('./util/add-element')
2 |
3 | describe('length', () => {
4 | var div = addElement('div')
5 |
6 | it('should set a fixed width', function () {
7 | div.className = 'w-5'
8 | expect(div.computedStyle.width).to.equal(16*5 + 'px')
9 | })
10 |
11 | it('should set a fixed min width', function () {
12 | div.className = 'minw-5'
13 | expect(div.computedStyle.minWidth).to.equal(16*5 + 'px')
14 | })
15 |
16 | it('should set a fixed max width', function () {
17 | div.className = 'maxw-5'
18 | expect(div.computedStyle.maxWidth).to.equal(16*5 + 'px')
19 | })
20 |
21 | it('should set a percentage width', function () {
22 | div.className = 'wp-50'
23 | expect(div.computedStyle.width).to.equal(window.innerWidth/2 + 'px')
24 | })
25 |
26 | it('should set a percentage min width', function () {
27 | div.className = 'minwp-50'
28 | expect(div.computedStyle.minWidth).to.equal('50%')
29 | })
30 |
31 | it('should set a percentage max width', function () {
32 | div.className = 'maxwp-50'
33 | expect(div.computedStyle.maxWidth).to.equal('50%')
34 | })
35 |
36 | it('should set a fixed height', function () {
37 | div.className = 'h-5'
38 | expect(div.computedStyle.height).to.equal(16*5 + 'px')
39 | })
40 |
41 | it('should set a fixed min height', function () {
42 | div.className = 'minh-5'
43 | expect(div.computedStyle.minHeight).to.equal(16*5 + 'px')
44 | })
45 |
46 | it('should set a fixed max height', function () {
47 | div.className = 'maxh-5'
48 | expect(div.computedStyle.maxHeight).to.equal(16*5 + 'px')
49 | })
50 |
51 | it('should set a percentage height', function () {
52 | div.parentElement.style.height = '500px'
53 | div.className = 'hp-50'
54 | expect(div.computedStyle.height).to.equal('250px')
55 | })
56 |
57 | it('should set a percentage min height', function () {
58 | div.className = 'minhp-50'
59 | expect(div.computedStyle.minHeight).to.equal('50%')
60 | })
61 |
62 | it('should set a percentage max height', function () {
63 | div.className = 'maxhp-50'
64 | expect(div.computedStyle.maxHeight).to.equal('50%')
65 | })
66 |
67 |
68 | })
69 |
--------------------------------------------------------------------------------
/test/position.spec.js:
--------------------------------------------------------------------------------
1 | var addElement = require('./util/add-element')
2 |
3 | describe('position', () => {
4 | var div = addElement('div')
5 |
6 | it('should set relative position', function () {
7 | div.className = 'relative'
8 | expect(div.computedStyle.position).to.equal('relative')
9 | })
10 |
11 | it('should set absolute position', function () {
12 | div.className = 'absolute'
13 | expect(div.computedStyle.position).to.equal('absolute')
14 | })
15 |
16 | it('should set fixed position', function () {
17 | div.className = 'fixed'
18 | expect(div.computedStyle.position).to.equal('fixed')
19 | })
20 |
21 | it('should set top position', function () {
22 | div.className = 'absolute top-0'
23 | expect(div.computedStyle.top).to.equal('0px')
24 | })
25 |
26 | it('should set right position', function () {
27 | div.className = 'absolute right-50'
28 | expect(div.computedStyle.right).to.equal(window.innerWidth/2 + 'px')
29 | })
30 |
31 | it('should set bottom position', function () {
32 | div.className = 'absolute bottom-0'
33 | expect(div.computedStyle.bottom).to.equal('0px')
34 | })
35 |
36 | it('should set left position', function () {
37 | div.className = 'absolute left-100'
38 | expect(div.computedStyle.left).to.equal(window.innerWidth + 'px')
39 | })
40 |
41 | it('should set a negative z-index', function () {
42 | div.className = 'relative zn-1'
43 | expect(div.computedStyle.zIndex).to.equal('-1')
44 | })
45 |
46 | it('should set a position z-index', function () {
47 | div.className = 'relative z-1'
48 | expect(div.computedStyle.zIndex).to.equal('10')
49 | })
50 |
51 | })
52 |
53 | // Sources:
54 | // 1. Basscss (https://github.com/basscss/basscss/blob/master/test/test.js)
55 |
--------------------------------------------------------------------------------
/test/util/add-element.js:
--------------------------------------------------------------------------------
1 | var addElement = function (el, parent) {
2 | var $el = document.createElement(el)
3 | parent = parent || document.body
4 | parent.appendChild($el)
5 | $el.computedStyle = window.getComputedStyle($el)
6 | return $el
7 | }
8 |
9 | module.exports = addElement
10 |
11 | // Sources:
12 | // 1. Basscss (https://github.com/basscss/basscss/blob/master/test/test.js)
13 |
--------------------------------------------------------------------------------
/util/_defaults.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | // REM Base
7 | $rem-base: 16px !default;
8 |
9 | // Font Scale Ratio
10 | $ratio: 1.5 !default;
11 |
12 | // Reset Inputs
13 | $reset-inputs: true !default;
14 |
15 | // Border Box Everything
16 | $border-box: true !default;
17 |
18 | // Breakpoints
19 | $breakpoints: (
20 | sm: 600px,
21 | md: 768px,
22 | lg: 1280px,
23 | xl: 1440px
24 | ) !default;
25 |
26 | // Font Weights
27 | $font-weights: (
28 | 'regular': 400,
29 | 'semibold': 500,
30 | 'bold': 700
31 | ) !default;
32 |
33 | // Typesets
34 | $typesets: (
35 | default: (
36 | font-family: ('Proxima Nova', Arial, sans-serif),
37 | font-weight: 400,
38 | line-height-body: 1.6,
39 | line-height-heading: 1.2,
40 | text-transform: none,
41 | letter-spacing: 0
42 | ),
43 | display: (
44 | font-family: ('Cormorant Garamond', Georgia, serif),
45 | font-weight: 400,
46 | line-height: 1.2,
47 | text-transform: uppercase,
48 | letter-spacing: 0.1em
49 | ),
50 | monospace: (
51 | font-family: (Courier, monospace),
52 | font-weight: 400,
53 | line-height: 1.2,
54 | text-transform: none,
55 | letter-spacing: 0
56 | )
57 | ) !default;
58 |
59 | // Grid Settings
60 | $container-width: 80rem !default;
61 | $columns: 12 !default;
62 |
63 | // Colorsets
64 | $colorsets: (
65 | 'primary': (
66 | 'default': hsl(240, 90, 50),
67 | 'alt': hsl(240, 90, 40),
68 | 'alt-2': hsl(240, 90, 30)
69 | ),
70 | 'secondary': (
71 | 'default': hsl(27, 100, 53),
72 | 'alt': hsl(27, 100, 43)
73 | ),
74 | 'success': (
75 | 'default': hsl(122, 90, 50),
76 | 'alt': hsl(122, 90, 40),
77 | 'alt-2': hsl(122, 90, 30)
78 | ),
79 | 'error': (
80 | 'default': hsl(0, 90, 50),
81 | 'alt': hsl(0, 90, 40),
82 | 'alt-2': hsl(0, 90, 30)
83 | )
84 | ) !default;
85 |
86 | // Greyscale
87 | $greyscale: (
88 | 'black': hsl(240, 1, 1),
89 | '1': hsl(240, 4, 10),
90 | '2': hsl(240, 3, 24),
91 | '3': hsl(240, 3, 30),
92 | '4': hsl(240, 2, 40),
93 | '5': hsl(240, 2, 50),
94 | '6': hsl(240, 2, 84),
95 | '7': hsl(240, 1, 92),
96 | '8': hsl(240, 1, 96),
97 | 'white': hsl(240, 0, 99)
98 | ) !default;
99 |
100 | // Modular Scale
101 | $modular-scale: (
102 | '0': 0,
103 | '1': 0.5rem,
104 | '2': 1rem,
105 | '3': 1.75rem,
106 | '4': 3rem,
107 | '5': 5rem,
108 | '6': 9rem,
109 | '7': 16rem,
110 | '8': 28rem,
111 | '9': 48rem,
112 | '10': 72rem
113 | ) !default;
114 |
115 | // Percentage Scale
116 | $percentage-scale: (
117 | '0': 0,
118 | '10': 10%,
119 | '20': 20%,
120 | '30': 30%,
121 | '40': 40%,
122 | '50': 50%,
123 | '60': 60%,
124 | '70': 70%,
125 | '80': 80%,
126 | '90': 90%,
127 | '100': 100%,
128 | ) !default;
129 |
130 | // z-index
131 | $z-scale: (
132 | '5': 1000,
133 | '4': 900,
134 | '3': 500,
135 | '2': 100,
136 | '1': 10,
137 | '0': 0
138 | ) !default;
139 |
140 | // Interaction & Animation
141 | $default-transition: all 0.17s ease-in !default;
142 | $interactions: null !default;
143 |
144 | // Available Ratios
145 | $ratios: (
146 | 1_1: 1/1,
147 | 1_2: 2/1,
148 | 4_3: 3/4,
149 | 5_3: 3/5,
150 | 16_9: 9/16,
151 | 21_9: 9/21,
152 | 36_9: 9/36,
153 | iphone7: 1334/750,
154 | macbookpro15: 1800/2880
155 | ) !default;
156 |
157 | // Borders
158 | $default-border-weight: 1px !default;
159 | $default-border-color: #e8e9eb !default;
160 |
161 | $border-radii: (
162 | 'default': 2px
163 | ) !default;
164 |
165 |
166 | // Shadows
167 | $shadows: (
168 | 'default': 0 1px 8px rgba(0, 0, 0, 0.1),
169 | 'diffused': 0 2px 16px rgba(0, 0, 0, 0.1)
170 | ) !default;
171 |
172 | // Overlay
173 | $overlays: (
174 | 'default': rgba(#000, 0.8)
175 | ) !default;
176 |
--------------------------------------------------------------------------------
/util/_interactions.example.scss:
--------------------------------------------------------------------------------
1 | $interactions: (
2 |
3 | scaleUp: (
4 | settings: (
5 | ),
6 | start: (
7 | transform: translate3d(0,0,0) scale(1)
8 | ),
9 | end: (
10 | transform: translate3d(0,0,0) scale(1.025)
11 | )
12 | ),
13 |
14 | fadeIn: (
15 | start: (
16 | opacity: 0
17 | ),
18 | end: (
19 | opacity: 1
20 | )
21 | )
22 |
23 | );
24 |
--------------------------------------------------------------------------------
/util/_mixins.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @mixin print-styles($declaration, $value) {
7 | @if type-of($declaration) == 'list' {
8 | @each $dec in $declaration {
9 | #{$dec}: $value;
10 | }
11 | }
12 | @else {
13 | #{$declaration}: $value
14 | }
15 | }
16 |
17 | @mixin parse-class-map($classes, $bp: null, $negative: false) {
18 | @each $class, $settings in $classes {
19 | $classname: '';
20 |
21 | @if $bp {
22 | $classname: #{$bp}-#{$class};
23 | }
24 | @else {
25 | $classname: $class;
26 | }
27 |
28 | @if type-of(nth($settings, 2)) == 'map' {
29 | @each $key, $value in nth($settings, 2) {
30 |
31 | @if $negative {
32 | $value: -$value;
33 | }
34 |
35 | @if $key != 'default' {
36 | .#{$classname}-#{$key} {
37 | @include print-styles(nth($settings, 1), $value)
38 | }
39 | }
40 | @else {
41 | .#{$classname} {
42 | @include print-styles(nth($settings, 1), $value)
43 | }
44 | }
45 | }
46 | }
47 | @else {
48 | .#{$classname} {
49 | @include print-styles(nth($settings, 1), nth($settings, 2))
50 | }
51 | }
52 | }
53 | }
54 |
55 | @mixin build-classes($classes, $breakpoints: null, $negative: false) {
56 | @include parse-class-map($classes, null, $negative);
57 |
58 | @if $breakpoints {
59 | @for $i from 1 to length($breakpoints)+1 {
60 | $key: nth(map-keys($breakpoints), $i);
61 |
62 | @media (min-width: map-get($breakpoints, $key)) {
63 | @include parse-class-map($classes, $key, $negative);
64 | }
65 | }
66 | }
67 | }
68 |
69 | @mixin build-colors($colors) {
70 | @each $key, $shades in $colors {
71 | @each $shade, $value in $shades {
72 | $class: '';
73 |
74 | @if $shade == 'default' {
75 | $class: #{$key};
76 | }
77 | @else {
78 | $class: #{$key}-#{$shade};
79 | }
80 |
81 | .c-#{$class} {
82 | color: $value;
83 | }
84 |
85 | .cbg-#{$class} {
86 | background-color: $value;
87 | }
88 | }
89 | }
90 | };
91 |
92 | @mixin build-greyscale($greyscale) {
93 | @each $key, $value in $greyscale {
94 | .cg-#{$key} {
95 | color: $value;
96 | }
97 | .cbgg-#{$key} {
98 | background-color: $value;
99 | }
100 | }
101 | }
102 |
103 | @mixin interaction($interaction, $contexts, $state) {
104 | &[class*='#{$interaction}'] {
105 | @each $context, $styles in $contexts {
106 | @if $context == 'settings' {
107 | @include print-styles($styles);
108 | }
109 |
110 | @if $context == 'start' {
111 | &[class*='actor'],
112 | [class*='#{$interaction}-actor'] {
113 | @include print-styles($styles);
114 | transition: $default-transition;
115 | }
116 | }
117 |
118 | @if $context == 'end' {
119 | &[class*='actor']:#{$state},
120 | &:hover [class*='#{$interaction}-actor'] {
121 | @include print-styles($styles);
122 | }
123 | }
124 | }
125 | }
126 | }
127 |
128 | @mixin typeset($sets) {
129 | @each $set, $settings in $sets {
130 | @if $set == 'default' {
131 | body,
132 | input,
133 | textarea,
134 | button {
135 | font-family: map-get($settings, 'font-family');
136 | font-weight: map-get($settings, 'font-weight');
137 | text-transform: map-get($settings, 'text-transform');
138 | line-height: map-get($settings, 'line-height-body');
139 | }
140 |
141 | h1,
142 | h2,
143 | h3,
144 | h4,
145 | h5,
146 | h6 {
147 | line-height: map-get($settings, 'line-height-heading');
148 | }
149 |
150 | p {
151 | line-height: map-get($settings, 'line-height-body');
152 | font-weight: map-get($settings, 'font-weight')
153 | }
154 |
155 | ol,
156 | li,
157 | blockquote { line-height: map-get($settings, 'line-height-body') }
158 | }
159 | @elseif $set == 'monospace' {
160 | pre,
161 | code,
162 | .#{$set} {
163 | @each $setting, $value in $settings {
164 | #{$setting}: $value;
165 | }
166 | }
167 | }
168 | @else {
169 | .#{$set} {
170 | @each $setting, $value in $settings {
171 | #{$setting}: $value;
172 | }
173 | }
174 | }
175 | }
176 | }
177 |
178 | @mixin font-scale($ratio) {
179 | // Calculate the font sizes by scale.
180 | @for $i from -3 to 14 {
181 | $value: $ratio;
182 |
183 | @if $i == 0 {
184 | .t-#{$i} { font-size: 1rem; }
185 |
186 | @each $abbr, $breakpoint in $breakpoints {
187 | .#{$abbr}-t-#{$i} {
188 | @media (min-width: $breakpoint) { font-size: 1rem; }
189 | }
190 | }
191 | }
192 |
193 | @if $i < 0 {
194 | @for $n from -1 to -1*($i) {
195 | $value: $value/$ratio;
196 | }
197 |
198 | $rem-value: $value + rem;
199 |
200 | .tn-#{$i*-1} { font-size: $rem-value; }
201 |
202 | @each $abbr, $breakpoint in $breakpoints {
203 | .#{$abbr}-tn-#{$i*-1} {
204 | @media (min-width: $breakpoint) { font-size: $rem-value; }
205 | }
206 | }
207 | }
208 |
209 | @if $i > 0 {
210 | @for $n from 1 to $i {
211 | $value: $value * $ratio;
212 | }
213 |
214 | $rem-value: $value + rem;
215 |
216 | .t-#{$i} { font-size: $rem-value; }
217 |
218 | @each $abbr, $breakpoint in $breakpoints {
219 | .#{$abbr}-t-#{$i} {
220 | @media (min-width: $breakpoint) { font-size: $rem-value; }
221 | }
222 | }
223 | }
224 | }
225 | }
226 |
--------------------------------------------------------------------------------
/util/index.scss:
--------------------------------------------------------------------------------
1 | // -
2 | // Decent
3 | // https://github.com/decent-css/decent
4 | // ----------------------------------------------------------------------------
5 |
6 | @import 'defaults';
7 | @import 'mixins';
8 |
--------------------------------------------------------------------------------