├── .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 | [![npm version](https://badge.fury.io/js/decent-scss.svg)](https://badge.fury.io/js/decent-scss) 4 | [![CircleCI Status](https://circleci.com/gh/decent-css/decent.png?circle-token=0dcc6cc41b64bbf3be8abff6ae9d00823dcf2955&style=shield)](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 | ![.cbg-primary-alt](/assets/images/naming-diagram--color@2x.png) 252 | 253 | 254 | #### Example — Margin 255 | 256 | ``` 257 | $modular-scale: ( 258 | '1': 0.5rem 259 | ); 260 | ``` 261 | 262 | ![.md-pt-1](/assets/images/naming-diagram--margin@2x.png) 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 | --------------------------------------------------------------------------------