├── .github ├── funding.yml ├── issue_template.md ├── pull_request_template.md └── contributing.md ├── dist ├── _Image.styl ├── _Divider.styl ├── _Link.styl ├── _Color.styl ├── _Blockquote.styl ├── _List.styl ├── _Spacing.styl ├── _Utility.styl ├── _Code.styl ├── _Table.styl ├── milligram.styl ├── _Base.styl ├── _Typography.styl ├── _Button.styl ├── _Form.styl └── _Grid.styl ├── src ├── _Image.styl ├── _Divider.styl ├── _Link.styl ├── _Color.styl ├── _Blockquote.styl ├── _List.styl ├── _Spacing.styl ├── _Utility.styl ├── milligram.styl ├── _Code.styl ├── _Table.styl ├── _Base.styl ├── _Typography.styl ├── _Button.styl ├── _Form.styl └── _Grid.styl ├── .travis.yml ├── .npmignore ├── .gitignore ├── changelog.md ├── .prettierignore ├── package.js ├── .appveyor.yml ├── bower.json ├── composer.json ├── license ├── .styluslintrc ├── package.json ├── readme.md ├── test ├── milligram.min.css ├── milligram.min.css.map ├── milligram.css └── milligram.css.map └── example.html /.github/funding.yml: -------------------------------------------------------------------------------- 1 | open_collective: milligram 2 | patreon: cjpatoilo 3 | -------------------------------------------------------------------------------- /dist/_Image.styl: -------------------------------------------------------------------------------- 1 | 2 | // Image 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | img 6 | max-width: 100% 7 | -------------------------------------------------------------------------------- /src/_Image.styl: -------------------------------------------------------------------------------- 1 | 2 | // Image 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | img 6 | max-width: 100% 7 | -------------------------------------------------------------------------------- /dist/_Divider.styl: -------------------------------------------------------------------------------- 1 | 2 | // Divider 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | hr 6 | border: 0 7 | border-top: .1rem solid color-tertiary 8 | margin: 3.0rem 0 9 | -------------------------------------------------------------------------------- /src/_Divider.styl: -------------------------------------------------------------------------------- 1 | 2 | // Divider 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | hr 6 | border: 0 7 | border-top: .1rem solid color-tertiary 8 | margin: 3.0rem 0 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 12 4 | before_install: 5 | - npm i -g npm@latest 6 | cache: 7 | directories: 8 | - node_modules 9 | before_script: 10 | - npm run lint 11 | -------------------------------------------------------------------------------- /dist/_Link.styl: -------------------------------------------------------------------------------- 1 | 2 | // Link 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | a 6 | color: color-primary 7 | text-decoration: none 8 | 9 | &:focus, 10 | &:hover 11 | color: color-secondary 12 | -------------------------------------------------------------------------------- /src/_Link.styl: -------------------------------------------------------------------------------- 1 | 2 | // Link 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | a 6 | color: color-primary 7 | text-decoration: none 8 | 9 | &:focus, 10 | &:hover 11 | color: color-secondary 12 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .appveyor.yml 2 | .github 3 | .gitignore 4 | .npmignore 5 | .prettierignore 6 | .styluslintrc 7 | .travis.yml 8 | bower.json 9 | changelog.md 10 | composer.json 11 | package-lock.json 12 | package.js 13 | package.json 14 | test 15 | -------------------------------------------------------------------------------- /dist/_Color.styl: -------------------------------------------------------------------------------- 1 | 2 | // Color 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | color-initial ?= #fff 6 | color-primary ?= #9b4dca 7 | color-secondary ?= #606c76 8 | color-tertiary ?= #f4f5f6 9 | color-quaternary ?= #d1d1d1 10 | color-quinary ?= #e1e1e1 11 | -------------------------------------------------------------------------------- /src/_Color.styl: -------------------------------------------------------------------------------- 1 | 2 | // Color 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | color-initial ?= #fff 6 | color-primary ?= #9b4dca 7 | color-secondary ?= #606c76 8 | color-tertiary ?= #f4f5f6 9 | color-quaternary ?= #d1d1d1 10 | color-quinary ?= #e1e1e1 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | bower_components 5 | node_modules 6 | 7 | # testing 8 | .nyc_output 9 | coverage 10 | 11 | # production 12 | # build 13 | # dist 14 | 15 | # debug 16 | *.log 17 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | **Milligram** uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs. 4 | 5 | See our [releases](https://github.com/milligram/milligram/releases) to accompany at the improvements for each version of **Milligram**. 6 | -------------------------------------------------------------------------------- /dist/_Blockquote.styl: -------------------------------------------------------------------------------- 1 | 2 | // Blockquote 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | blockquote 6 | border-left: .3rem solid color-quaternary 7 | margin-left: 0 8 | margin-right: 0 9 | padding: 1rem 1.5rem 10 | 11 | *:last-child 12 | margin-bottom: 0 13 | -------------------------------------------------------------------------------- /src/_Blockquote.styl: -------------------------------------------------------------------------------- 1 | 2 | // Blockquote 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | blockquote 6 | border-left: .3rem solid color-quaternary 7 | margin-left: 0 8 | margin-right: 0 9 | padding: 1rem 1.5rem 10 | 11 | *:last-child 12 | margin-bottom: 0 13 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | bower_components 5 | node_modules 6 | 7 | # testing 8 | .nyc_output 9 | coverage 10 | test 11 | 12 | # production 13 | # build 14 | # dist 15 | 16 | # debug 17 | *.log 18 | -------------------------------------------------------------------------------- /dist/_List.styl: -------------------------------------------------------------------------------- 1 | 2 | // List 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | dl, 6 | ol, 7 | ul 8 | list-style: none 9 | margin-top: 0 10 | padding-left: 0 11 | 12 | dl, 13 | ol, 14 | ul 15 | font-size: 90% 16 | margin: 1.5rem 0 1.5rem 3.0rem 17 | 18 | ol 19 | list-style: decimal inside 20 | 21 | ul 22 | list-style: circle inside 23 | -------------------------------------------------------------------------------- /src/_List.styl: -------------------------------------------------------------------------------- 1 | 2 | // List 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | dl, 6 | ol, 7 | ul 8 | list-style: none 9 | margin-top: 0 10 | padding-left: 0 11 | 12 | dl, 13 | ol, 14 | ul 15 | font-size: 90% 16 | margin: 1.5rem 0 1.5rem 3.0rem 17 | 18 | ol 19 | list-style: decimal inside 20 | 21 | ul 22 | list-style: circle inside 23 | -------------------------------------------------------------------------------- /src/_Spacing.styl: -------------------------------------------------------------------------------- 1 | 2 | // Spacing 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | .button, 6 | button, 7 | dd, 8 | dt, 9 | li 10 | margin-bottom: 1.0rem 11 | 12 | fieldset, 13 | input, 14 | select, 15 | textarea 16 | margin-bottom: 1.5rem 17 | 18 | blockquote, 19 | dl, 20 | figure, 21 | form, 22 | ol, 23 | p, 24 | pre, 25 | table, 26 | ul 27 | margin-bottom: 2.5rem 28 | -------------------------------------------------------------------------------- /dist/_Spacing.styl: -------------------------------------------------------------------------------- 1 | 2 | // Spacing 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | .button, 6 | button, 7 | dd, 8 | dt, 9 | li 10 | margin-bottom: 1.0rem 11 | 12 | fieldset, 13 | input, 14 | select, 15 | textarea 16 | margin-bottom: 1.5rem 17 | 18 | blockquote, 19 | dl, 20 | figure, 21 | form, 22 | ol, 23 | p, 24 | pre, 25 | table, 26 | ul 27 | margin-bottom: 2.5rem 28 | -------------------------------------------------------------------------------- /dist/_Utility.styl: -------------------------------------------------------------------------------- 1 | 2 | // Utility 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | // Clear a float with .clearfix 6 | .clearfix 7 | 8 | &:after 9 | clear: both 10 | content: ' ' // The space content is one way to avoid an Opera bug. 11 | display: table 12 | 13 | // Float either direction 14 | .float-left 15 | float: left 16 | 17 | .float-right 18 | float: right 19 | -------------------------------------------------------------------------------- /src/_Utility.styl: -------------------------------------------------------------------------------- 1 | 2 | // Utility 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | // Clear a float with .clearfix 6 | .clearfix 7 | 8 | &:after 9 | clear: both 10 | content: ' ' // The space content is one way to avoid an Opera bug. 11 | display: table 12 | 13 | // Float either direction 14 | .float-left 15 | float: left 16 | 17 | .float-right 18 | float: right 19 | -------------------------------------------------------------------------------- /src/milligram.styl: -------------------------------------------------------------------------------- 1 | 2 | // Modules 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | @import _Color 6 | @import _Base 7 | @import _Blockquote 8 | @import _Button 9 | @import _Code 10 | @import _Divider 11 | @import _Form 12 | @import _Grid 13 | @import _Link 14 | @import _List 15 | @import _Spacing 16 | @import _Table 17 | @import _Typography 18 | @import _Image 19 | @import _Utility 20 | -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'milligram:milligram-stylus', 3 | version: '1.4.1', 4 | summary: 'A minimalist CSS framework on Stylus version.', 5 | git: 'https://github.com/milligram/milligram-stylus.git', 6 | documentation: 'readme.md', 7 | }) 8 | 9 | Package.onUse(function (api) { 10 | api.versionsFrom('METEOR@1.0') 11 | api.addFiles(['dist/milligram.styl'], 'client') 12 | }) 13 | -------------------------------------------------------------------------------- /.appveyor.yml: -------------------------------------------------------------------------------- 1 | os: Visual Studio 2015 2 | version: '{build}' 3 | build: off 4 | platform: x64 5 | environment: 6 | matrix: 7 | - nodejs_version: 12 8 | install: 9 | - ps: Install-Product node $env:nodejs_version x64 10 | - set CI=true 11 | - npm i -g npm@latest 12 | - set PATH=%APPDATA%\npm;%PATH% 13 | - npm i 14 | matrix: 15 | fast_finish: true 16 | shallow_clone: true 17 | clone_depth: 1 18 | test_script: npm t 19 | cache: 20 | - node_modules 21 | -------------------------------------------------------------------------------- /dist/_Code.styl: -------------------------------------------------------------------------------- 1 | 2 | // Code 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | code 6 | background: color-tertiary 7 | border-radius: .4rem 8 | font-size: 86% 9 | margin: 0 .2rem 10 | padding: .2rem .5rem 11 | white-space: nowrap 12 | 13 | pre 14 | background: color-tertiary 15 | border-left: .3rem solid color-primary 16 | overflow-y: hidden 17 | 18 | & > code 19 | border-radius: 0 20 | display: block 21 | padding: 1rem 1.5rem 22 | white-space: pre 23 | -------------------------------------------------------------------------------- /src/_Code.styl: -------------------------------------------------------------------------------- 1 | 2 | // Code 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | code 6 | background: color-tertiary 7 | border-radius: .4rem 8 | font-size: 86% 9 | margin: 0 .2rem 10 | padding: .2rem .5rem 11 | white-space: nowrap 12 | 13 | pre 14 | background: color-tertiary 15 | border-left: .3rem solid color-primary 16 | overflow-y: hidden 17 | 18 | & > code 19 | border-radius: 0 20 | display: block 21 | padding: 1rem 1.5rem 22 | white-space: pre 23 | -------------------------------------------------------------------------------- /dist/_Table.styl: -------------------------------------------------------------------------------- 1 | 2 | // Table 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | table 6 | border-spacing: 0 7 | display: block 8 | overflow-x: auto 9 | text-align: left 10 | width: 100% 11 | 12 | td, 13 | th 14 | border-bottom: .1rem solid color-quinary 15 | padding: 1.2rem 1.5rem 16 | 17 | &:first-child 18 | padding-left: 0 19 | 20 | &:last-child 21 | padding-right: 0 22 | 23 | @media (min-width: 40.0rem) 24 | 25 | table 26 | display: table 27 | overflow-x: initial 28 | -------------------------------------------------------------------------------- /src/_Table.styl: -------------------------------------------------------------------------------- 1 | 2 | // Table 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | table 6 | border-spacing: 0 7 | display: block 8 | overflow-x: auto 9 | text-align: left 10 | width: 100% 11 | 12 | td, 13 | th 14 | border-bottom: .1rem solid color-quinary 15 | padding: 1.2rem 1.5rem 16 | 17 | &:first-child 18 | padding-left: 0 19 | 20 | &:last-child 21 | padding-right: 0 22 | 23 | @media (min-width: 40.0rem) 24 | 25 | table 26 | display: table 27 | overflow-x: initial 28 | -------------------------------------------------------------------------------- /dist/milligram.styl: -------------------------------------------------------------------------------- 1 | /*! 2 | * Milligram-stylus v1.4.1 3 | * https://milligram.io 4 | * 5 | * Copyright (c) 2020 CJ Patoilo 6 | * Licensed under the MIT license 7 | */ 8 | 9 | 10 | // Modules 11 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 12 | 13 | @import _Color 14 | @import _Base 15 | @import _Blockquote 16 | @import _Button 17 | @import _Code 18 | @import _Divider 19 | @import _Form 20 | @import _Grid 21 | @import _Link 22 | @import _List 23 | @import _Spacing 24 | @import _Table 25 | @import _Typography 26 | @import _Image 27 | @import _Utility 28 | -------------------------------------------------------------------------------- /dist/_Base.styl: -------------------------------------------------------------------------------- 1 | 2 | // Base 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | // Set box-sizing globally to handle padding and border widths 6 | *, 7 | *:after, 8 | *:before 9 | box-sizing: inherit 10 | 11 | // The base font-size is set at 62.5% for having the convenience 12 | // of sizing rems in a way that is similar to using px: 1.6rem = 16px 13 | html 14 | box-sizing: border-box 15 | font-size: 62.5% 16 | 17 | // Default body styles 18 | body 19 | color: color-secondary 20 | font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif 21 | font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element 22 | font-weight: 300 23 | letter-spacing: .01em 24 | line-height: 1.6 25 | -------------------------------------------------------------------------------- /src/_Base.styl: -------------------------------------------------------------------------------- 1 | 2 | // Base 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | // Set box-sizing globally to handle padding and border widths 6 | *, 7 | *:after, 8 | *:before 9 | box-sizing: inherit 10 | 11 | // The base font-size is set at 62.5% for having the convenience 12 | // of sizing rems in a way that is similar to using px: 1.6rem = 16px 13 | html 14 | box-sizing: border-box 15 | font-size: 62.5% 16 | 17 | // Default body styles 18 | body 19 | color: color-secondary 20 | font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif 21 | font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element 22 | font-weight: 300 23 | letter-spacing: .01em 24 | line-height: 1.6 25 | -------------------------------------------------------------------------------- /dist/_Typography.styl: -------------------------------------------------------------------------------- 1 | 2 | // Typography 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | b, 6 | strong 7 | font-weight: bold 8 | 9 | p 10 | margin-top: 0 11 | 12 | h1, 13 | h2, 14 | h3, 15 | h4, 16 | h5, 17 | h6 18 | font-weight: 300 19 | letter-spacing: -.1rem 20 | margin-bottom: 2.0rem 21 | margin-top: 0 22 | 23 | h1 24 | font-size: 4.6rem 25 | line-height: 1.2 26 | 27 | h2 28 | font-size: 3.6rem 29 | line-height: 1.25 30 | 31 | h3 32 | font-size: 2.8rem 33 | line-height: 1.3 34 | 35 | h4 36 | font-size: 2.2rem 37 | letter-spacing: -.08rem 38 | line-height: 1.35 39 | 40 | h5 41 | font-size: 1.8rem 42 | letter-spacing: -.05rem 43 | line-height: 1.5 44 | 45 | h6 46 | font-size: 1.6rem 47 | letter-spacing: 0 48 | line-height: 1.4 49 | -------------------------------------------------------------------------------- /src/_Typography.styl: -------------------------------------------------------------------------------- 1 | 2 | // Typography 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | b, 6 | strong 7 | font-weight: bold 8 | 9 | p 10 | margin-top: 0 11 | 12 | h1, 13 | h2, 14 | h3, 15 | h4, 16 | h5, 17 | h6 18 | font-weight: 300 19 | letter-spacing: -.1rem 20 | margin-bottom: 2.0rem 21 | margin-top: 0 22 | 23 | h1 24 | font-size: 4.6rem 25 | line-height: 1.2 26 | 27 | h2 28 | font-size: 3.6rem 29 | line-height: 1.25 30 | 31 | h3 32 | font-size: 2.8rem 33 | line-height: 1.3 34 | 35 | h4 36 | font-size: 2.2rem 37 | letter-spacing: -.08rem 38 | line-height: 1.35 39 | 40 | h5 41 | font-size: 1.8rem 42 | letter-spacing: -.05rem 43 | line-height: 1.5 44 | 45 | h6 46 | font-size: 1.6rem 47 | letter-spacing: 0 48 | line-height: 1.4 49 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "milligram-stylus", 3 | "version": "1.4.1", 4 | "description": "A minimalist CSS framework on Stylus version.", 5 | "homepage": "https://milligram.io", 6 | "repository": "milligram/milligram-stylus", 7 | "license": "MIT", 8 | "author": "CJ Patoilo ", 9 | "main": "dist/milligram.styl", 10 | "keywords": [ 11 | "bootstrap", 12 | "css", 13 | "css3", 14 | "flexbox", 15 | "front-end", 16 | "framework", 17 | "html", 18 | "html5", 19 | "kickstarter", 20 | "less", 21 | "responsive", 22 | "mobile", 23 | "mobile-first", 24 | "postcss", 25 | "responsive", 26 | "sass", 27 | "scss", 28 | "stylus" 29 | ], 30 | "dependencies": { 31 | "normalize.css": "~8.0.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "milligram/milligram-stylus", 3 | "version": "1.4.1", 4 | "description": "A minimalist CSS framework on Stylus version.", 5 | "homepage": "https://milligram.io", 6 | "repository": "milligram/milligram-stylus", 7 | "license": "MIT", 8 | "author": "CJ Patoilo ", 9 | "main": "dist/milligram.styl", 10 | "keywords": [ 11 | "bootstrap", 12 | "css", 13 | "css3", 14 | "flexbox", 15 | "front-end", 16 | "framework", 17 | "html", 18 | "html5", 19 | "kickstarter", 20 | "less", 21 | "responsive", 22 | "mobile", 23 | "mobile-first", 24 | "postcss", 25 | "responsive", 26 | "sass", 27 | "scss", 28 | "stylus" 29 | ], 30 | "dependencies": { 31 | "normalize.css": "~8.0.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) CJ Patoilo 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 | -------------------------------------------------------------------------------- /.styluslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": false, 3 | "brackets": false, 4 | "colons": "always", 5 | "colors": { 6 | "expect": "always" 7 | }, 8 | "commaSpace": "always", 9 | "commentSpace": "always", 10 | "cssLiteral": "never", 11 | "depthLimit": 4, 12 | "duplicates": true, 13 | "efficient": "always", 14 | "exclude": [], 15 | "extendPref": false, 16 | "globalDupe": false, 17 | "groupOutputByFile": true, 18 | "indentPref": 2, 19 | "leadingZero": "never", 20 | "maxErrors": false, 21 | "maxWarnings": false, 22 | "mixed": false, 23 | "namingConvention": "lowercase-dash", 24 | "namingConventionStrict": true, 25 | "none": "always", 26 | "noImportant": true, 27 | "parenSpace": "always", 28 | "placeholders": "always", 29 | "prefixVarsWithDollar": "always", 30 | "quotePref": "single", 31 | "reporterOptions": { 32 | "columns": ["lineData", "severity", "description", "rule"], 33 | "columnSplitter": " ", 34 | "showHeaders": false, 35 | "truncate": true 36 | }, 37 | "semicolons": "never", 38 | "sortOrder": "alphabetical", 39 | "stackedProperties": "never", 40 | "trailingWhitespace": "never", 41 | "universal": "always", 42 | "valid": true, 43 | "zeroUnits": "never", 44 | "zIndexNormalize": false 45 | } 46 | -------------------------------------------------------------------------------- /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | 18 | 19 | ### Version info 20 | 21 | 23 | 24 | **Milligram:** 25 | 26 | **Other (e.g. normalize.css, node.js, npm, bower, browser, operating system) (if applicable):** 27 | 28 | ### Test case 29 | 30 | 31 | 32 | ### Steps to reproduce 33 | 34 | 35 | 36 | ### Expected behavior 37 | 38 | 39 | 40 | ### Actual behavior 41 | 42 | 43 | -------------------------------------------------------------------------------- /dist/_Button.styl: -------------------------------------------------------------------------------- 1 | 2 | // Button 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | .button, 6 | button, 7 | input[type='button'], 8 | input[type='reset'], 9 | input[type='submit'] 10 | background-color: color-primary 11 | border: .1rem solid color-primary 12 | border-radius: .4rem 13 | color: color-initial 14 | cursor: pointer 15 | display: inline-block 16 | font-size: 1.1rem 17 | font-weight: 700 18 | height: 3.8rem 19 | letter-spacing: .1rem 20 | line-height: 3.8rem 21 | padding: 0 3.0rem 22 | text-align: center 23 | text-decoration: none 24 | text-transform: uppercase 25 | white-space: nowrap 26 | 27 | &:focus, 28 | &:hover 29 | background-color: color-secondary 30 | border-color: color-secondary 31 | color: color-initial 32 | outline: 0 33 | 34 | &[disabled] 35 | cursor: default 36 | opacity: .5 37 | 38 | &:focus, 39 | &:hover 40 | background-color: color-primary 41 | border-color: color-primary 42 | 43 | &.button-outline 44 | background-color: transparent 45 | color: color-primary 46 | 47 | &:focus, 48 | &:hover 49 | background-color: transparent 50 | border-color: color-secondary 51 | color: color-secondary 52 | 53 | &[disabled] 54 | 55 | &:focus, 56 | &:hover 57 | border-color: inherit 58 | color: color-primary 59 | 60 | &.button-clear 61 | background-color: transparent 62 | border-color: transparent 63 | color: color-primary 64 | 65 | &:focus, 66 | &:hover 67 | background-color: transparent 68 | border-color: transparent 69 | color: color-secondary 70 | 71 | &[disabled] 72 | 73 | &:focus, 74 | &:hover 75 | color: color-primary 76 | -------------------------------------------------------------------------------- /src/_Button.styl: -------------------------------------------------------------------------------- 1 | 2 | // Button 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | .button, 6 | button, 7 | input[type='button'], 8 | input[type='reset'], 9 | input[type='submit'] 10 | background-color: color-primary 11 | border: .1rem solid color-primary 12 | border-radius: .4rem 13 | color: color-initial 14 | cursor: pointer 15 | display: inline-block 16 | font-size: 1.1rem 17 | font-weight: 700 18 | height: 3.8rem 19 | letter-spacing: .1rem 20 | line-height: 3.8rem 21 | padding: 0 3.0rem 22 | text-align: center 23 | text-decoration: none 24 | text-transform: uppercase 25 | white-space: nowrap 26 | 27 | &:focus, 28 | &:hover 29 | background-color: color-secondary 30 | border-color: color-secondary 31 | color: color-initial 32 | outline: 0 33 | 34 | &[disabled] 35 | cursor: default 36 | opacity: .5 37 | 38 | &:focus, 39 | &:hover 40 | background-color: color-primary 41 | border-color: color-primary 42 | 43 | &.button-outline 44 | background-color: transparent 45 | color: color-primary 46 | 47 | &:focus, 48 | &:hover 49 | background-color: transparent 50 | border-color: color-secondary 51 | color: color-secondary 52 | 53 | &[disabled] 54 | 55 | &:focus, 56 | &:hover 57 | border-color: inherit 58 | color: color-primary 59 | 60 | &.button-clear 61 | background-color: transparent 62 | border-color: transparent 63 | color: color-primary 64 | 65 | &:focus, 66 | &:hover 67 | background-color: transparent 68 | border-color: transparent 69 | color: color-secondary 70 | 71 | &[disabled] 72 | 73 | &:focus, 74 | &:hover 75 | color: color-primary 76 | -------------------------------------------------------------------------------- /dist/_Form.styl: -------------------------------------------------------------------------------- 1 | 2 | // Form 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | input[type='color'], 6 | input[type='date'], 7 | input[type='datetime'], 8 | input[type='datetime-local'], 9 | input[type='email'], 10 | input[type='month'], 11 | input[type='number'], 12 | input[type='password'], 13 | input[type='search'], 14 | input[type='tel'], 15 | input[type='text'], 16 | input[type='url'], 17 | input[type='week'], 18 | input:not([type]), 19 | textarea, 20 | select 21 | -webkit-appearance: none // sass-lint:disable-line no-vendor-prefixes 22 | background-color: transparent 23 | border: .1rem solid color-quaternary 24 | border-radius: .4rem 25 | box-shadow: none 26 | box-sizing: inherit // Forced to replace inherit values of the normalize.css 27 | height: 3.8rem 28 | padding: .6rem 1.0rem .7rem // This vertically centers text on FF, ignored by Webkit 29 | width: 100% 30 | 31 | &:focus 32 | border-color: color-primary 33 | outline: 0 34 | 35 | select 36 | background: url('data:image/svg+xml;utf8,') center right no-repeat 37 | padding-right: 3.0rem 38 | 39 | &:focus 40 | background-image: url('data:image/svg+xml;utf8,') 41 | 42 | &[multiple] 43 | background: none 44 | height: auto 45 | 46 | textarea 47 | min-height: 6.5rem 48 | 49 | label, 50 | legend 51 | display: block 52 | font-size: 1.6rem 53 | font-weight: 700 54 | margin-bottom: .5rem 55 | 56 | fieldset 57 | border-width: 0 58 | padding: 0 59 | 60 | input[type='checkbox'], 61 | input[type='radio'] 62 | display: inline 63 | 64 | .label-inline 65 | display: inline-block 66 | font-weight: normal 67 | margin-left: .5rem 68 | -------------------------------------------------------------------------------- /src/_Form.styl: -------------------------------------------------------------------------------- 1 | 2 | // Form 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | input[type='color'], 6 | input[type='date'], 7 | input[type='datetime'], 8 | input[type='datetime-local'], 9 | input[type='email'], 10 | input[type='month'], 11 | input[type='number'], 12 | input[type='password'], 13 | input[type='search'], 14 | input[type='tel'], 15 | input[type='text'], 16 | input[type='url'], 17 | input[type='week'], 18 | input:not([type]), 19 | textarea, 20 | select 21 | -webkit-appearance: none // sass-lint:disable-line no-vendor-prefixes 22 | background-color: transparent 23 | border: .1rem solid color-quaternary 24 | border-radius: .4rem 25 | box-shadow: none 26 | box-sizing: inherit // Forced to replace inherit values of the normalize.css 27 | height: 3.8rem 28 | padding: .6rem 1.0rem .7rem // This vertically centers text on FF, ignored by Webkit 29 | width: 100% 30 | 31 | &:focus 32 | border-color: color-primary 33 | outline: 0 34 | 35 | select 36 | background: url('data:image/svg+xml;utf8,') center right no-repeat 37 | padding-right: 3.0rem 38 | 39 | &:focus 40 | background-image: url('data:image/svg+xml;utf8,') 41 | 42 | &[multiple] 43 | background: none 44 | height: auto 45 | 46 | textarea 47 | min-height: 6.5rem 48 | 49 | label, 50 | legend 51 | display: block 52 | font-size: 1.6rem 53 | font-weight: 700 54 | margin-bottom: .5rem 55 | 56 | fieldset 57 | border-width: 0 58 | padding: 0 59 | 60 | input[type='checkbox'], 61 | input[type='radio'] 62 | display: inline 63 | 64 | .label-inline 65 | display: inline-block 66 | font-weight: normal 67 | margin-left: .5rem 68 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 28 | 29 | ### Description 30 | 31 | 32 | 33 | ### Code sample 34 | 35 | 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "milligram-stylus", 3 | "version": "1.4.1", 4 | "description": "A minimalist CSS framework on Stylus version.", 5 | "homepage": "https://milligram.io", 6 | "repository": "milligram/milligram-stylus", 7 | "license": "MIT", 8 | "author": "CJ Patoilo ", 9 | "main": "dist/milligram.styl", 10 | "keywords": [ 11 | "bootstrap", 12 | "css", 13 | "css3", 14 | "flexbox", 15 | "front-end", 16 | "framework", 17 | "html", 18 | "html5", 19 | "kickstarter", 20 | "less", 21 | "responsive", 22 | "mobile", 23 | "mobile-first", 24 | "postcss", 25 | "responsive", 26 | "sass", 27 | "scss", 28 | "stylus" 29 | ], 30 | "dependencies": { 31 | "normalize.css": "~8.0.1" 32 | }, 33 | "devDependencies": { 34 | "autoprefixer": "^9.8.0", 35 | "banner-cli": "^0.14.3", 36 | "copycopy": "0.0.2", 37 | "husky": "^4.2.5", 38 | "lint-staged": "^10.2.11", 39 | "npm-run-all": "^4.1.5", 40 | "onchange": "^7.0.2", 41 | "postcss-cli": "^7.1.1", 42 | "prettier-standard": "^16.3.0", 43 | "rimraf": "^3.0.2", 44 | "stylint": "^2.0.0", 45 | "stylus": "^0.54.7" 46 | }, 47 | "scripts": { 48 | "autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r test/*.css", 49 | "banner": "banner-cli dist/milligram.styl", 50 | "build": "rimraf dist && run-s copy banner stylus autoprefixer", 51 | "copy": "copycopy src/**/* dist", 52 | "lint": "prettier-standard --format && stylint --config .styluslintrc src/*.styl", 53 | "prepublishOnly": "npm run build", 54 | "stylus": "rm -rf test && mkdir test && stylus src/milligram.styl --out test/milligram.css && stylus --compress src/milligram.styl --out test/milligram.min.css", 55 | "start": "run-p build watch", 56 | "test": "run-s build", 57 | "watch": "onchange src -- run-p build" 58 | }, 59 | "prettier": { 60 | "jsxSingleQuote": false, 61 | "trailingComma": "all" 62 | }, 63 | "husky": { 64 | "hooks": { 65 | "pre-commit": "lint-staged" 66 | } 67 | }, 68 | "lint-staged": { 69 | "**/*": [ 70 | "prettier-standard --format", 71 | "git add" 72 | ] 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | Milligram - A minimalist CSS framework. 2 | 3 | > A minimalist CSS framework on Stylus version. 4 | 5 | [![Travis Status](https://travis-ci.org/milligram/milligram-stylus.svg?branch=master)](https://travis-ci.org/milligram/milligram-stylus?branch=master) 6 | [![AppVeyor Status](https://ci.appveyor.com/api/projects/status/87788so9a3ou25dq?svg=true)](https://ci.appveyor.com/project/cjpatoilo/milligram-stylus) 7 | [![Codacy Status](https://img.shields.io/codacy/grade/7592f9923ec2438982eaa972d4e1371f/master.svg)](https://www.codacy.com/app/milligram/milligram-stylus/dashboard) 8 | [![Dependencies Status](https://david-dm.org/milligram/milligram-stylus.svg)](https://travis-ci.org/milligram/milligram-stylus?branch=master) 9 | [![Version Status](https://badge.fury.io/js/milligram-stylus.svg)](https://www.npmjs.com/package/milligram-stylus) 10 | [![Download Status](https://img.shields.io/npm/dt/milligram-stylus.svg)](https://www.npmjs.com/package/milligram-stylus) 11 | [![Gitter Chat](https://img.shields.io/badge/gitter-join_the_chat-4cc61e.svg)](https://gitter.im/milligram/milligram) 12 | 13 | ## Why it's awesome 14 | 15 | Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! **Only 2kb gzipped!** It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy! 16 | 17 | ## Download 18 | 19 | **Install with Bower** 20 | 21 | ```sh 22 | $ bower install milligram-stylus 23 | ``` 24 | 25 | **Install with npm** 26 | 27 | ```sh 28 | $ npm install milligram-stylus 29 | ``` 30 | 31 | **Install with Yarn** 32 | 33 | ```sh 34 | $ yarn add milligram-stylus 35 | ``` 36 | 37 | ## Table of Contents 38 | 39 | - [Getting Started](https://milligram.io/#getting-started) 40 | - [Typography](https://milligram.io/#typography) 41 | - [Blockquotes](https://milligram.io/#blockquotes) 42 | - [Buttons](https://milligram.io/#buttons) 43 | - [Lists](https://milligram.io/#lists) 44 | - [Forms](https://milligram.io/#forms) 45 | - [Tables](https://milligram.io/#tables) 46 | - [Grids](https://milligram.io/#grids) 47 | - [Code](https://milligram.io/#code) 48 | - [Utilities](https://milligram.io/#utilities) 49 | - [Tips](https://milligram.io/#tips) 50 | - [Browser Support](https://milligram.io/#browser-support) 51 | - [Examples](https://milligram.io/#examples) 52 | 53 | ## Contributing 54 | 55 | Want to contribute? Follow these [recommendations](https://github.com/milligram/milligram-stylus/contribute). 56 | 57 | ## License 58 | 59 | Designed with ♥ by [CJ Patoilo](https://twitter.com/cjpatoilo). Licensed under the [MIT License](https://cjpatoilo.com/license). 60 | -------------------------------------------------------------------------------- /src/_Grid.styl: -------------------------------------------------------------------------------- 1 | 2 | // Grid 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | // .container is main centered wrapper with a max width of 112.0rem (1120px) 6 | .container 7 | margin: 0 auto 8 | max-width: 112.0rem 9 | padding: 0 2.0rem 10 | position: relative 11 | width: 100% 12 | 13 | // Using flexbox for the grid, inspired by Philip Walton: 14 | // http://philipwalton.github.io/solved-by-flexbox/demos/grids/ 15 | // By default each .column within a .row will evenly take up 16 | // available width, and the height of each .column with take 17 | // up the height of the tallest .column in the same .row 18 | .row 19 | display: flex 20 | flex-direction: column 21 | padding: 0 22 | width: 100% 23 | 24 | &.row-no-padding 25 | padding: 0 26 | 27 | &> .column 28 | padding: 0 29 | 30 | &.row-wrap 31 | flex-wrap: wrap 32 | 33 | // Vertically Align Columns 34 | // .row-* vertically aligns every .col in the .row 35 | &.row-top 36 | align-items: flex-start 37 | 38 | &.row-bottom 39 | align-items: flex-end 40 | 41 | &.row-center 42 | align-items: center 43 | 44 | &.row-stretch 45 | align-items: stretch 46 | 47 | &.row-baseline 48 | align-items: baseline 49 | 50 | .column 51 | display: block 52 | // IE 11 required specifying the flex-basis otherwise it breaks mobile 53 | flex: 1 1 auto 54 | margin-left: 0 55 | max-width: 100% 56 | width: 100% 57 | 58 | // Column Offsets 59 | &.column-offset-10 60 | margin-left: 10% 61 | 62 | &.column-offset-20 63 | margin-left: 20% 64 | 65 | &.column-offset-25 66 | margin-left: 25% 67 | 68 | &.column-offset-33, 69 | &.column-offset-34 70 | margin-left: 33.3333% 71 | 72 | &.column-offset-40 73 | margin-left: 40% 74 | 75 | &.column-offset-50 76 | margin-left: 50% 77 | 78 | &.column-offset-60 79 | margin-left: 60% 80 | 81 | &.column-offset-66, 82 | &.column-offset-67 83 | margin-left: 66.6666% 84 | 85 | &.column-offset-75 86 | margin-left: 75% 87 | 88 | &.column-offset-80 89 | margin-left: 80% 90 | 91 | &.column-offset-90 92 | margin-left: 90% 93 | 94 | // Explicit Column Percent Sizes 95 | // By default each grid column will evenly distribute 96 | // across the grid. However, you can specify individual 97 | // columns to take up a certain size of the available area 98 | &.column-10 99 | flex: 0 0 10% 100 | max-width: 10% 101 | 102 | &.column-20 103 | flex: 0 0 20% 104 | max-width: 20% 105 | 106 | &.column-25 107 | flex: 0 0 25% 108 | max-width: 25% 109 | 110 | &.column-33, 111 | &.column-34 112 | flex: 0 0 33.3333% 113 | max-width: 33.3333% 114 | 115 | &.column-40 116 | flex: 0 0 40% 117 | max-width: 40% 118 | 119 | &.column-50 120 | flex: 0 0 50% 121 | max-width: 50% 122 | 123 | &.column-60 124 | flex: 0 0 60% 125 | max-width: 60% 126 | 127 | &.column-66, 128 | &.column-67 129 | flex: 0 0 66.6666% 130 | max-width: 66.6666% 131 | 132 | &.column-75 133 | flex: 0 0 75% 134 | max-width: 75% 135 | 136 | &.column-80 137 | flex: 0 0 80% 138 | max-width: 80% 139 | 140 | &.column-90 141 | flex: 0 0 90% 142 | max-width: 90% 143 | 144 | // .column-* vertically aligns an individual .column 145 | .column-top 146 | align-self: flex-start 147 | 148 | .column-bottom 149 | align-self: flex-end 150 | 151 | .column-center 152 | align-self: center 153 | 154 | // Larger than mobile screen 155 | @media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works 156 | 157 | .row 158 | flex-direction: row 159 | margin-left: -1.0rem 160 | width: calc(100% + 2.0rem) 161 | 162 | .column 163 | margin-bottom: inherit 164 | padding: 0 1.0rem 165 | -------------------------------------------------------------------------------- /dist/_Grid.styl: -------------------------------------------------------------------------------- 1 | 2 | // Grid 3 | // –––––––––––––––––––––––––––––––––––––––––––––––––– 4 | 5 | // .container is main centered wrapper with a max width of 112.0rem (1120px) 6 | .container 7 | margin: 0 auto 8 | max-width: 112.0rem 9 | padding: 0 2.0rem 10 | position: relative 11 | width: 100% 12 | 13 | // Using flexbox for the grid, inspired by Philip Walton: 14 | // http://philipwalton.github.io/solved-by-flexbox/demos/grids/ 15 | // By default each .column within a .row will evenly take up 16 | // available width, and the height of each .column with take 17 | // up the height of the tallest .column in the same .row 18 | .row 19 | display: flex 20 | flex-direction: column 21 | padding: 0 22 | width: 100% 23 | 24 | &.row-no-padding 25 | padding: 0 26 | 27 | &> .column 28 | padding: 0 29 | 30 | &.row-wrap 31 | flex-wrap: wrap 32 | 33 | // Vertically Align Columns 34 | // .row-* vertically aligns every .col in the .row 35 | &.row-top 36 | align-items: flex-start 37 | 38 | &.row-bottom 39 | align-items: flex-end 40 | 41 | &.row-center 42 | align-items: center 43 | 44 | &.row-stretch 45 | align-items: stretch 46 | 47 | &.row-baseline 48 | align-items: baseline 49 | 50 | .column 51 | display: block 52 | // IE 11 required specifying the flex-basis otherwise it breaks mobile 53 | flex: 1 1 auto 54 | margin-left: 0 55 | max-width: 100% 56 | width: 100% 57 | 58 | // Column Offsets 59 | &.column-offset-10 60 | margin-left: 10% 61 | 62 | &.column-offset-20 63 | margin-left: 20% 64 | 65 | &.column-offset-25 66 | margin-left: 25% 67 | 68 | &.column-offset-33, 69 | &.column-offset-34 70 | margin-left: 33.3333% 71 | 72 | &.column-offset-40 73 | margin-left: 40% 74 | 75 | &.column-offset-50 76 | margin-left: 50% 77 | 78 | &.column-offset-60 79 | margin-left: 60% 80 | 81 | &.column-offset-66, 82 | &.column-offset-67 83 | margin-left: 66.6666% 84 | 85 | &.column-offset-75 86 | margin-left: 75% 87 | 88 | &.column-offset-80 89 | margin-left: 80% 90 | 91 | &.column-offset-90 92 | margin-left: 90% 93 | 94 | // Explicit Column Percent Sizes 95 | // By default each grid column will evenly distribute 96 | // across the grid. However, you can specify individual 97 | // columns to take up a certain size of the available area 98 | &.column-10 99 | flex: 0 0 10% 100 | max-width: 10% 101 | 102 | &.column-20 103 | flex: 0 0 20% 104 | max-width: 20% 105 | 106 | &.column-25 107 | flex: 0 0 25% 108 | max-width: 25% 109 | 110 | &.column-33, 111 | &.column-34 112 | flex: 0 0 33.3333% 113 | max-width: 33.3333% 114 | 115 | &.column-40 116 | flex: 0 0 40% 117 | max-width: 40% 118 | 119 | &.column-50 120 | flex: 0 0 50% 121 | max-width: 50% 122 | 123 | &.column-60 124 | flex: 0 0 60% 125 | max-width: 60% 126 | 127 | &.column-66, 128 | &.column-67 129 | flex: 0 0 66.6666% 130 | max-width: 66.6666% 131 | 132 | &.column-75 133 | flex: 0 0 75% 134 | max-width: 75% 135 | 136 | &.column-80 137 | flex: 0 0 80% 138 | max-width: 80% 139 | 140 | &.column-90 141 | flex: 0 0 90% 142 | max-width: 90% 143 | 144 | // .column-* vertically aligns an individual .column 145 | .column-top 146 | align-self: flex-start 147 | 148 | .column-bottom 149 | align-self: flex-end 150 | 151 | .column-center 152 | align-self: center 153 | 154 | // Larger than mobile screen 155 | @media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works 156 | 157 | .row 158 | flex-direction: row 159 | margin-left: -1.0rem 160 | width: calc(100% + 2.0rem) 161 | 162 | .column 163 | margin-bottom: inherit 164 | padding: 0 1.0rem 165 | -------------------------------------------------------------------------------- /.github/contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We would love for you to contribute to Milligram and help us make this even better! Start reading this document to see it is not difficult as you might have imagined. 4 | 5 | ## Table of Contents 6 | 7 | - [Open an Issue](#open-an-issue) 8 | - [Submit a Pull Request](#submit-a-pull-request) 9 | - [Building](#building) 10 | - [Style Guide](#style-guide) 11 | - [Test](#test) 12 | - [Code of Conduct](#code-of-conduct) 13 | - [License](#license) 14 | 15 | ## Open an Issue 16 | 17 | [Open an Issue](../../../issues/new) to report any problems or improvements. When necessary, use [Codepen](http://codepen.io/) to show the problem. Be sure to include some description to explain the problem. 18 | 19 | ## Submit a Pull Request 20 | 21 | To submit a new feature, make sure that changes are done to the source code. [Follow our style guide](#style-guide) and do not forget the tests and attach the link [Codepen](http://codepen.io/) along with the description. 22 | 23 | Try to solve a problem for each pull request, this increases the chances of acceptance. When in doubt, open a [new issue](#open-an-issue) so we can answer you. Look existing issues for ideas or to see if a similar issue has already been submitted. 24 | 25 | 1. Fork the Github repo: `git clone https://github.com/milligram/milligram-stylus.git` 26 | 1. Create a new branch: `git checkout -b issuenumber-feature-name` 27 | 1. Commit your changes: `git commit -m 'issuenumber-feature-name'` 28 | 1. Push to the branch: `git push origin my-feature-name` 29 | 1. Submit a pull request! 30 | 31 | _Note: For issues relating to the site, please use the [milligram/milligram.github.io](https://github.com/milligram/milligram.github.io)_ 32 | 33 | ## Building 34 | 35 | First install [Node.js](https://nodejs.org/en/download/) for the build process. Now install all the dependencies, run `npm install` from the project directory. Once you have the dependencies installed, run `npm start`. This will run the build task which compiles the Sass files into Milligram.css file in the expanded and compressed version. 36 | 37 | ## Style Guide 38 | 39 | In this version, Milligram use [Stylus](http://stylus-lang.com/) to give super powers to CSS. Look at how the code is being maintained, we must always be consistent. We try to follow best practices as much as possible. In addition, here are some tips you should follow: 40 | 41 | - Properties and selectors are sorted in alphabetical order 42 | - Always use tab to indentation, no spaces 43 | - Always use single quote, i.e. `content: ''` 44 | - Quote attribute values in selectors, i.e. `input[type='checkbox']` 45 | - Avoid specifying units for zero-values, i.e. `margin: 0` 46 | - Use `rem` unit instead of `px` 47 | - Use lowercase and shorthand hex values, i.e. `#fff` 48 | - Use one discrete selector per line in multi-selector rulesets 49 | - Include a single space after colon and after each comma 50 | - Separate each ruleset by a blank line 51 | - Don't use prefixes, there is a task to generate this automatically 52 | 53 | ```stylus 54 | .selector-a, 55 | .selector-b, 56 | .selector-c, 57 | .selector-d[type='text'] 58 | box-sizing: border-box 59 | color: #333 60 | content: '' 61 | display: inline-block 62 | font-family: 'Helvetica-Neue', 'Helvetica', 'Arial', sans-serif 63 | margin-bottom: 0 64 | margin-left: 5.0rem 65 | 66 | .other-selector-a 67 | background: #fff 68 | 69 | .other-selector-b 70 | background: #fff 71 | 72 | &.increasing-the-specificity 73 | color: #000 74 | ``` 75 | 76 | _Note: This style guide was inspired by [Idiomatic.css](https://github.com/necolas/idiomatic-css)._ 77 | 78 | ## Test 79 | 80 | Breaking CSS is easy. Checking every responsive page element is hard. That's why Milligram uses automated visual regression testing for responsive web UI by comparing DOM screenshots at various viewport sizes. To view the comparison run `npm run visual-regression` after making changes to the source code. 81 | 82 | ## Code of Conduct 83 | 84 | Help us keep Milligram open and inclusive. Please read and follow our thoughts on [Code of Conduct](http://confcodeofconduct.com/). 85 | 86 | ## License 87 | 88 | By contributing your code, you agree to license your contribution under the [MIT license](https://cjpatoilo.com/license). 89 | -------------------------------------------------------------------------------- /test/milligram.min.css: -------------------------------------------------------------------------------- 1 | *,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#606c76;font-family:'Roboto','Helvetica Neue','Helvetica','Arial',sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:1.6}blockquote{border-left:.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#9b4dca;border:.1rem solid #9b4dca;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,button:focus,input[type='button']:focus,input[type='reset']:focus,input[type='submit']:focus,.button:hover,button:hover,input[type='button']:hover,input[type='reset']:hover,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,button[disabled]:focus,input[type='button'][disabled]:focus,input[type='reset'][disabled]:focus,input[type='submit'][disabled]:focus,.button[disabled]:hover,button[disabled]:hover,input[type='button'][disabled]:hover,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:hover{background-color:#9b4dca;border-color:#9b4dca}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#9b4dca}.button.button-outline:focus,button.button-outline:focus,input[type='button'].button-outline:focus,input[type='reset'].button-outline:focus,input[type='submit'].button-outline:focus,.button.button-outline:hover,button.button-outline:hover,input[type='button'].button-outline:hover,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,button.button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#9b4dca}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#9b4dca}.button.button-clear:focus,button.button-clear:focus,input[type='button'].button-clear:focus,input[type='reset'].button-clear:focus,input[type='submit'].button-clear:focus,.button.button-clear:hover,button.button-clear:hover,input[type='button'].button-clear:hover,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,button.button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:hover{color:#9b4dca}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:.3rem solid #9b4dca;overflow-y:hidden}pre > code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:.1rem solid #f4f5f6;margin:3rem 0}input[type='color'],input[type='date'],input[type='datetime'],input[type='datetime-local'],input[type='email'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],input[type='week'],input:not([type]),textarea,select{-webkit-appearance:none;background-color:transparent;border:.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1rem .7rem;width:100%}input[type='color']:focus,input[type='date']:focus,input[type='datetime']:focus,input[type='datetime-local']:focus,input[type='email']:focus,input[type='month']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,input[type='week']:focus,input:not([type]):focus,textarea:focus,select:focus{border-color:#9b4dca;outline:0}select{background:url("data:image/svg+xml;utf8,") center right no-repeat;padding-right:3rem}select:focus{background-image:url("data:image/svg+xml;utf8,")}select[multiple]{background:none;height:auto}textarea{min-height:6.5rem}label,legend{display:block;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}fieldset{border-width:0;padding:0}input[type='checkbox'],input[type='radio']{display:inline}.label-inline{display:inline-block;font-weight:normal;margin-left:.5rem}.container{margin:0 auto;max-width:112rem;padding:0 2rem;position:relative;width:100%}.row{display:flex;flex-direction:column;padding:0;width:100%}.row.row-no-padding{padding:0}.row.row-no-padding> .column{padding:0}.row.row-wrap{flex-wrap:wrap}.row.row-top{align-items:flex-start}.row.row-bottom{align-items:flex-end}.row.row-center{align-items:center}.row.row-stretch{align-items:stretch}.row.row-baseline{align-items:baseline}.row .column{display:block;flex:1 1 auto;margin-left:0;max-width:100%;width:100%}.row .column.column-offset-10{margin-left:10%}.row .column.column-offset-20{margin-left:20%}.row .column.column-offset-25{margin-left:25%}.row .column.column-offset-33,.row .column.column-offset-34{margin-left:33.3333%}.row .column.column-offset-40{margin-left:40%}.row .column.column-offset-50{margin-left:50%}.row .column.column-offset-60{margin-left:60%}.row .column.column-offset-66,.row .column.column-offset-67{margin-left:66.6666%}.row .column.column-offset-75{margin-left:75%}.row .column.column-offset-80{margin-left:80%}.row .column.column-offset-90{margin-left:90%}.row .column.column-10{flex:0 0 10%;max-width:10%}.row .column.column-20{flex:0 0 20%;max-width:20%}.row .column.column-25{flex:0 0 25%;max-width:25%}.row .column.column-33,.row .column.column-34{flex:0 0 33.3333%;max-width:33.3333%}.row .column.column-40{flex:0 0 40%;max-width:40%}.row .column.column-50{flex:0 0 50%;max-width:50%}.row .column.column-60{flex:0 0 60%;max-width:60%}.row .column.column-66,.row .column.column-67{flex:0 0 66.6666%;max-width:66.6666%}.row .column.column-75{flex:0 0 75%;max-width:75%}.row .column.column-80{flex:0 0 80%;max-width:80%}.row .column.column-90{flex:0 0 90%;max-width:90%}.row .column .column-top{align-self:flex-start}.row .column .column-bottom{align-self:flex-end}.row .column .column-center{align-self:center}@media (min-width:40rem){.row{flex-direction:row;margin-left:-1rem;width:calc(100% + 2rem)}.row .column{margin-bottom:inherit;padding:0 1rem}}a{color:#9b4dca;text-decoration:none}a:focus,a:hover{color:#606c76}dl,ol,ul{list-style:none;margin-top:0;padding-left:0}dl dl,ol dl,ul dl,dl ol,ol ol,ul ol,dl ul,ol ul,ul ul{font-size:90%;margin:1.5rem 0 1.5rem 3rem}ol{list-style:decimal inside}ul{list-style:circle inside}.button,button,dd,dt,li{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}table{border-spacing:0;display:block;overflow-x:auto;text-align:left;width:100%}td,th{border-bottom:.1rem solid #e1e1e1;padding:1.2rem 1.5rem}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}@media (min-width:40rem){table{display:table;overflow-x:initial}}b,strong{font-weight:bold}p{margin-top:0}h1,h2,h3,h4,h5,h6{font-weight:300;letter-spacing:-.1rem;margin-bottom:2rem;margin-top:0}h1{font-size:4.6rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:2.8rem;line-height:1.3}h4{font-size:2.2rem;letter-spacing:-.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-.05rem;line-height:1.5}h6{font-size:1.6rem;letter-spacing:0;line-height:1.4}img{max-width:100%}.clearfix:after{clear:both;content:' ';display:table}.float-left{float:left}.float-right{float:right} 2 | /*# sourceMappingURL=milligram.min.css.map */ -------------------------------------------------------------------------------- /test/milligram.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["milligram.min.css"],"names":[],"mappings":"AAAA,mBAAmB,kBAAkB,CAAC,KAAK,qBAAqB,CAAC,eAAe,CAAC,KAAK,aAAa,CAAC,oEAAoE,CAAC,eAAe,CAAC,eAAe,CAAC,oBAAoB,CAAC,eAAe,CAAC,WAAW,+BAA+B,CAAC,aAAa,CAAC,cAAc,CAAC,mBAAmB,CAAC,wBAAwB,eAAe,CAAC,6EAA6E,wBAAwB,CAAC,0BAA0B,CAAC,mBAAmB,CAAC,UAAU,CAAC,cAAc,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,eAAe,CAAC,aAAa,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,cAAc,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,wBAAwB,CAAC,kBAAkB,CAAC,sNAAsN,wBAAwB,CAAC,oBAAoB,CAAC,UAAU,CAAC,SAAS,CAAC,+HAA+H,cAAc,CAAC,UAAU,CAAC,0TAA0T,wBAAwB,CAAC,oBAAoB,CAAC,wJAAwJ,4BAA4B,CAAC,aAAa,CAAC,4WAA4W,4BAA4B,CAAC,oBAAoB,CAAC,aAAa,CAAC,gdAAgd,oBAAoB,CAAC,aAAa,CAAC,8IAA8I,4BAA4B,CAAC,wBAAwB,CAAC,aAAa,CAAC,wVAAwV,4BAA4B,CAAC,wBAAwB,CAAC,aAAa,CAAC,4bAA4b,aAAa,CAAC,KAAK,kBAAkB,CAAC,mBAAmB,CAAC,aAAa,CAAC,cAAc,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,IAAI,kBAAkB,CAAC,+BAA+B,CAAC,iBAAiB,CAAC,WAAW,eAAe,CAAC,aAAa,CAAC,mBAAmB,CAAC,eAAe,CAAC,GAAG,QAAQ,CAAC,8BAA8B,CAAC,aAAa,CAAC,gTAAgT,uBAAuB,CAAC,4BAA4B,CAAC,0BAA0B,CAAC,mBAAmB,CAAC,eAAe,CAAC,kBAAkB,CAAC,aAAa,CAAC,wBAAwB,CAAC,UAAU,CAAC,gZAAgZ,oBAAoB,CAAC,SAAS,CAAC,OAAO,oLAAoL,CAAC,kBAAkB,CAAC,aAAa,mKAAmK,CAAC,iBAAiB,eAAe,CAAC,WAAW,CAAC,SAAS,iBAAiB,CAAC,aAAa,aAAa,CAAC,gBAAgB,CAAC,eAAe,CAAC,mBAAmB,CAAC,SAAS,cAAc,CAAC,SAAS,CAAC,2CAA2C,cAAc,CAAC,cAAc,oBAAoB,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,WAAW,aAAa,CAAC,gBAAgB,CAAC,cAAc,CAAC,iBAAiB,CAAC,UAAU,CAAC,KAAK,YAAY,CAAC,qBAAqB,CAAC,SAAS,CAAC,UAAU,CAAC,oBAAoB,SAAS,CAAC,6BAA6B,SAAS,CAAC,cAAc,cAAc,CAAC,aAAa,sBAAsB,CAAC,gBAAgB,oBAAoB,CAAC,gBAAgB,kBAAkB,CAAC,iBAAiB,mBAAmB,CAAC,kBAAkB,oBAAoB,CAAC,aAAa,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,cAAc,CAAC,UAAU,CAAC,8BAA8B,eAAe,CAAC,8BAA8B,eAAe,CAAC,8BAA8B,eAAe,CAAC,4DAA4D,oBAAoB,CAAC,8BAA8B,eAAe,CAAC,8BAA8B,eAAe,CAAC,8BAA8B,eAAe,CAAC,4DAA4D,oBAAoB,CAAC,8BAA8B,eAAe,CAAC,8BAA8B,eAAe,CAAC,8BAA8B,eAAe,CAAC,uBAAuB,YAAY,CAAC,aAAa,CAAC,uBAAuB,YAAY,CAAC,aAAa,CAAC,uBAAuB,YAAY,CAAC,aAAa,CAAC,8CAA8C,iBAAiB,CAAC,kBAAkB,CAAC,uBAAuB,YAAY,CAAC,aAAa,CAAC,uBAAuB,YAAY,CAAC,aAAa,CAAC,uBAAuB,YAAY,CAAC,aAAa,CAAC,8CAA8C,iBAAiB,CAAC,kBAAkB,CAAC,uBAAuB,YAAY,CAAC,aAAa,CAAC,uBAAuB,YAAY,CAAC,aAAa,CAAC,uBAAuB,YAAY,CAAC,aAAa,CAAC,yBAAyB,qBAAqB,CAAC,4BAA4B,mBAAmB,CAAC,4BAA4B,iBAAiB,CAAC,yBAAyB,KAAK,kBAAkB,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,aAAa,qBAAqB,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,gBAAgB,aAAa,CAAC,SAAS,eAAe,CAAC,YAAY,CAAC,cAAc,CAAC,sDAAsD,aAAa,CAAC,2BAA2B,CAAC,GAAG,yBAAyB,CAAC,GAAG,wBAAwB,CAAC,wBAAwB,kBAAkB,CAAC,+BAA+B,oBAAoB,CAAC,4CAA4C,oBAAoB,CAAC,MAAM,gBAAgB,CAAC,aAAa,CAAC,eAAe,CAAC,eAAe,CAAC,UAAU,CAAC,MAAM,iCAAiC,CAAC,qBAAqB,CAAC,8BAA8B,cAAc,CAAC,4BAA4B,eAAe,CAAC,yBAAyB,MAAM,aAAa,CAAC,kBAAkB,CAAC,CAAC,SAAS,gBAAgB,CAAC,EAAE,YAAY,CAAC,kBAAkB,eAAe,CAAC,qBAAqB,CAAC,kBAAkB,CAAC,YAAY,CAAC,GAAG,gBAAgB,CAAC,eAAe,CAAC,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC,eAAe,CAAC,GAAG,gBAAgB,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC,sBAAsB,CAAC,eAAe,CAAC,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,cAAc,CAAC,gBAAgB,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,YAAY,UAAU,CAAC,aAAa,WAAW","file":"milligram.min.css","sourcesContent":["*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#606c76;font-family:'Roboto','Helvetica Neue','Helvetica','Arial',sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:1.6}blockquote{border-left:.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#9b4dca;border:.1rem solid #9b4dca;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,button:focus,input[type='button']:focus,input[type='reset']:focus,input[type='submit']:focus,.button:hover,button:hover,input[type='button']:hover,input[type='reset']:hover,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,button[disabled]:focus,input[type='button'][disabled]:focus,input[type='reset'][disabled]:focus,input[type='submit'][disabled]:focus,.button[disabled]:hover,button[disabled]:hover,input[type='button'][disabled]:hover,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:hover{background-color:#9b4dca;border-color:#9b4dca}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#9b4dca}.button.button-outline:focus,button.button-outline:focus,input[type='button'].button-outline:focus,input[type='reset'].button-outline:focus,input[type='submit'].button-outline:focus,.button.button-outline:hover,button.button-outline:hover,input[type='button'].button-outline:hover,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,button.button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#9b4dca}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#9b4dca}.button.button-clear:focus,button.button-clear:focus,input[type='button'].button-clear:focus,input[type='reset'].button-clear:focus,input[type='submit'].button-clear:focus,.button.button-clear:hover,button.button-clear:hover,input[type='button'].button-clear:hover,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,button.button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:hover{color:#9b4dca}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:.3rem solid #9b4dca;overflow-y:hidden}pre > code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:.1rem solid #f4f5f6;margin:3rem 0}input[type='color'],input[type='date'],input[type='datetime'],input[type='datetime-local'],input[type='email'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],input[type='week'],input:not([type]),textarea,select{-webkit-appearance:none;background-color:transparent;border:.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1rem .7rem;width:100%}input[type='color']:focus,input[type='date']:focus,input[type='datetime']:focus,input[type='datetime-local']:focus,input[type='email']:focus,input[type='month']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,input[type='week']:focus,input:not([type]):focus,textarea:focus,select:focus{border-color:#9b4dca;outline:0}select{background:url(\"data:image/svg+xml;utf8,\") center right no-repeat;padding-right:3rem}select:focus{background-image:url(\"data:image/svg+xml;utf8,\")}select[multiple]{background:none;height:auto}textarea{min-height:6.5rem}label,legend{display:block;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}fieldset{border-width:0;padding:0}input[type='checkbox'],input[type='radio']{display:inline}.label-inline{display:inline-block;font-weight:normal;margin-left:.5rem}.container{margin:0 auto;max-width:112rem;padding:0 2rem;position:relative;width:100%}.row{display:flex;flex-direction:column;padding:0;width:100%}.row.row-no-padding{padding:0}.row.row-no-padding> .column{padding:0}.row.row-wrap{flex-wrap:wrap}.row.row-top{align-items:flex-start}.row.row-bottom{align-items:flex-end}.row.row-center{align-items:center}.row.row-stretch{align-items:stretch}.row.row-baseline{align-items:baseline}.row .column{display:block;flex:1 1 auto;margin-left:0;max-width:100%;width:100%}.row .column.column-offset-10{margin-left:10%}.row .column.column-offset-20{margin-left:20%}.row .column.column-offset-25{margin-left:25%}.row .column.column-offset-33,.row .column.column-offset-34{margin-left:33.3333%}.row .column.column-offset-40{margin-left:40%}.row .column.column-offset-50{margin-left:50%}.row .column.column-offset-60{margin-left:60%}.row .column.column-offset-66,.row .column.column-offset-67{margin-left:66.6666%}.row .column.column-offset-75{margin-left:75%}.row .column.column-offset-80{margin-left:80%}.row .column.column-offset-90{margin-left:90%}.row .column.column-10{flex:0 0 10%;max-width:10%}.row .column.column-20{flex:0 0 20%;max-width:20%}.row .column.column-25{flex:0 0 25%;max-width:25%}.row .column.column-33,.row .column.column-34{flex:0 0 33.3333%;max-width:33.3333%}.row .column.column-40{flex:0 0 40%;max-width:40%}.row .column.column-50{flex:0 0 50%;max-width:50%}.row .column.column-60{flex:0 0 60%;max-width:60%}.row .column.column-66,.row .column.column-67{flex:0 0 66.6666%;max-width:66.6666%}.row .column.column-75{flex:0 0 75%;max-width:75%}.row .column.column-80{flex:0 0 80%;max-width:80%}.row .column.column-90{flex:0 0 90%;max-width:90%}.row .column .column-top{align-self:flex-start}.row .column .column-bottom{align-self:flex-end}.row .column .column-center{align-self:center}@media (min-width:40rem){.row{flex-direction:row;margin-left:-1rem;width:calc(100% + 2rem)}.row .column{margin-bottom:inherit;padding:0 1rem}}a{color:#9b4dca;text-decoration:none}a:focus,a:hover{color:#606c76}dl,ol,ul{list-style:none;margin-top:0;padding-left:0}dl dl,ol dl,ul dl,dl ol,ol ol,ul ol,dl ul,ol ul,ul ul{font-size:90%;margin:1.5rem 0 1.5rem 3rem}ol{list-style:decimal inside}ul{list-style:circle inside}.button,button,dd,dt,li{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}table{border-spacing:0;display:block;overflow-x:auto;text-align:left;width:100%}td,th{border-bottom:.1rem solid #e1e1e1;padding:1.2rem 1.5rem}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}@media (min-width:40rem){table{display:table;overflow-x:initial}}b,strong{font-weight:bold}p{margin-top:0}h1,h2,h3,h4,h5,h6{font-weight:300;letter-spacing:-.1rem;margin-bottom:2rem;margin-top:0}h1{font-size:4.6rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:2.8rem;line-height:1.3}h4{font-size:2.2rem;letter-spacing:-.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-.05rem;line-height:1.5}h6{font-size:1.6rem;letter-spacing:0;line-height:1.4}img{max-width:100%}.clearfix:after{clear:both;content:' ';display:table}.float-left{float:left}.float-right{float:right}"]} -------------------------------------------------------------------------------- /test/milligram.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *:before { 4 | box-sizing: inherit; 5 | } 6 | html { 7 | box-sizing: border-box; 8 | font-size: 62.5%; 9 | } 10 | body { 11 | color: #606c76; 12 | font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 13 | font-size: 1.6em; 14 | font-weight: 300; 15 | letter-spacing: 0.01em; 16 | line-height: 1.6; 17 | } 18 | blockquote { 19 | border-left: 0.3rem solid #d1d1d1; 20 | margin-left: 0; 21 | margin-right: 0; 22 | padding: 1rem 1.5rem; 23 | } 24 | blockquote *:last-child { 25 | margin-bottom: 0; 26 | } 27 | .button, 28 | button, 29 | input[type='button'], 30 | input[type='reset'], 31 | input[type='submit'] { 32 | background-color: #9b4dca; 33 | border: 0.1rem solid #9b4dca; 34 | border-radius: 0.4rem; 35 | color: #fff; 36 | cursor: pointer; 37 | display: inline-block; 38 | font-size: 1.1rem; 39 | font-weight: 700; 40 | height: 3.8rem; 41 | letter-spacing: 0.1rem; 42 | line-height: 3.8rem; 43 | padding: 0 3rem; 44 | text-align: center; 45 | text-decoration: none; 46 | text-transform: uppercase; 47 | white-space: nowrap; 48 | } 49 | .button:focus, 50 | button:focus, 51 | input[type='button']:focus, 52 | input[type='reset']:focus, 53 | input[type='submit']:focus, 54 | .button:hover, 55 | button:hover, 56 | input[type='button']:hover, 57 | input[type='reset']:hover, 58 | input[type='submit']:hover { 59 | background-color: #606c76; 60 | border-color: #606c76; 61 | color: #fff; 62 | outline: 0; 63 | } 64 | .button[disabled], 65 | button[disabled], 66 | input[type='button'][disabled], 67 | input[type='reset'][disabled], 68 | input[type='submit'][disabled] { 69 | cursor: default; 70 | opacity: 0.5; 71 | } 72 | .button[disabled]:focus, 73 | button[disabled]:focus, 74 | input[type='button'][disabled]:focus, 75 | input[type='reset'][disabled]:focus, 76 | input[type='submit'][disabled]:focus, 77 | .button[disabled]:hover, 78 | button[disabled]:hover, 79 | input[type='button'][disabled]:hover, 80 | input[type='reset'][disabled]:hover, 81 | input[type='submit'][disabled]:hover { 82 | background-color: #9b4dca; 83 | border-color: #9b4dca; 84 | } 85 | .button.button-outline, 86 | button.button-outline, 87 | input[type='button'].button-outline, 88 | input[type='reset'].button-outline, 89 | input[type='submit'].button-outline { 90 | background-color: transparent; 91 | color: #9b4dca; 92 | } 93 | .button.button-outline:focus, 94 | button.button-outline:focus, 95 | input[type='button'].button-outline:focus, 96 | input[type='reset'].button-outline:focus, 97 | input[type='submit'].button-outline:focus, 98 | .button.button-outline:hover, 99 | button.button-outline:hover, 100 | input[type='button'].button-outline:hover, 101 | input[type='reset'].button-outline:hover, 102 | input[type='submit'].button-outline:hover { 103 | background-color: transparent; 104 | border-color: #606c76; 105 | color: #606c76; 106 | } 107 | .button.button-outline[disabled]:focus, 108 | button.button-outline[disabled]:focus, 109 | input[type='button'].button-outline[disabled]:focus, 110 | input[type='reset'].button-outline[disabled]:focus, 111 | input[type='submit'].button-outline[disabled]:focus, 112 | .button.button-outline[disabled]:hover, 113 | button.button-outline[disabled]:hover, 114 | input[type='button'].button-outline[disabled]:hover, 115 | input[type='reset'].button-outline[disabled]:hover, 116 | input[type='submit'].button-outline[disabled]:hover { 117 | border-color: inherit; 118 | color: #9b4dca; 119 | } 120 | .button.button-clear, 121 | button.button-clear, 122 | input[type='button'].button-clear, 123 | input[type='reset'].button-clear, 124 | input[type='submit'].button-clear { 125 | background-color: transparent; 126 | border-color: transparent; 127 | color: #9b4dca; 128 | } 129 | .button.button-clear:focus, 130 | button.button-clear:focus, 131 | input[type='button'].button-clear:focus, 132 | input[type='reset'].button-clear:focus, 133 | input[type='submit'].button-clear:focus, 134 | .button.button-clear:hover, 135 | button.button-clear:hover, 136 | input[type='button'].button-clear:hover, 137 | input[type='reset'].button-clear:hover, 138 | input[type='submit'].button-clear:hover { 139 | background-color: transparent; 140 | border-color: transparent; 141 | color: #606c76; 142 | } 143 | .button.button-clear[disabled]:focus, 144 | button.button-clear[disabled]:focus, 145 | input[type='button'].button-clear[disabled]:focus, 146 | input[type='reset'].button-clear[disabled]:focus, 147 | input[type='submit'].button-clear[disabled]:focus, 148 | .button.button-clear[disabled]:hover, 149 | button.button-clear[disabled]:hover, 150 | input[type='button'].button-clear[disabled]:hover, 151 | input[type='reset'].button-clear[disabled]:hover, 152 | input[type='submit'].button-clear[disabled]:hover { 153 | color: #9b4dca; 154 | } 155 | code { 156 | background: #f4f5f6; 157 | border-radius: 0.4rem; 158 | font-size: 86%; 159 | margin: 0 0.2rem; 160 | padding: 0.2rem 0.5rem; 161 | white-space: nowrap; 162 | } 163 | pre { 164 | background: #f4f5f6; 165 | border-left: 0.3rem solid #9b4dca; 166 | overflow-y: hidden; 167 | } 168 | pre > code { 169 | border-radius: 0; 170 | display: block; 171 | padding: 1rem 1.5rem; 172 | white-space: pre; 173 | } 174 | hr { 175 | border: 0; 176 | border-top: 0.1rem solid #f4f5f6; 177 | margin: 3rem 0; 178 | } 179 | input[type='color'], 180 | input[type='date'], 181 | input[type='datetime'], 182 | input[type='datetime-local'], 183 | input[type='email'], 184 | input[type='month'], 185 | input[type='number'], 186 | input[type='password'], 187 | input[type='search'], 188 | input[type='tel'], 189 | input[type='text'], 190 | input[type='url'], 191 | input[type='week'], 192 | input:not([type]), 193 | textarea, 194 | select { 195 | -webkit-appearance: none; 196 | background-color: transparent; 197 | border: 0.1rem solid #d1d1d1; 198 | border-radius: 0.4rem; 199 | box-shadow: none; 200 | box-sizing: inherit; 201 | height: 3.8rem; 202 | padding: 0.6rem 1rem 0.7rem; 203 | width: 100%; 204 | } 205 | input[type='color']:focus, 206 | input[type='date']:focus, 207 | input[type='datetime']:focus, 208 | input[type='datetime-local']:focus, 209 | input[type='email']:focus, 210 | input[type='month']:focus, 211 | input[type='number']:focus, 212 | input[type='password']:focus, 213 | input[type='search']:focus, 214 | input[type='tel']:focus, 215 | input[type='text']:focus, 216 | input[type='url']:focus, 217 | input[type='week']:focus, 218 | input:not([type]):focus, 219 | textarea:focus, 220 | select:focus { 221 | border-color: #9b4dca; 222 | outline: 0; 223 | } 224 | select { 225 | background: url("data:image/svg+xml;utf8,") center right no-repeat; 226 | padding-right: 3rem; 227 | } 228 | select:focus { 229 | background-image: url("data:image/svg+xml;utf8,"); 230 | } 231 | select[multiple] { 232 | background: none; 233 | height: auto; 234 | } 235 | textarea { 236 | min-height: 6.5rem; 237 | } 238 | label, 239 | legend { 240 | display: block; 241 | font-size: 1.6rem; 242 | font-weight: 700; 243 | margin-bottom: 0.5rem; 244 | } 245 | fieldset { 246 | border-width: 0; 247 | padding: 0; 248 | } 249 | input[type='checkbox'], 250 | input[type='radio'] { 251 | display: inline; 252 | } 253 | .label-inline { 254 | display: inline-block; 255 | font-weight: normal; 256 | margin-left: 0.5rem; 257 | } 258 | .container { 259 | margin: 0 auto; 260 | max-width: 112rem; 261 | padding: 0 2rem; 262 | position: relative; 263 | width: 100%; 264 | } 265 | .row { 266 | display: flex; 267 | flex-direction: column; 268 | padding: 0; 269 | width: 100%; 270 | } 271 | .row.row-no-padding { 272 | padding: 0; 273 | } 274 | .row.row-no-padding> .column { 275 | padding: 0; 276 | } 277 | .row.row-wrap { 278 | flex-wrap: wrap; 279 | } 280 | .row.row-top { 281 | align-items: flex-start; 282 | } 283 | .row.row-bottom { 284 | align-items: flex-end; 285 | } 286 | .row.row-center { 287 | align-items: center; 288 | } 289 | .row.row-stretch { 290 | align-items: stretch; 291 | } 292 | .row.row-baseline { 293 | align-items: baseline; 294 | } 295 | .row .column { 296 | display: block; 297 | flex: 1 1 auto; 298 | margin-left: 0; 299 | max-width: 100%; 300 | width: 100%; 301 | } 302 | .row .column.column-offset-10 { 303 | margin-left: 10%; 304 | } 305 | .row .column.column-offset-20 { 306 | margin-left: 20%; 307 | } 308 | .row .column.column-offset-25 { 309 | margin-left: 25%; 310 | } 311 | .row .column.column-offset-33, 312 | .row .column.column-offset-34 { 313 | margin-left: 33.3333%; 314 | } 315 | .row .column.column-offset-40 { 316 | margin-left: 40%; 317 | } 318 | .row .column.column-offset-50 { 319 | margin-left: 50%; 320 | } 321 | .row .column.column-offset-60 { 322 | margin-left: 60%; 323 | } 324 | .row .column.column-offset-66, 325 | .row .column.column-offset-67 { 326 | margin-left: 66.6666%; 327 | } 328 | .row .column.column-offset-75 { 329 | margin-left: 75%; 330 | } 331 | .row .column.column-offset-80 { 332 | margin-left: 80%; 333 | } 334 | .row .column.column-offset-90 { 335 | margin-left: 90%; 336 | } 337 | .row .column.column-10 { 338 | flex: 0 0 10%; 339 | max-width: 10%; 340 | } 341 | .row .column.column-20 { 342 | flex: 0 0 20%; 343 | max-width: 20%; 344 | } 345 | .row .column.column-25 { 346 | flex: 0 0 25%; 347 | max-width: 25%; 348 | } 349 | .row .column.column-33, 350 | .row .column.column-34 { 351 | flex: 0 0 33.3333%; 352 | max-width: 33.3333%; 353 | } 354 | .row .column.column-40 { 355 | flex: 0 0 40%; 356 | max-width: 40%; 357 | } 358 | .row .column.column-50 { 359 | flex: 0 0 50%; 360 | max-width: 50%; 361 | } 362 | .row .column.column-60 { 363 | flex: 0 0 60%; 364 | max-width: 60%; 365 | } 366 | .row .column.column-66, 367 | .row .column.column-67 { 368 | flex: 0 0 66.6666%; 369 | max-width: 66.6666%; 370 | } 371 | .row .column.column-75 { 372 | flex: 0 0 75%; 373 | max-width: 75%; 374 | } 375 | .row .column.column-80 { 376 | flex: 0 0 80%; 377 | max-width: 80%; 378 | } 379 | .row .column.column-90 { 380 | flex: 0 0 90%; 381 | max-width: 90%; 382 | } 383 | .row .column .column-top { 384 | align-self: flex-start; 385 | } 386 | .row .column .column-bottom { 387 | align-self: flex-end; 388 | } 389 | .row .column .column-center { 390 | align-self: center; 391 | } 392 | @media (min-width: 40rem) { 393 | .row { 394 | flex-direction: row; 395 | margin-left: -1rem; 396 | width: calc(100% + 2rem); 397 | } 398 | .row .column { 399 | margin-bottom: inherit; 400 | padding: 0 1rem; 401 | } 402 | } 403 | a { 404 | color: #9b4dca; 405 | text-decoration: none; 406 | } 407 | a:focus, 408 | a:hover { 409 | color: #606c76; 410 | } 411 | dl, 412 | ol, 413 | ul { 414 | list-style: none; 415 | margin-top: 0; 416 | padding-left: 0; 417 | } 418 | dl dl, 419 | ol dl, 420 | ul dl, 421 | dl ol, 422 | ol ol, 423 | ul ol, 424 | dl ul, 425 | ol ul, 426 | ul ul { 427 | font-size: 90%; 428 | margin: 1.5rem 0 1.5rem 3rem; 429 | } 430 | ol { 431 | list-style: decimal inside; 432 | } 433 | ul { 434 | list-style: circle inside; 435 | } 436 | .button, 437 | button, 438 | dd, 439 | dt, 440 | li { 441 | margin-bottom: 1rem; 442 | } 443 | fieldset, 444 | input, 445 | select, 446 | textarea { 447 | margin-bottom: 1.5rem; 448 | } 449 | blockquote, 450 | dl, 451 | figure, 452 | form, 453 | ol, 454 | p, 455 | pre, 456 | table, 457 | ul { 458 | margin-bottom: 2.5rem; 459 | } 460 | table { 461 | border-spacing: 0; 462 | display: block; 463 | overflow-x: auto; 464 | text-align: left; 465 | width: 100%; 466 | } 467 | td, 468 | th { 469 | border-bottom: 0.1rem solid #e1e1e1; 470 | padding: 1.2rem 1.5rem; 471 | } 472 | td:first-child, 473 | th:first-child { 474 | padding-left: 0; 475 | } 476 | td:last-child, 477 | th:last-child { 478 | padding-right: 0; 479 | } 480 | @media (min-width: 40rem) { 481 | table { 482 | display: table; 483 | overflow-x: initial; 484 | } 485 | } 486 | b, 487 | strong { 488 | font-weight: bold; 489 | } 490 | p { 491 | margin-top: 0; 492 | } 493 | h1, 494 | h2, 495 | h3, 496 | h4, 497 | h5, 498 | h6 { 499 | font-weight: 300; 500 | letter-spacing: -0.1rem; 501 | margin-bottom: 2rem; 502 | margin-top: 0; 503 | } 504 | h1 { 505 | font-size: 4.6rem; 506 | line-height: 1.2; 507 | } 508 | h2 { 509 | font-size: 3.6rem; 510 | line-height: 1.25; 511 | } 512 | h3 { 513 | font-size: 2.8rem; 514 | line-height: 1.3; 515 | } 516 | h4 { 517 | font-size: 2.2rem; 518 | letter-spacing: -0.08rem; 519 | line-height: 1.35; 520 | } 521 | h5 { 522 | font-size: 1.8rem; 523 | letter-spacing: -0.05rem; 524 | line-height: 1.5; 525 | } 526 | h6 { 527 | font-size: 1.6rem; 528 | letter-spacing: 0; 529 | line-height: 1.4; 530 | } 531 | img { 532 | max-width: 100%; 533 | } 534 | .clearfix:after { 535 | clear: both; 536 | content: ' '; 537 | display: table; 538 | } 539 | .float-left { 540 | float: left; 541 | } 542 | .float-right { 543 | float: right; 544 | } 545 | 546 | /*# sourceMappingURL=milligram.css.map */ -------------------------------------------------------------------------------- /test/milligram.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["milligram.css"],"names":[],"mappings":"AAAA;;;EAGE,mBAAmB;AACrB;AACA;EACE,sBAAsB;EACtB,gBAAgB;AAClB;AACA;EACE,cAAc;EACd,yEAAyE;EACzE,gBAAgB;EAChB,gBAAgB;EAChB,sBAAsB;EACtB,gBAAgB;AAClB;AACA;EACE,iCAAiC;EACjC,cAAc;EACd,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;;;;;EAKE,yBAAyB;EACzB,4BAA4B;EAC5B,qBAAqB;EACrB,WAAW;EACX,eAAe;EACf,qBAAqB;EACrB,iBAAiB;EACjB,gBAAgB;EAChB,cAAc;EACd,sBAAsB;EACtB,mBAAmB;EACnB,eAAe;EACf,kBAAkB;EAClB,qBAAqB;EACrB,yBAAyB;EACzB,mBAAmB;AACrB;AACA;;;;;;;;;;EAUE,yBAAyB;EACzB,qBAAqB;EACrB,WAAW;EACX,UAAU;AACZ;AACA;;;;;EAKE,eAAe;EACf,YAAY;AACd;AACA;;;;;;;;;;EAUE,yBAAyB;EACzB,qBAAqB;AACvB;AACA;;;;;EAKE,6BAA6B;EAC7B,cAAc;AAChB;AACA;;;;;;;;;;EAUE,6BAA6B;EAC7B,qBAAqB;EACrB,cAAc;AAChB;AACA;;;;;;;;;;EAUE,qBAAqB;EACrB,cAAc;AAChB;AACA;;;;;EAKE,6BAA6B;EAC7B,yBAAyB;EACzB,cAAc;AAChB;AACA;;;;;;;;;;EAUE,6BAA6B;EAC7B,yBAAyB;EACzB,cAAc;AAChB;AACA;;;;;;;;;;EAUE,cAAc;AAChB;AACA;EACE,mBAAmB;EACnB,qBAAqB;EACrB,cAAc;EACd,gBAAgB;EAChB,sBAAsB;EACtB,mBAAmB;AACrB;AACA;EACE,mBAAmB;EACnB,iCAAiC;EACjC,kBAAkB;AACpB;AACA;EACE,gBAAgB;EAChB,cAAc;EACd,oBAAoB;EACpB,gBAAgB;AAClB;AACA;EACE,SAAS;EACT,gCAAgC;EAChC,cAAc;AAChB;AACA;;;;;;;;;;;;;;;;EAgBE,wBAAwB;EACxB,6BAA6B;EAC7B,4BAA4B;EAC5B,qBAAqB;EACrB,gBAAgB;EAChB,mBAAmB;EACnB,cAAc;EACd,2BAA2B;EAC3B,WAAW;AACb;AACA;;;;;;;;;;;;;;;;EAgBE,qBAAqB;EACrB,UAAU;AACZ;AACA;EACE,qLAAqL;EACrL,mBAAmB;AACrB;AACA;EACE,oKAAoK;AACtK;AACA;EACE,gBAAgB;EAChB,YAAY;AACd;AACA;EACE,kBAAkB;AACpB;AACA;;EAEE,cAAc;EACd,iBAAiB;EACjB,gBAAgB;EAChB,qBAAqB;AACvB;AACA;EACE,eAAe;EACf,UAAU;AACZ;AACA;;EAEE,eAAe;AACjB;AACA;EACE,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;AACrB;AACA;EACE,cAAc;EACd,iBAAiB;EACjB,eAAe;EACf,kBAAkB;EAClB,WAAW;AACb;AACA;EACE,aAAa;EACb,sBAAsB;EACtB,UAAU;EACV,WAAW;AACb;AACA;EACE,UAAU;AACZ;AACA;EACE,UAAU;AACZ;AACA;EACE,eAAe;AACjB;AACA;EACE,uBAAuB;AACzB;AACA;EACE,qBAAqB;AACvB;AACA;EACE,mBAAmB;AACrB;AACA;EACE,oBAAoB;AACtB;AACA;EACE,qBAAqB;AACvB;AACA;EACE,cAAc;EACd,cAAc;EACd,cAAc;EACd,eAAe;EACf,WAAW;AACb;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;;EAEE,qBAAqB;AACvB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;;EAEE,qBAAqB;AACvB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,cAAc;AAChB;AACA;EACE,aAAa;EACb,cAAc;AAChB;AACA;EACE,aAAa;EACb,cAAc;AAChB;AACA;;EAEE,kBAAkB;EAClB,mBAAmB;AACrB;AACA;EACE,aAAa;EACb,cAAc;AAChB;AACA;EACE,aAAa;EACb,cAAc;AAChB;AACA;EACE,aAAa;EACb,cAAc;AAChB;AACA;;EAEE,kBAAkB;EAClB,mBAAmB;AACrB;AACA;EACE,aAAa;EACb,cAAc;AAChB;AACA;EACE,aAAa;EACb,cAAc;AAChB;AACA;EACE,aAAa;EACb,cAAc;AAChB;AACA;EACE,sBAAsB;AACxB;AACA;EACE,oBAAoB;AACtB;AACA;EACE,kBAAkB;AACpB;AACA;EACE;IACE,mBAAmB;IACnB,kBAAkB;IAClB,wBAAwB;EAC1B;EACA;IACE,sBAAsB;IACtB,eAAe;EACjB;AACF;AACA;EACE,cAAc;EACd,qBAAqB;AACvB;AACA;;EAEE,cAAc;AAChB;AACA;;;EAGE,gBAAgB;EAChB,aAAa;EACb,eAAe;AACjB;AACA;;;;;;;;;EASE,cAAc;EACd,4BAA4B;AAC9B;AACA;EACE,0BAA0B;AAC5B;AACA;EACE,yBAAyB;AAC3B;AACA;;;;;EAKE,mBAAmB;AACrB;AACA;;;;EAIE,qBAAqB;AACvB;AACA;;;;;;;;;EASE,qBAAqB;AACvB;AACA;EACE,iBAAiB;EACjB,cAAc;EACd,gBAAgB;EAChB,gBAAgB;EAChB,WAAW;AACb;AACA;;EAEE,mCAAmC;EACnC,sBAAsB;AACxB;AACA;;EAEE,eAAe;AACjB;AACA;;EAEE,gBAAgB;AAClB;AACA;EACE;IACE,cAAc;IACd,mBAAmB;EACrB;AACF;AACA;;EAEE,iBAAiB;AACnB;AACA;EACE,aAAa;AACf;AACA;;;;;;EAME,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;AACf;AACA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;AACA;EACE,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;AACA;EACE,iBAAiB;EACjB,wBAAwB;EACxB,iBAAiB;AACnB;AACA;EACE,iBAAiB;EACjB,wBAAwB;EACxB,gBAAgB;AAClB;AACA;EACE,iBAAiB;EACjB,iBAAiB;EACjB,gBAAgB;AAClB;AACA;EACE,eAAe;AACjB;AACA;EACE,WAAW;EACX,YAAY;EACZ,cAAc;AAChB;AACA;EACE,WAAW;AACb;AACA;EACE,YAAY;AACd","file":"milligram.css","sourcesContent":["*,\n*:after,\n*:before {\n box-sizing: inherit;\n}\nhtml {\n box-sizing: border-box;\n font-size: 62.5%;\n}\nbody {\n color: #606c76;\n font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;\n font-size: 1.6em;\n font-weight: 300;\n letter-spacing: 0.01em;\n line-height: 1.6;\n}\nblockquote {\n border-left: 0.3rem solid #d1d1d1;\n margin-left: 0;\n margin-right: 0;\n padding: 1rem 1.5rem;\n}\nblockquote *:last-child {\n margin-bottom: 0;\n}\n.button,\nbutton,\ninput[type='button'],\ninput[type='reset'],\ninput[type='submit'] {\n background-color: #9b4dca;\n border: 0.1rem solid #9b4dca;\n border-radius: 0.4rem;\n color: #fff;\n cursor: pointer;\n display: inline-block;\n font-size: 1.1rem;\n font-weight: 700;\n height: 3.8rem;\n letter-spacing: 0.1rem;\n line-height: 3.8rem;\n padding: 0 3rem;\n text-align: center;\n text-decoration: none;\n text-transform: uppercase;\n white-space: nowrap;\n}\n.button:focus,\nbutton:focus,\ninput[type='button']:focus,\ninput[type='reset']:focus,\ninput[type='submit']:focus,\n.button:hover,\nbutton:hover,\ninput[type='button']:hover,\ninput[type='reset']:hover,\ninput[type='submit']:hover {\n background-color: #606c76;\n border-color: #606c76;\n color: #fff;\n outline: 0;\n}\n.button[disabled],\nbutton[disabled],\ninput[type='button'][disabled],\ninput[type='reset'][disabled],\ninput[type='submit'][disabled] {\n cursor: default;\n opacity: 0.5;\n}\n.button[disabled]:focus,\nbutton[disabled]:focus,\ninput[type='button'][disabled]:focus,\ninput[type='reset'][disabled]:focus,\ninput[type='submit'][disabled]:focus,\n.button[disabled]:hover,\nbutton[disabled]:hover,\ninput[type='button'][disabled]:hover,\ninput[type='reset'][disabled]:hover,\ninput[type='submit'][disabled]:hover {\n background-color: #9b4dca;\n border-color: #9b4dca;\n}\n.button.button-outline,\nbutton.button-outline,\ninput[type='button'].button-outline,\ninput[type='reset'].button-outline,\ninput[type='submit'].button-outline {\n background-color: transparent;\n color: #9b4dca;\n}\n.button.button-outline:focus,\nbutton.button-outline:focus,\ninput[type='button'].button-outline:focus,\ninput[type='reset'].button-outline:focus,\ninput[type='submit'].button-outline:focus,\n.button.button-outline:hover,\nbutton.button-outline:hover,\ninput[type='button'].button-outline:hover,\ninput[type='reset'].button-outline:hover,\ninput[type='submit'].button-outline:hover {\n background-color: transparent;\n border-color: #606c76;\n color: #606c76;\n}\n.button.button-outline[disabled]:focus,\nbutton.button-outline[disabled]:focus,\ninput[type='button'].button-outline[disabled]:focus,\ninput[type='reset'].button-outline[disabled]:focus,\ninput[type='submit'].button-outline[disabled]:focus,\n.button.button-outline[disabled]:hover,\nbutton.button-outline[disabled]:hover,\ninput[type='button'].button-outline[disabled]:hover,\ninput[type='reset'].button-outline[disabled]:hover,\ninput[type='submit'].button-outline[disabled]:hover {\n border-color: inherit;\n color: #9b4dca;\n}\n.button.button-clear,\nbutton.button-clear,\ninput[type='button'].button-clear,\ninput[type='reset'].button-clear,\ninput[type='submit'].button-clear {\n background-color: transparent;\n border-color: transparent;\n color: #9b4dca;\n}\n.button.button-clear:focus,\nbutton.button-clear:focus,\ninput[type='button'].button-clear:focus,\ninput[type='reset'].button-clear:focus,\ninput[type='submit'].button-clear:focus,\n.button.button-clear:hover,\nbutton.button-clear:hover,\ninput[type='button'].button-clear:hover,\ninput[type='reset'].button-clear:hover,\ninput[type='submit'].button-clear:hover {\n background-color: transparent;\n border-color: transparent;\n color: #606c76;\n}\n.button.button-clear[disabled]:focus,\nbutton.button-clear[disabled]:focus,\ninput[type='button'].button-clear[disabled]:focus,\ninput[type='reset'].button-clear[disabled]:focus,\ninput[type='submit'].button-clear[disabled]:focus,\n.button.button-clear[disabled]:hover,\nbutton.button-clear[disabled]:hover,\ninput[type='button'].button-clear[disabled]:hover,\ninput[type='reset'].button-clear[disabled]:hover,\ninput[type='submit'].button-clear[disabled]:hover {\n color: #9b4dca;\n}\ncode {\n background: #f4f5f6;\n border-radius: 0.4rem;\n font-size: 86%;\n margin: 0 0.2rem;\n padding: 0.2rem 0.5rem;\n white-space: nowrap;\n}\npre {\n background: #f4f5f6;\n border-left: 0.3rem solid #9b4dca;\n overflow-y: hidden;\n}\npre > code {\n border-radius: 0;\n display: block;\n padding: 1rem 1.5rem;\n white-space: pre;\n}\nhr {\n border: 0;\n border-top: 0.1rem solid #f4f5f6;\n margin: 3rem 0;\n}\ninput[type='color'],\ninput[type='date'],\ninput[type='datetime'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='url'],\ninput[type='week'],\ninput:not([type]),\ntextarea,\nselect {\n -webkit-appearance: none;\n background-color: transparent;\n border: 0.1rem solid #d1d1d1;\n border-radius: 0.4rem;\n box-shadow: none;\n box-sizing: inherit;\n height: 3.8rem;\n padding: 0.6rem 1rem 0.7rem;\n width: 100%;\n}\ninput[type='color']:focus,\ninput[type='date']:focus,\ninput[type='datetime']:focus,\ninput[type='datetime-local']:focus,\ninput[type='email']:focus,\ninput[type='month']:focus,\ninput[type='number']:focus,\ninput[type='password']:focus,\ninput[type='search']:focus,\ninput[type='tel']:focus,\ninput[type='text']:focus,\ninput[type='url']:focus,\ninput[type='week']:focus,\ninput:not([type]):focus,\ntextarea:focus,\nselect:focus {\n border-color: #9b4dca;\n outline: 0;\n}\nselect {\n background: url(\"data:image/svg+xml;utf8,\") center right no-repeat;\n padding-right: 3rem;\n}\nselect:focus {\n background-image: url(\"data:image/svg+xml;utf8,\");\n}\nselect[multiple] {\n background: none;\n height: auto;\n}\ntextarea {\n min-height: 6.5rem;\n}\nlabel,\nlegend {\n display: block;\n font-size: 1.6rem;\n font-weight: 700;\n margin-bottom: 0.5rem;\n}\nfieldset {\n border-width: 0;\n padding: 0;\n}\ninput[type='checkbox'],\ninput[type='radio'] {\n display: inline;\n}\n.label-inline {\n display: inline-block;\n font-weight: normal;\n margin-left: 0.5rem;\n}\n.container {\n margin: 0 auto;\n max-width: 112rem;\n padding: 0 2rem;\n position: relative;\n width: 100%;\n}\n.row {\n display: flex;\n flex-direction: column;\n padding: 0;\n width: 100%;\n}\n.row.row-no-padding {\n padding: 0;\n}\n.row.row-no-padding> .column {\n padding: 0;\n}\n.row.row-wrap {\n flex-wrap: wrap;\n}\n.row.row-top {\n align-items: flex-start;\n}\n.row.row-bottom {\n align-items: flex-end;\n}\n.row.row-center {\n align-items: center;\n}\n.row.row-stretch {\n align-items: stretch;\n}\n.row.row-baseline {\n align-items: baseline;\n}\n.row .column {\n display: block;\n flex: 1 1 auto;\n margin-left: 0;\n max-width: 100%;\n width: 100%;\n}\n.row .column.column-offset-10 {\n margin-left: 10%;\n}\n.row .column.column-offset-20 {\n margin-left: 20%;\n}\n.row .column.column-offset-25 {\n margin-left: 25%;\n}\n.row .column.column-offset-33,\n.row .column.column-offset-34 {\n margin-left: 33.3333%;\n}\n.row .column.column-offset-40 {\n margin-left: 40%;\n}\n.row .column.column-offset-50 {\n margin-left: 50%;\n}\n.row .column.column-offset-60 {\n margin-left: 60%;\n}\n.row .column.column-offset-66,\n.row .column.column-offset-67 {\n margin-left: 66.6666%;\n}\n.row .column.column-offset-75 {\n margin-left: 75%;\n}\n.row .column.column-offset-80 {\n margin-left: 80%;\n}\n.row .column.column-offset-90 {\n margin-left: 90%;\n}\n.row .column.column-10 {\n flex: 0 0 10%;\n max-width: 10%;\n}\n.row .column.column-20 {\n flex: 0 0 20%;\n max-width: 20%;\n}\n.row .column.column-25 {\n flex: 0 0 25%;\n max-width: 25%;\n}\n.row .column.column-33,\n.row .column.column-34 {\n flex: 0 0 33.3333%;\n max-width: 33.3333%;\n}\n.row .column.column-40 {\n flex: 0 0 40%;\n max-width: 40%;\n}\n.row .column.column-50 {\n flex: 0 0 50%;\n max-width: 50%;\n}\n.row .column.column-60 {\n flex: 0 0 60%;\n max-width: 60%;\n}\n.row .column.column-66,\n.row .column.column-67 {\n flex: 0 0 66.6666%;\n max-width: 66.6666%;\n}\n.row .column.column-75 {\n flex: 0 0 75%;\n max-width: 75%;\n}\n.row .column.column-80 {\n flex: 0 0 80%;\n max-width: 80%;\n}\n.row .column.column-90 {\n flex: 0 0 90%;\n max-width: 90%;\n}\n.row .column .column-top {\n align-self: flex-start;\n}\n.row .column .column-bottom {\n align-self: flex-end;\n}\n.row .column .column-center {\n align-self: center;\n}\n@media (min-width: 40rem) {\n .row {\n flex-direction: row;\n margin-left: -1rem;\n width: calc(100% + 2rem);\n }\n .row .column {\n margin-bottom: inherit;\n padding: 0 1rem;\n }\n}\na {\n color: #9b4dca;\n text-decoration: none;\n}\na:focus,\na:hover {\n color: #606c76;\n}\ndl,\nol,\nul {\n list-style: none;\n margin-top: 0;\n padding-left: 0;\n}\ndl dl,\nol dl,\nul dl,\ndl ol,\nol ol,\nul ol,\ndl ul,\nol ul,\nul ul {\n font-size: 90%;\n margin: 1.5rem 0 1.5rem 3rem;\n}\nol {\n list-style: decimal inside;\n}\nul {\n list-style: circle inside;\n}\n.button,\nbutton,\ndd,\ndt,\nli {\n margin-bottom: 1rem;\n}\nfieldset,\ninput,\nselect,\ntextarea {\n margin-bottom: 1.5rem;\n}\nblockquote,\ndl,\nfigure,\nform,\nol,\np,\npre,\ntable,\nul {\n margin-bottom: 2.5rem;\n}\ntable {\n border-spacing: 0;\n display: block;\n overflow-x: auto;\n text-align: left;\n width: 100%;\n}\ntd,\nth {\n border-bottom: 0.1rem solid #e1e1e1;\n padding: 1.2rem 1.5rem;\n}\ntd:first-child,\nth:first-child {\n padding-left: 0;\n}\ntd:last-child,\nth:last-child {\n padding-right: 0;\n}\n@media (min-width: 40rem) {\n table {\n display: table;\n overflow-x: initial;\n }\n}\nb,\nstrong {\n font-weight: bold;\n}\np {\n margin-top: 0;\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 300;\n letter-spacing: -0.1rem;\n margin-bottom: 2rem;\n margin-top: 0;\n}\nh1 {\n font-size: 4.6rem;\n line-height: 1.2;\n}\nh2 {\n font-size: 3.6rem;\n line-height: 1.25;\n}\nh3 {\n font-size: 2.8rem;\n line-height: 1.3;\n}\nh4 {\n font-size: 2.2rem;\n letter-spacing: -0.08rem;\n line-height: 1.35;\n}\nh5 {\n font-size: 1.8rem;\n letter-spacing: -0.05rem;\n line-height: 1.5;\n}\nh6 {\n font-size: 1.6rem;\n letter-spacing: 0;\n line-height: 1.4;\n}\nimg {\n max-width: 100%;\n}\n.clearfix:after {\n clear: both;\n content: ' ';\n display: table;\n}\n.float-left {\n float: left;\n}\n.float-right {\n float: right;\n}\n"]} -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Milligram | A minimalist CSS framework. 12 | 13 | 17 | 21 | 22 | 23 | 24 | 25 |
26 | 226 | 227 |
228 |
Examples
229 |

You can view more examples of using Milligram.

230 | 272 |
273 | 274 |
275 |
Contributing
276 |

277 | Want to contribute? Follow these 278 | recommendations. 283 |

284 |
285 | 286 |
287 |
288 |

289 | Designed with ♥ by 290 | CJ Patoilo. Licensed under the 296 | MIT License. 302 |

303 |
304 |
305 |
306 | 307 | 308 | 309 | 310 | --------------------------------------------------------------------------------