AverageMarcus/milligram
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request from milligram/release/v1.4.0

Browse Source 
Milligram v1.4.0
This commit is contained in:
CJ Patoilo 2020-06-01 18:58:49 -03:00 committed by GitHub
commit af339b2c05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
82 changed files with 15024 additions and 7279 deletions
.appveyor.yml.editorconfig.eslintrc
.github
contributing.mdfunding.ymlissue_template.mdpull_request_template.md
.gitignore.gitpod.yml.npmignore.prettierignore.sasslintrc.travis.ymlbackstop.conf.jsbackstop.config.jsbower.jsoncomposer.json
dist
milligram.cssmilligram.css.mapmilligram.min.cssmilligram.min.css.map
example.html
examples
index.html
package-lock.jsonpackage.jspackage.jsonreadme.md
src
_Base.sass_Blockquote.sass_Button.sass_Code.sass_Divider.sass_Form.sass_Grid.sass_Image.sass_Link.sass_List.sass_Spacing.sass_Table.sass_Typography.sass_Utility.sassmilligram.sass
test
index.html
regression
1893383643_Blockquotes_0_blockquotesexample_0_phone.png1893383643_Blockquotes_0_blockquotesexample_1_laptop.png1893383643_Buttons_0_buttonsexample_0_phone.png1893383643_Buttons_0_buttonsexample_1_laptop.png1893383643_Code_0_codeexample_0_phone.png1893383643_Code_0_codeexample_1_laptop.png1893383643_Forms_0_formsexample_0_phone.png1893383643_Forms_0_formsexample_1_laptop.png1893383643_Grids_0_gridsexample_0_phone.png1893383643_Grids_0_gridsexample_1_laptop.png1893383643_Lists_0_listsexample_0_phone.png1893383643_Lists_0_listsexample_1_laptop.png1893383643_Tables_0_tablesexample_0_phone.png1893383643_Tables_0_tablesexample_1_laptop.png1893383643_Typography_0_typographyexample_0_phone.png1893383643_Typography_0_typographyexample_1_laptop.png1893383643_Utilities_0_utilitiesexample_0_phone.png1893383643_Utilities_0_utilitiesexample_1_laptop.png486021560_Blockquotes_0_blockquotesexample_0_phone.png486021560_Blockquotes_0_blockquotesexample_1_laptop.png486021560_Buttons_0_buttonsexample_0_phone.png486021560_Buttons_0_buttonsexample_1_laptop.png486021560_Codes_0_codesexample_0_phone.png486021560_Codes_0_codesexample_1_laptop.png486021560_Forms_0_formsexample_0_phone.png486021560_Forms_0_formsexample_1_laptop.png486021560_Grids_0_gridsexample_0_phone.png486021560_Grids_0_gridsexample_1_laptop.png486021560_Lists_0_listsexample_0_phone.png486021560_Lists_0_listsexample_1_laptop.png486021560_Tables_0_tablesexample_0_phone.png486021560_Tables_0_tablesexample_1_laptop.png486021560_Typography_0_typographyexample_0_phone.png486021560_Typography_0_typographyexample_1_laptop.png486021560_Utilities_0_utilitiesexample_0_phone.png486021560_Utilities_0_utilitiesexample_1_laptop.png
unit
build.jspackages.js
yarn.lock

7
.appveyor.yml

@ -1,17 +1,16 @@
os: Visual Studio 2015 os: Visual Studio 2015
version: "{build}" version: '{build}'
build: off build: off
platform: x64 platform: x64
environment: environment:
matrix: matrix:
- nodejs_version: 10 - nodejs_version: 12
- nodejs_version: 8
install: install:
- ps: Install-Product node $env:nodejs_version x64 - ps: Install-Product node $env:nodejs_version x64
- set CI=true - set CI=true
- npm i -g npm@latest - npm i -g npm@latest
- set PATH=%APPDATA%\npm;%PATH% - set PATH=%APPDATA%\npm;%PATH%
- npm install - npm i
matrix: matrix:
fast_finish: true fast_finish: true
shallow_clone: true shallow_clone: true

14
.editorconfig

@ -1,14 +0,0 @@
root = true
[*]
indent_style = tab
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = null
[{*.yml}]
indent_style = space
indent_size = 2

3
.eslintrc

@ -1,3 +0,0 @@
{
"extends": "styled"
}

46
.github/contributing.md vendored

@ -2,6 +2,7 @@
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. 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.
_Note: For issues relating to the site, please use the [milligram/milligram.github.io](https://github.com/milligram/milligram.github.io)_
## Table of Contents ## Table of Contents
@ -13,12 +14,10 @@ We would love for you to contribute to Milligram and help us make this even bett
- [Code of Conduct](#code-of-conduct) - [Code of Conduct](#code-of-conduct)
- [License](#license) - [License](#license)
## Open an Issue ## Open an Issue
[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. [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.
## Submit a Pull Request ## Submit a Pull Request
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. 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.
@ -31,17 +30,13 @@ Try to solve a problem for each pull request, this increases the chances of acce
1. Push to the branch: `git push origin my-feature-name` 1. Push to the branch: `git push origin my-feature-name`
1. Submit a pull request! 1. Submit a pull request!
You can do all of this from yoru browser using Gitpod, the free online dev environment.
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/milligram/milligram)
*Note: For issues relating to the site, please use the [milligram.github.io](https://github.com/milligram/milligram.github.io)*
## Building ## Building
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. 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.
You can do all of this from your browser using Gitpod, the free online dev environment.
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/milligram/milligram)
## Style Guide ## Style Guide
@ -64,37 +59,34 @@ Milligram use [Sass](http://sass-lang.com/) to give super powers to CSS. Look at
.selector-b, .selector-b,
.selector-c, .selector-c,
.selector-d[type='text'] .selector-d[type='text']
box-sizing: border-box box-sizing: border-box
color: #333 color: #333
content: '' content: ''
display: inline-block display: inline-block
font-family: 'Helvetica-Neue', 'Helvetica', 'Arial', sans-serif font-family: 'Helvetica-Neue', 'Helvetica', 'Arial', sans-serif
margin-bottom: 0 margin-bottom: 0
margin-left: 5.0rem margin-left: 5.0rem
.other-selector-a .other-selector-a
background: #fff background: #fff
.other-selector-b .other-selector-b
background: #fff background: #fff
&.increasing-the-specificity &.increasing-the-specificity
color: #000 color: #000
``` ```
*Note: This style guide was inspired by [Idiomatic.css](https://github.com/necolas/idiomatic-css). Milligram uses an `.editorconfig` file, which most editors support, to enforce these coding standards.* _Note: This style guide was inspired by [Idiomatic.css](https://github.com/necolas/idiomatic-css)._
## Test ## Test
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 test` after making changes to the source code. 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.
## Code of Conduct ## Code of Conduct
Help us keep Milligram open and inclusive. Please read and follow our thoughts on [Code of Conduct](http://confcodeofconduct.com/). Help us keep Milligram open and inclusive. Please read and follow our thoughts on [Code of Conduct](http://confcodeofconduct.com/).
## License ## License
By contributing your code, you agree to license your contribution under the [MIT license](../license). By contributing your code, you agree to license your contribution under the [MIT license](../license).

2
.github/funding.yml vendored

@ -1,2 +1,2 @@
patreon: cjpatoilo
open_collective: milligram open_collective: milligram
patreon: cjpatoilo

5
.github/issue_template.md vendored

@ -16,7 +16,6 @@ By contributing your code, you agree to license your contribution under the [MIT
--> -->
### Version info ### Version info
<!-- What versions of the following libraries are you using? Note that your issue may already <!-- What versions of the following libraries are you using? Note that your issue may already
@ -26,22 +25,18 @@ be fixed in the latest versions. -->
**Other (e.g. normalize.css, node.js, npm, bower, browser, operating system) (if applicable):** **Other (e.g. normalize.css, node.js, npm, bower, browser, operating system) (if applicable):**
### Test case ### Test case
<!-- Provide code samples on [Codepen](http://codepen.io/). --> <!-- Provide code samples on [Codepen](http://codepen.io/). -->
### Steps to reproduce ### Steps to reproduce
<!-- Provide the steps needed to reproduce the issue given the above test case. --> <!-- Provide the steps needed to reproduce the issue given the above test case. -->
### Expected behavior ### Expected behavior
<!-- What is the expected behavior? --> <!-- What is the expected behavior? -->
### Actual behavior ### Actual behavior
<!-- What is the actual behavior? --> <!-- What is the actual behavior? -->

3
.github/pull_request_template.md vendored

@ -14,7 +14,7 @@ Try to solve a problem for each pull request, this increases the chances of acce
1. Push to the branch: `git push origin my-feature-name` 1. Push to the branch: `git push origin my-feature-name`
1. Submit a pull request! 1. Submit a pull request!
*Note: For issues relating to the site, please use the [milligram.github.io](https://github.com/milligram/milligram.github.io)* _Note: For issues relating to the site, please use the [milligram/milligram.github.io](https://github.com/milligram/milligram.github.io)_
Code of Conduct Code of Conduct
============================== ==============================
@ -26,7 +26,6 @@ By contributing your code, you agree to license your contribution under the [MIT
--> -->
### Description ### Description
<!-- Are you fixing a bug? Implementing a new feature? Updating the documentation? Describe here something about your changes. Don't forget to add the link to the open issue, or to other pull request related. --> <!-- Are you fixing a bug? Implementing a new feature? Updating the documentation? Describe here something about your changes. Don't forget to add the link to the open issue, or to other pull request related. -->

1
.gitignore vendored

@ -34,6 +34,7 @@ Temporary Items
Thumbs.db Thumbs.db
build/Release build/Release
coverage coverage
dist
ehthumbs.db ehthumbs.db
lib-cov lib-cov
logs logs

12
.gitpod.yml

@ -1,13 +1,13 @@
tasks: tasks:
- init: yarn install - init: yarn install
command: yarn start command: yarn start
# list the ports to be exposed # list the ports to be exposed
ports: ports:
- port: 3000 - port: 3000
onOpen: open-preview onOpen: open-preview
- port: 3001 - port: 3001
onOpen: ignore onOpen: ignore
vscode: vscode:
extensions: extensions:

6
.npmignore

@ -3,14 +3,16 @@
.eslintrc .eslintrc
.github .github
.gitignore .gitignore
.gitpod.yml
.npmignore .npmignore
.nyc_output
.prettierignore
.sasslintrc .sasslintrc
.travis.yml .travis.yml
backstop.conf.js backstop.config.js
bower.json bower.json
changelog.md changelog.md
composer.json composer.json
package.js package.js
package.json package.json
src
test test

2
.prettierignore Normal file

@ -0,0 +1,2 @@
dist
.nyc_output

11
.sasslintrc

@ -1,16 +1,19 @@
######################### #########################
## Sass Lint File ## SASS Lint File
## See rules https://github.com/sasstools/sass-lint/tree/master/docs/rules ## See rules https://github.com/sasstools/sass-lint/tree/master/docs/rules
######################### #########################
# Linter Options # Linter Options
options: options:
# Don't merge default rules # Don't merge default rules
merge-default-rules: false merge-default-rules: false
# File Options # File Options
files: files:
include: 'src/**/*.s+(a|c)ss' include: 'src/**/*.s+(a|c)ss'
ignore: ignore:
- 'node_modules/**/*.*' - 'node_modules'
# Rule Configuration # Rule Configuration
rules: rules:
attribute-quotes: attribute-quotes:
@ -52,9 +55,9 @@ rules:
indentation: indentation:
- 2 - 2
- -
size: 'tab' size: 2
property-sort-order: property-sort-order:
- 1 - 2
- -
order: 'alphabetical' order: 'alphabetical'
ignore-custom-properties: true ignore-custom-properties: true

5
.travis.yml

@ -1,9 +1,10 @@
language: node_js language: node_js
node_js: node_js:
- 10 - 12
- 8
before_install: before_install:
- npm i -g npm@latest - npm i -g npm@latest
cache: cache:
directories: directories:
- node_modules - node_modules
before_script:
- npm run lint

130
backstop.conf.js

@ -1,130 +0,0 @@
'use strict'
const config = {
viewports: [{
name: 'phone',
width: 320,
height: 480
}, {
name: 'laptop',
width: 1280,
height: 800
}],
scenarios: [{
label: 'Typography',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#typography .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null
}, {
label: 'Blockquotes',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#blockquotes .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null
}, {
label: 'Buttons',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#buttons .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null
}, {
label: 'Lists',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#lists .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null
}, {
label: 'Forms',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#forms .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null
}, {
label: 'Tables',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#tables .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null
}, {
label: 'Grids',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#grids .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null
}, {
label: 'Codes',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#codes .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null
}, {
label: 'Utilities',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#utilities .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null
}],
paths: {
bitmaps_reference: 'test/regression',
bitmaps_test: 'node_modules/backstopjs/.tmp/bitmaps_test',
casper_scripts: 'node_modules/backstopjs/.tmp/casper_scripts',
html_report: 'node_modules/backstopjs/.tmp/html_report',
ci_report: 'node_modules/backstopjs/.tmp/ci_report'
},
engine: 'phantomjs',
report: [
'browser',
'CLI',
'CI'
],
casperFlags: [],
debug: false,
port: 3002
}
module.exports = config

138
backstop.config.js Normal file

@ -0,0 +1,138 @@
'use strict'
module.exports = {
viewports: [
{
name: 'phone',
width: 320,
height: 480,
},
{
name: 'laptop',
width: 1280,
height: 800,
},
],
scenarios: [
{
label: 'Typography',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#typography .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null,
},
{
label: 'Blockquotes',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#blockquotes .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null,
},
{
label: 'Buttons',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#buttons .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null,
},
{
label: 'Lists',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#lists .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null,
},
{
label: 'Forms',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#forms .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null,
},
{
label: 'Tables',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#tables .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null,
},
{
label: 'Grids',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#grids .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null,
},
{
label: 'Code',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#code .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null,
},
{
label: 'Utilities',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: [],
selectors: ['#utilities .example'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onReadyScript: null,
onBeforeScript: null,
},
],
paths: {
bitmaps_reference: 'test/regression',
bitmaps_test: 'node_modules/backstopjs/.tmp/bitmaps_test',
casper_scripts: 'node_modules/backstopjs/.tmp/casper_scripts',
html_report: 'node_modules/backstopjs/.tmp/html_report',
ci_report: 'node_modules/backstopjs/.tmp/ci_report',
},
engine: 'phantomjs',
report: ['browser', 'CLI', 'CI'],
casperFlags: [],
debug: false,
port: 3002,
}

79
bower.json

@ -1,50 +1,33 @@
{ {
"name": "milligram", "name": "milligram",
"version": "1.3.0", "version": "1.4.0",
"description": "A minimalist CSS framework.", "description": "A minimalist CSS framework.",
"homepage": "https://milligram.io", "homepage": "https://milligram.io",
"repository": "milligram/milligram", "repository": "milligram/milligram",
"license": "MIT", "license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>", "author": "CJ Patoilo <cjpatoilo@gmail.com>",
"main": "dist/milligram.css", "main": "dist/milligram.css",
"keywords": [ "keywords": [
"bootstrap", "bootstrap",
"css", "css",
"css3", "css3",
"flexbox", "flexbox",
"front-end", "front-end",
"framework", "framework",
"html", "html",
"html5", "html5",
"kickstarter", "kickstarter",
"less", "less",
"responsive", "responsive",
"mobile", "mobile",
"mobile-first", "mobile-first",
"postcss", "postcss",
"responsive", "responsive",
"sass", "sass",
"scss", "scss",
"stylus" "stylus"
], ],
"ignore": [ "dependencies": {
".appveyor.yml", "normalize.css": "~8.0.1"
".editorconfig", }
".eslintrc",
".github",
".gitignore",
".sasslintrc",
".travis.yml",
"backstop.conf.js",
"bower.json",
"changelog.md",
"composer.json",
"package.js",
"package.json",
"src",
"test"
],
"dependencies": {
"normalize.css": "~5.0.0"
}
} }

79
composer.json

@ -1,50 +1,33 @@
{ {
"name": "milligram/milligram", "name": "milligram/milligram",
"version": "1.3.0", "version": "1.4.0",
"description": "A minimalist CSS framework.", "description": "A minimalist CSS framework.",
"homepage": "https://milligram.io", "homepage": "https://milligram.io",
"repository": "milligram/milligram", "repository": "milligram/milligram",
"license": "MIT", "license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>", "author": "CJ Patoilo <cjpatoilo@gmail.com>",
"main": "dist/milligram.css", "main": "dist/milligram.css",
"keywords": [ "keywords": [
"bootstrap", "bootstrap",
"css", "css",
"css3", "css3",
"flexbox", "flexbox",
"front-end", "front-end",
"framework", "framework",
"html", "html",
"html5", "html5",
"kickstarter", "kickstarter",
"less", "less",
"responsive", "responsive",
"mobile", "mobile",
"mobile-first", "mobile-first",
"postcss", "postcss",
"responsive", "responsive",
"sass", "sass",
"scss", "scss",
"stylus" "stylus"
], ],
"ignore": [ "dependencies": {
".appveyor.yml", "normalize.css": "~8.0.1"
".editorconfig", }
".eslintrc",
".github",
".gitignore",
".sasslintrc",
".travis.yml",
"backstop.conf.js",
"bower.json",
"changelog.md",
"composer.json",
"package.js",
"package.json",
"src",
"test"
],
"dependencies": {
"normalize.css": "~5.0.0"
}
} }

616
dist/milligram.css vendored

@ -1,616 +0,0 @@
/*!
* Milligram v1.3.0
* https://milligram.github.io
*
* Copyright (c) 2018 CJ Patoilo
* Licensed under the MIT license
*/
*,
*: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: 0.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: 0.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 3.0rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
.button:focus, .button:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
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]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus,
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:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type='button'].button-outline:focus,
input[type='button'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus,
input[type='submit'].button-outline:hover {
background-color: transparent;
border-color: #606c76;
color: #606c76;
}
.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
input[type='button'].button-outline[disabled]:focus,
input[type='button'].button-outline[disabled]:hover,
input[type='reset'].button-outline[disabled]:focus,
input[type='reset'].button-outline[disabled]:hover,
input[type='submit'].button-outline[disabled]:focus,
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:hover,
button.button-clear:focus,
button.button-clear:hover,
input[type='button'].button-clear:focus,
input[type='button'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='submit'].button-clear:focus,
input[type='submit'].button-clear:hover {
background-color: transparent;
border-color: transparent;
color: #606c76;
}
.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
input[type='button'].button-clear[disabled]:focus,
input[type='button'].button-clear[disabled]:hover,
input[type='reset'].button-clear[disabled]:focus,
input[type='reset'].button-clear[disabled]:hover,
input[type='submit'].button-clear[disabled]:focus,
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: 0.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: 0.1rem solid #f4f5f6;
margin: 3.0rem 0;
}
input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='color'],
input[type='date'],
input[type='month'],
input[type='week'],
input[type='datetime'],
input[type='datetime-local'],
input:not([type]),
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 0.1rem solid #d1d1d1;
border-radius: .4rem;
box-shadow: none;
box-sizing: inherit;
height: 3.8rem;
padding: .6rem 1.0rem;
width: 100%;
}
input[type='email']: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='color']:focus,
input[type='date']:focus,
input[type='month']:focus,
input[type='week']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
border-color: #9b4dca;
outline: 0;
}
select {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
padding-right: 3.0rem;
}
select:focus {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
}
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: 112.0rem;
padding: 0 2.0rem;
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-50 {
margin-left: 50%;
}
.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 {
-ms-grid-row-align: center;
align-self: center;
}
@media (min-width: 40rem) {
.row {
flex-direction: row;
margin-left: -1.0rem;
width: calc(100% + 2.0rem);
}
.row .column {
margin-bottom: inherit;
padding: 0 1.0rem;
}
}
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,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
font-size: 90%;
margin: 1.5rem 0 1.5rem 3.0rem;
}
ol {
list-style: decimal inside;
}
ul {
list-style: circle inside;
}
.button,
button,
dd,
dt,
li {
margin-bottom: 1.0rem;
}
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;
width: 100%;
}
td,
th {
border-bottom: 0.1rem solid #e1e1e1;
padding: 1.2rem 1.5rem;
text-align: left;
}
td:first-child,
th:first-child {
padding-left: 0;
}
td:last-child,
th:last-child {
padding-right: 0;
}
b,
strong {
font-weight: bold;
}
p {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
letter-spacing: -.1rem;
margin-bottom: 2.0rem;
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;
}
/*# sourceMappingURL=milligram.css.map */

1
dist/milligram.css.map vendored

File diff suppressed because one or more lines are too long

3
dist/milligram.min.css vendored

File diff suppressed because one or more lines are too long

1
dist/milligram.min.css.map vendored

File diff suppressed because one or more lines are too long

309
example.html Normal file

@ -0,0 +1,309 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="CJ Patoilo" />
<meta
name="description"
content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code."
/>
<title>Milligram | A minimalist CSS framework.</title>
<link rel="icon" href="https://milligram.io/images/icon.png" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
/>
<link rel="stylesheet" href="../dist/milligram.min.css" />
<link rel="stylesheet" href="https://milligram.io/styles/main.css" />
</head>
<body>
<main class="wrapper">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="https://milligram.io/">
<svg class="img" version="1.1" viewBox="0 0 463 669">
<g
transform="translate(0.000000,669.000000) scale(0.100000,-0.100000)"
>
<path
d="M2303 6677c-11-13-58-89-393-627-128-206-247-397-265-425-18-27-85-135-150-240-65-104-281-451-480-770-358-575-604-970-641-1032-10-18-45-74-76-126-47-78-106-194-107-212-1-3-11-26-24-53-60-118-132-406-157-623-19-158-8-491 20-649 82-462 291-872 619-1213 192-199 387-340 646-467 335-165 638-235 1020-235 382 0 685 70 1020 235 259 127 454 268 646 467 328 341 537 751 619 1213 28 158 39 491 20 649-25 217-97 505-157 623-13 27-23 50-23 53 0 16-57 127-107 210-32 52-67 110-77 128-37 62-283 457-641 1032-199 319-415 666-480 770-65 105-132 213-150 240-18 28-137 219-265 425-354 570-393 630-400 635-4 3-12-1-17-8zm138-904c118-191 654-1050 1214-1948 148-236 271-440 273-452 2-13 8-23 11-23 14 0 72-99 125-212 92-195 146-384 171-598 116-974-526-1884-1488-2110-868-205-1779 234-2173 1046-253 522-257 1124-10 1659 45 97 108 210 126 225 4 3 9 13 13 22 3 9 126 209 273 445 734 1176 1102 1766 1213 1946 67 108 124 197 126 197 2 0 59-89 126-197zM1080 3228c-75-17-114-67-190-243-91-212-128-368-137-580-34-772 497-1451 1254-1605 77-15 112-18 143-11 155 35 212 213 106 329-32 36-62 48-181 75-223 50-392 140-552 291-115 109-178 192-242 316-101 197-136 355-128 580 3 111 10 167 30 241 30 113 80 237 107 267 11 12 20 26 20 32 0 6 8 22 17 36 26 41 27 99 3 147-54 105-142 149-250 125z"
></path>
</g>
</svg>
&nbsp;
<h1 class="title">Milligram</h1>
</a>
<ul class="navigation-list float-right">
<li class="navigation-item">
<a class="navigation-link" href="#popover-grid" data-popover
>Docs</a
>
<div class="popover" id="popover-grid">
<ul class="popover-list">
<li class="popover-item">
<a
class="popover-link"
href="#getting-started"
title="Getting Started"
>Getting Started</a
>
</li>
<li class="popover-item">
<a
class="popover-link"
href="#typography"
title="Typography"
>Typography</a
>
</li>
<li class="popover-item">
<a
class="popover-link"
href="#blockquotes"
title="Blockquotes"
>Blockquotes</a
>
</li>
<li class="popover-item">
<a class="popover-link" href="#buttons" title="Buttons"
>Buttons</a
>
</li>
<li class="popover-item">
<a class="popover-link" href="#lists" title="Lists"
>Lists</a
>
</li>
<li class="popover-item">
<a class="popover-link" href="#forms" title="Forms"
>Forms</a
>
</li>
<li class="popover-item">
<a class="popover-link" href="#tables" title="Tables"
>Tables</a
>
</li>
<li class="popover-item">
<a class="popover-link" href="#grids" title="Grids"
>Grids</a
>
</li>
<li class="popover-item">
<a class="popover-link" href="#code" title="Code">Code</a>
</li>
<li class="popover-item">
<a class="popover-link" href="#utilities" title="Utilities"
>Utilities</a
>
</li>
<li class="popover-item">
<a class="popover-link" href="#tips" title="Tips">Tips</a>
</li>
<li class="popover-item">
<a
class="popover-link"
href="#browser-support"
title="Browser Support"
>Browser Support</a
>
</li>
<li class="popover-item">
<a class="popover-link" href="#examples" title="Examples"
>Examples</a
>
</li>
<li class="popover-item">
<a
class="popover-link"
href="#contributing"
title="Contributing"
>Contributing</a
>
</li>
</ul>
</div>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#popover-support" data-popover
>Support</a
>
<div class="popover" id="popover-support">
<ul class="popover-list">
<li class="popover-item">
<a
class="popover-link"
target="blank"
href="https://github.com/milligram/milligram"
title="On Github"
>On Github</a
>
</li>
<li class="popover-item">
<a
class="popover-link"
target="blank"
href="https://codepen.io/milligramcss"
title="On Codepen"
>On Codepen</a
>
</li>
<li class="popover-item">
<a
class="popover-link"
target="blank"
href="https://facebook.com/milligramcss"
title="On Facebook"
>On Facebook</a
>
</li>
<li class="popover-item">
<a
class="popover-link"
target="blank"
href="https://twitter.com/milligramcss"
title="On Twitter"
>On Twitter</a
>
</li>
<li class="popover-item">
<a
class="popover-link"
target="blank"
href="https://github.com/milligram/milligram/issues/new"
title="Need help?"
>Need help?</a
>
</li>
<li class="popover-item">
<a
class="popover-link"
target="blank"
href="https://github.com/milligram/milligram#license"
title="License"
>License</a
>
</li>
<li class="popover-item">
<a
class="popover-link"
target="blank"
href="https://github.com/milligram/milligram/releases"
title="Versions"
>Versions</a
>
</li>
</ul>
</div>
</li>
</ul>
<a
href="https://github.com/milligram/milligram"
title="Milligram on Github"
target="_blank"
>
<svg class="octocat" viewBox="0 0 250 250">
<path
d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
></path>
<path
class="octocat-arm"
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
></path>
<path
class="octocat-body"
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
></path>
</svg>
</a>
</section>
</nav>
<section class="container" id="examples">
<h5 class="title">Examples</h5>
<p>You can view more examples of using Milligram.</p>
<ul>
<li>
<a
href="https://milligram.io/#getting-started"
title="Getting Started"
>Getting Started</a
>
</li>
<li>
<a href="https://milligram.io/#typography" title="Typography"
>Typography</a
>
</li>
<li>
<a href="https://milligram.io/#blockquotes" title="Blockquotes"
>Blockquotes</a
>
</li>
<li>
<a href="https://milligram.io/#buttons" title="Buttons">Buttons</a>
</li>
<li><a href="https://milligram.io/#lists" title="Lists">Lists</a></li>
<li><a href="https://milligram.io/#forms" title="Forms">Forms</a></li>
<li>
<a href="https://milligram.io/#tables" title="Tables">Tables</a>
</li>
<li><a href="https://milligram.io/#grids" title="Grids">Grids</a></li>
<li><a href="https://milligram.io/#code" title="Code">Code</a></li>
<li>
<a href="https://milligram.io/#utilities" title="Utilities"
>Utilities</a
>
</li>
<li><a href="https://milligram.io/#tips" title="Tips">Tips</a></li>
<li>
<a
href="https://milligram.io/#browser-support"
title="Browser Support"
>Browser Support</a
>
</li>
</ul>
</section>
<section class="container" id="contributing">
<h5 class="title">Contributing</h5>
<p>
Want to contribute? Follow these
<a
href="https://github.com/milligram/milligram/blob/master/.github/contributing.md"
title="Contributing"
>recommendations</a
>.
</p>
</section>
<footer class="footer">
<section class="container">
<p>
Designed with ♥ by
<a
target="_blank"
href="https://twitter.com/cjpatoilo"
title="CJ Patoilo"
>CJ Patoilo</a
>. Licensed under the
<a
target="_blank"
href="https://github.com/milligram/milligram#license"
title="MIT License"
>MIT License</a
>.
</p>
</section>
</footer>
</main>
<script src="https://milligram.io/scripts/main.js"></script>
</body>
</html>

110
examples/index.html

@ -1,110 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="CJ Patoilo">
<meta name="description" content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.">
<title>Milligram | A minimalist CSS framework.</title>
<link rel="icon" href="https://milligram.io/images/icon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="../dist/milligram.min.css">
<link rel="stylesheet" href="https://milligram.io/styles/main.css">
</head>
<body>
<main class="wrapper">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="https://milligram.io/">
<svg class="img" version="1.1" viewBox="0 0 463 669">
<g transform="translate(0.000000,669.000000) scale(0.100000,-0.100000)">
<path d="M2303 6677c-11-13-58-89-393-627-128-206-247-397-265-425-18-27-85-135-150-240-65-104-281-451-480-770-358-575-604-970-641-1032-10-18-45-74-76-126-47-78-106-194-107-212-1-3-11-26-24-53-60-118-132-406-157-623-19-158-8-491 20-649 82-462 291-872 619-1213 192-199 387-340 646-467 335-165 638-235 1020-235 382 0 685 70 1020 235 259 127 454 268 646 467 328 341 537 751 619 1213 28 158 39 491 20 649-25 217-97 505-157 623-13 27-23 50-23 53 0 16-57 127-107 210-32 52-67 110-77 128-37 62-283 457-641 1032-199 319-415 666-480 770-65 105-132 213-150 240-18 28-137 219-265 425-354 570-393 630-400 635-4 3-12-1-17-8zm138-904c118-191 654-1050 1214-1948 148-236 271-440 273-452 2-13 8-23 11-23 14 0 72-99 125-212 92-195 146-384 171-598 116-974-526-1884-1488-2110-868-205-1779 234-2173 1046-253 522-257 1124-10 1659 45 97 108 210 126 225 4 3 9 13 13 22 3 9 126 209 273 445 734 1176 1102 1766 1213 1946 67 108 124 197 126 197 2 0 59-89 126-197zM1080 3228c-75-17-114-67-190-243-91-212-128-368-137-580-34-772 497-1451 1254-1605 77-15 112-18 143-11 155 35 212 213 106 329-32 36-62 48-181 75-223 50-392 140-552 291-115 109-178 192-242 316-101 197-136 355-128 580 3 111 10 167 30 241 30 113 80 237 107 267 11 12 20 26 20 32 0 6 8 22 17 36 26 41 27 99 3 147-54 105-142 149-250 125z"></path>
</g>
</svg>
&nbsp;
<h1 class="title">Milligram</h1>
</a>
<ul class="navigation-list float-right">
<li class="navigation-item">
<a class="navigation-link" href="#popover-grid" data-popover>Docs</a>
<div class="popover" id="popover-grid">
<ul class="popover-list">
<li class="popover-item"><a class="popover-link" href="#getting-started" title="Getting Started">Getting Started</a></li>
<li class="popover-item"><a class="popover-link" href="#typography" title="Typography">Typography</a></li>
<li class="popover-item"><a class="popover-link" href="#blockquotes" title="Blockquotes">Blockquotes</a></li>
<li class="popover-item"><a class="popover-link" href="#buttons" title="Buttons">Buttons</a></li>
<li class="popover-item"><a class="popover-link" href="#lists" title="Lists">Lists</a></li>
<li class="popover-item"><a class="popover-link" href="#forms" title="Forms">Forms</a></li>
<li class="popover-item"><a class="popover-link" href="#tables" title="Tables">Tables</a></li>
<li class="popover-item"><a class="popover-link" href="#grids" title="Grids">Grids</a></li>
<li class="popover-item"><a class="popover-link" href="#codes" title="Codes">Codes</a></li>
<li class="popover-item"><a class="popover-link" href="#utilities" title="Utilities">Utilities</a></li>
<li class="popover-item"><a class="popover-link" href="#tips" title="Tips">Tips</a></li>
<li class="popover-item"><a class="popover-link" href="#browser-support" title="Browser Support">Browser Support</a></li>
<li class="popover-item"><a class="popover-link" href="#examples" title="Examples">Examples</a></li>
<li class="popover-item"><a class="popover-link" href="#contributing" title="Contributing">Contributing</a></li>
</ul>
</div>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#popover-support" data-popover>Support</a>
<div class="popover" id="popover-support">
<ul class="popover-list">
<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram" title="On Github">On Github</a></li>
<li class="popover-item"><a class="popover-link" target="blank" href="https://codepen.io/milligramcss" title="On Codepen">On Codepen</a></li>
<li class="popover-item"><a class="popover-link" target="blank" href="https://facebook.com/milligramcss" title="On Facebook">On Facebook</a></li>
<li class="popover-item"><a class="popover-link" target="blank" href="https://twitter.com/milligramcss" title="On Twitter">On Twitter</a></li>
<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram/issues/new" title="Need help?">Need help?</a></li>
<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram#license" title="License">License</a></li>
<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram/releases" title="Versions">Versions</a></li>
</ul>
</div>
</li>
</ul>
<a href="https://github.com/milligram/milligram" title="Milligram on Github" target="_blank">
<svg class="octocat" viewBox="0 0 250 250"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path class="octocat-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"></path><path class="octocat-body" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"></path></svg>
</a>
</section>
</nav>
<section class="container" id="examples">
<h5 class="title">Examples</h5>
<p>You can view more examples of using Milligram.</p>
<p>
<ul>
<li><a href="https://milligram.io/#getting-started" title="Getting Started">Getting Started</a></li>
<li><a href="https://milligram.io/#typography" title="Typography">Typography</a></li>
<li><a href="https://milligram.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
<li><a href="https://milligram.io/#buttons" title="Buttons">Buttons</a></li>
<li><a href="https://milligram.io/#lists" title="Lists">Lists</a></li>
<li><a href="https://milligram.io/#forms" title="Forms">Forms</a></li>
<li><a href="https://milligram.io/#tables" title="Tables">Tables</a></li>
<li><a href="https://milligram.io/#grids" title="Grids">Grids</a></li>
<li><a href="https://milligram.io/#codes" title="Codes">Codes</a></li>
<li><a href="https://milligram.io/#utilities" title="Utilities">Utilities</a></li>
<li><a href="https://milligram.io/#tips" title="Tips">Tips</a></li>
<li><a href="https://milligram.io/#browser-support" title="Browser Support">Browser Support</a></li>
</ul>
</p>
</section>
<section class="container" id="contributing">
<h5 class="title">Contributing</h5>
<p>Want to contribute? Follow these <a href="https://github.com/milligram/milligram/blob/master/.github/contributing.md" title="Contributing">recommendations</a>.</p>
</section>
<footer class="footer">
<section class="container">
<p>Designed with ♥ by <a target="_blank" href="https://cjpatoilo.com" title="CJ Patoilo">CJ Patoilo</a>. Licensed under the <a target="_blank" href="https://github.com/milligram/milligram#license" title="MIT License">MIT License</a>.</p>
</section>
</footer>
</main>
<script src="https://milligram.io/scripts/main.js"></script>
</body>
</html>

13049
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

18
package.js

@ -1,14 +1,12 @@
Package.describe({ Package.describe({
name: 'milligram:milligram', name: 'milligram:milligram',
version: '1.3.0', version: '1.4.0',
summary: 'A minimalist CSS framework.', summary: 'A minimalist CSS framework.',
git: 'https://github.com/milligram/milligram.git', git: 'https://github.com/milligram/milligram.git',
documentation: 'readme.md' documentation: 'readme.md',
}) })
Package.onUse((api) => { Package.onUse(api => {
api.versionsFrom('METEOR@1.0') api.versionsFrom('METEOR@1.0')
api.addFiles([ api.addFiles(['dist/milligram.css'], 'client')
'dist/milligram.css'
], 'client')
}) })

171
package.json

@ -1,91 +1,84 @@
{ {
"name": "milligram", "name": "milligram",
"version": "1.3.0", "version": "1.4.0",
"description": "A minimalist CSS framework.", "description": "A minimalist CSS framework.",
"homepage": "https://milligram.io", "homepage": "https://milligram.io",
"repository": "milligram/milligram", "repository": "milligram/milligram",
"license": "MIT", "license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>", "author": "CJ Patoilo <cjpatoilo@gmail.com>",
"main": "dist/milligram.css", "main": "dist/milligram.css",
"keywords": [ "keywords": [
"bootstrap", "bootstrap",
"css", "css",
"css3", "css3",
"flexbox", "flexbox",
"front-end", "front-end",
"framework", "framework",
"html", "html",
"html5", "html5",
"kickstarter", "kickstarter",
"less", "less",
"responsive", "responsive",
"mobile", "mobile",
"mobile-first", "mobile-first",
"postcss", "postcss",
"responsive", "responsive",
"sass", "sass",
"scss", "scss",
"stylus" "stylus"
], ],
"ignore": [ "dependencies": {
".appveyor.yml", "normalize.css": "~8.0.1"
".editorconfig", },
".eslintrc", "devDependencies": {
".github", "autoprefixer": "^9.6.1",
".gitignore", "ava": "^3.8.2",
".sasslintrc", "backstopjs": "3.8.8",
".travis.yml", "banner-cli": "^0.14.1",
"backstop.conf.js", "browser-sync": "^2.18.5",
"bower.json", "husky": "^4.2.5",
"changelog.md", "lint-staged": "^10.2.7",
"composer.json", "node-sass": "^4.12.0",
"package.js", "npm-run-all": "^4.1.5",
"package.json", "nyc": "^15.1.0",
"src", "onchange": "^7.0.2",
"test" "postcss-cli": "^7.1.1",
], "prettier-standard": "^16.3.0",
"dependencies": { "rimraf": "^3.0.2",
"normalize.css": "~5.0.0" "sass-lint": "^1.12.1"
}, },
"devDependencies": { "scripts": {
"autoprefixer": "^6.5.4", "autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r dist/*.css",
"ava": "^0.17.0", "banner": "banner-cli dist/*.css",
"backstopjs": "^2.3.5", "build": "rimraf dist && run-s sass autoprefixer banner",
"banner-cli": "^0.9.2", "lint": "prettier-standard --check && sass-lint --verbose --no-exit",
"browser-sync": "^2.18.5", "prepublishOnly": "npm run build",
"editorconfig-tools": "^0.1.1", "sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
"eslint": "^3.14.0", "serve": "browser-sync start --no-notify -s test --ss dist -f dist",
"eslint-config-styled": "^0.0.0", "start": "run-p build watch serve",
"husky": "^0.11.9", "test": "npm run build && nyc ava",
"node-sass": "^4.9.0", "visual-regression": "run-p serve visual-regression:compare",
"npm-run-all": "^2.3.0", "visual-regression:compare": "run-s build && backstop test --config backstop.config.js",
"nyc": "^10.0.0", "visual-regression:reference": "run-s build && backstop reference --config backstop.config.js",
"onchange": "^2.5.0", "watch": "onchange src -- run-p build"
"postcss-cli": "^2.6.0", },
"rimraf": "^2.5.4", "engines": {
"sass-lint": "^1.12.1" "node": "^12.17.0",
}, "npm": "^6.14.5"
"engines": { },
"node": ">=4" "prettier": {
}, "jsxSingleQuote": false,
"scripts": { "trailingComma": "all"
"start": "run-p build watch serve", },
"build": "run-s clean sass autoprefixer banner", "husky": {
"clean": "rimraf dist", "hooks": {
"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css", "pre-commit": "lint-staged"
"autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r dist/*.css", }
"banner": "banner-cli dist/*.css", },
"watch": "onchange src -- run-p build", "lint-staged": {
"serve": "browser-sync start --no-notify -s test --ss dist -f dist", "**/*": [
"backstop": "run-s build && run-p serve compare", "prettier-standard --format",
"reference": "backstop reference --configPath=backstop.conf.js", "git add"
"compare": "backstop test --configPath=backstop.conf.js", ]
"lint": "sass-lint -c .sasslintrc src --verbose --no-exit && eslint test -c styled && editorconfig-tools check .", }
"ava": "nyc ava",
"test": "run-s build lint ava",
"precommit": "run-p test"
},
"resolutions": {
"natives": "1.1.3"
}
} }

13
readme.md

@ -1,8 +1,7 @@
<a align="center" href="https://milligram.io"><img width="100%" src="https://milligram.io/images/thumbnail.png" alt="Milligram - A minimalist CSS framework"></a> <a align="center" href="https://milligram.io"><img width="100%" src="https://milligram.io/images/thumbnail.png" alt="Milligram - A minimalist CSS framework."></a>
> A minimalist CSS framework. > A minimalist CSS framework.
[![Setup Automated](https://img.shields.io/badge/setup-automated-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
[![Travis Status](https://travis-ci.org/milligram/milligram.svg?branch=master)](https://travis-ci.org/milligram/milligram?branch=master) [![Travis Status](https://travis-ci.org/milligram/milligram.svg?branch=master)](https://travis-ci.org/milligram/milligram?branch=master)
[![AppVeyor Status](https://ci.appveyor.com/api/projects/status/xcm8meymwerq0r82?svg=true)](https://ci.appveyor.com/project/cjpatoilo/milligram) [![AppVeyor Status](https://ci.appveyor.com/api/projects/status/xcm8meymwerq0r82?svg=true)](https://ci.appveyor.com/project/cjpatoilo/milligram)
[![Codacy Status](https://img.shields.io/codacy/grade/848fb4bd6902434fab0bcfb5461284fe/master.svg)](https://www.codacy.com/app/milligram/milligram/dashboard) [![Codacy Status](https://img.shields.io/codacy/grade/848fb4bd6902434fab0bcfb5461284fe/master.svg)](https://www.codacy.com/app/milligram/milligram/dashboard)
@ -10,13 +9,12 @@
[![Version Status](https://badge.fury.io/js/milligram.svg)](https://www.npmjs.com/package/milligram) [![Version Status](https://badge.fury.io/js/milligram.svg)](https://www.npmjs.com/package/milligram)
[![Download Status](https://img.shields.io/npm/dt/milligram.svg)](https://www.npmjs.com/package/milligram) [![Download Status](https://img.shields.io/npm/dt/milligram.svg)](https://www.npmjs.com/package/milligram)
[![Gitter Chat](https://img.shields.io/badge/gitter-join_the_chat-4cc61e.svg)](https://gitter.im/milligram/milligram) [![Gitter Chat](https://img.shields.io/badge/gitter-join_the_chat-4cc61e.svg)](https://gitter.im/milligram/milligram)
[![Setup Automated](https://img.shields.io/badge/setup-automated-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
## Why it's awesome ## Why it's awesome
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! 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!
## Download ## Download
**Install with Bower** **Install with Bower**
@ -37,7 +35,6 @@ $ npm install milligram
$ yarn add milligram $ yarn add milligram
``` ```
## Table of Contents ## Table of Contents
- [Getting Started](https://milligram.io/#getting-started) - [Getting Started](https://milligram.io/#getting-started)
@ -48,17 +45,15 @@ $ yarn add milligram
- [Forms](https://milligram.io/#forms) - [Forms](https://milligram.io/#forms)
- [Tables](https://milligram.io/#tables) - [Tables](https://milligram.io/#tables)
- [Grids](https://milligram.io/#grids) - [Grids](https://milligram.io/#grids)
- [Codes](https://milligram.io/#codes) - [Code](https://milligram.io/#code)
- [Utilities](https://milligram.io/#utilities) - [Utilities](https://milligram.io/#utilities)
- [Tips](https://milligram.io/#tips) - [Tips](https://milligram.io/#tips)
- [Browser Support](https://milligram.io/#browser-support) - [Browser Support](https://milligram.io/#browser-support)
- [Examples](https://milligram.io/#examples) - [Examples](https://milligram.io/#examples)
## Contributing ## Contributing
Want to contribute? Follow these [recommendations](https://github.com/milligram/milligram/blob/master/.github/contributing.md). Want to contribute? Follow these [recommendations](https://github.com/milligram/milligram/contribute).
## License ## License

18
src/_Base.sass

@ -6,19 +6,19 @@
*, *,
*:after, *:after,
*:before *:before
box-sizing: inherit box-sizing: inherit
// The base font-size is set at 62.5% for having the convenience // The base font-size is set at 62.5% for having the convenience
// of sizing rems in a way that is similar to using px: 1.6rem = 16px // of sizing rems in a way that is similar to using px: 1.6rem = 16px
html html
box-sizing: border-box box-sizing: border-box
font-size: 62.5% font-size: 62.5%
// Default body styles // Default body styles
body body
color: $color-secondary color: $color-secondary
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element
font-weight: 300 font-weight: 300
letter-spacing: .01em letter-spacing: .01em
line-height: 1.6 line-height: 1.6

12
src/_Blockquote.sass

@ -3,10 +3,10 @@
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
blockquote blockquote
border-left: .3rem solid $color-quaternary border-left: .3rem solid $color-quaternary
margin-left: 0 margin-left: 0
margin-right: 0 margin-right: 0
padding: 1rem 1.5rem padding: 1rem 1.5rem
*:last-child *:last-child
margin-bottom: 0 margin-bottom: 0

110
src/_Button.sass

@ -7,69 +7,69 @@ button,
input[type='button'], input[type='button'],
input[type='reset'], input[type='reset'],
input[type='submit'] input[type='submit']
background-color: $color-primary background-color: $color-primary
border: .1rem solid $color-primary border: .1rem solid $color-primary
border-radius: .4rem border-radius: .4rem
color: $color-initial color: $color-initial
cursor: pointer cursor: pointer
display: inline-block display: inline-block
font-size: 1.1rem font-size: 1.1rem
font-weight: 700 font-weight: 700
height: 3.8rem height: 3.8rem
letter-spacing: .1rem letter-spacing: .1rem
line-height: 3.8rem line-height: 3.8rem
padding: 0 3.0rem padding: 0 3.0rem
text-align: center text-align: center
text-decoration: none text-decoration: none
text-transform: uppercase text-transform: uppercase
white-space: nowrap white-space: nowrap
&:focus, &:focus,
&:hover &:hover
background-color: $color-secondary background-color: $color-secondary
border-color: $color-secondary border-color: $color-secondary
color: $color-initial color: $color-initial
outline: 0 outline: 0
&[disabled] &[disabled]
cursor: default cursor: default
opacity: .5 opacity: .5
&:focus, &:focus,
&:hover &:hover
background-color: $color-primary background-color: $color-primary
border-color: $color-primary border-color: $color-primary
&.button-outline &.button-outline
background-color: transparent background-color: transparent
color: $color-primary color: $color-primary
&:focus, &:focus,
&:hover &:hover
background-color: transparent background-color: transparent
border-color: $color-secondary border-color: $color-secondary
color: $color-secondary color: $color-secondary
&[disabled] &[disabled]
&:focus, &:focus,
&:hover &:hover
border-color: inherit border-color: inherit
color: $color-primary color: $color-primary
&.button-clear &.button-clear
background-color: transparent background-color: transparent
border-color: transparent border-color: transparent
color: $color-primary color: $color-primary
&:focus, &:focus,
&:hover &:hover
background-color: transparent background-color: transparent
border-color: transparent border-color: transparent
color: $color-secondary color: $color-secondary
&[disabled] &[disabled]
&:focus, &:focus,
&:hover &:hover
color: $color-primary color: $color-primary

28
src/_Code.sass

@ -3,20 +3,20 @@
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
code code
background: $color-tertiary background: $color-tertiary
border-radius: .4rem border-radius: .4rem
font-size: 86% font-size: 86%
margin: 0 .2rem margin: 0 .2rem
padding: .2rem .5rem padding: .2rem .5rem
white-space: nowrap white-space: nowrap
pre pre
background: $color-tertiary background: $color-tertiary
border-left: .3rem solid $color-primary border-left: .3rem solid $color-primary
overflow-y: hidden overflow-y: hidden
& > code & > code
border-radius: 0 border-radius: 0
display: block display: block
padding: 1rem 1.5rem padding: 1rem 1.5rem
white-space: pre white-space: pre

6
src/_Divider.sass

@ -3,6 +3,6 @@
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
hr hr
border: 0 border: 0
border-top: .1rem solid $color-tertiary border-top: .1rem solid $color-tertiary
margin: 3.0rem 0 margin: 3.0rem 0

72
src/_Form.sass

@ -2,66 +2,66 @@
// Form // Form
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'], input[type='email'],
input[type='month'],
input[type='number'], input[type='number'],
input[type='password'], input[type='password'],
input[type='search'], input[type='search'],
input[type='tel'], input[type='tel'],
input[type='text'], input[type='text'],
input[type='url'], input[type='url'],
input[type='color'],
input[type='date'],
input[type='month'],
input[type='week'], input[type='week'],
input[type='datetime'],
input[type='datetime-local'],
input:not([type]), input:not([type]),
textarea, textarea,
select select
appearance: none // Removes awkward default styles on some inputs for iOS -webkit-appearance: none // sass-lint:disable-line no-vendor-prefixes
background-color: transparent background-color: transparent
border: .1rem solid $color-quaternary border: .1rem solid $color-quaternary
border-radius: .4rem border-radius: .4rem
box-shadow: none box-shadow: none
box-sizing: inherit // Forced to replace inherit values of the normalize.css box-sizing: inherit // Forced to replace inherit values of the normalize.css
height: 3.8rem height: 3.8rem
padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit padding: .6rem 1.0rem .7rem // This vertically centers text on FF, ignored by Webkit
width: 100% width: 100%
&:focus &:focus
border-color: $color-primary border-color: $color-primary
outline: 0 outline: 0
select select
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23' + str-slice(inspect($color-quaternary), 2) + '" d="M0,0l6,8l6-8"/></svg>') center right no-repeat background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23' + str-slice(inspect($color-quaternary), 2) + '" d="M0,0l6,8l6-8"/></svg>') center right no-repeat
padding-right: 3.0rem padding-right: 3.0rem
&:focus &:focus
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23' + str-slice(inspect($color-primary), 2) + '" d="M0,0l6,8l6-8"/></svg>') background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23' + str-slice(inspect($color-primary), 2) + '" d="M0,0l6,8l6-8"/></svg>')
&[multiple]
background: none
height: auto
textarea textarea
min-height: 6.5rem min-height: 6.5rem
label, label,
legend legend
display: block display: block
font-size: 1.6rem font-size: 1.6rem
font-weight: 700 font-weight: 700
margin-bottom: .5rem margin-bottom: .5rem
fieldset fieldset
border-width: 0 border-width: 0
padding: 0 padding: 0
input[type='checkbox'], input[type='checkbox'],
input[type='radio'] input[type='radio']
display: inline display: inline
.label-inline .label-inline
display: inline-block display: inline-block
font-weight: normal font-weight: normal
margin-left: .5rem margin-left: .5rem
select[multiple]
height: auto
background: none

224
src/_Grid.sass

@ -4,11 +4,11 @@
// .container is main centered wrapper with a max width of 112.0rem (1120px) // .container is main centered wrapper with a max width of 112.0rem (1120px)
.container .container
margin: 0 auto margin: 0 auto
max-width: 112.0rem max-width: 112.0rem
padding: 0 2.0rem padding: 0 2.0rem
position: relative position: relative
width: 100% width: 100%
// Using flexbox for the grid, inspired by Philip Walton: // Using flexbox for the grid, inspired by Philip Walton:
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/ // http://philipwalton.github.io/solved-by-flexbox/demos/grids/
@ -16,149 +16,149 @@
// available width, and the height of each .column with take // available width, and the height of each .column with take
// up the height of the tallest .column in the same .row // up the height of the tallest .column in the same .row
.row .row
display: flex display: flex
flex-direction: column flex-direction: column
padding: 0 padding: 0
width: 100% width: 100%
&.row-no-padding &.row-no-padding
padding: 0 padding: 0
&> .column &> .column
padding: 0 padding: 0
&.row-wrap &.row-wrap
flex-wrap: wrap flex-wrap: wrap
// Vertically Align Columns // Vertically Align Columns
// .row-* vertically aligns every .col in the .row // .row-* vertically aligns every .col in the .row
&.row-top &.row-top
align-items: flex-start align-items: flex-start
&.row-bottom &.row-bottom
align-items: flex-end align-items: flex-end
&.row-center &.row-center
align-items: center align-items: center
&.row-stretch &.row-stretch
align-items: stretch align-items: stretch
&.row-baseline &.row-baseline
align-items: baseline align-items: baseline
.column .column
display: block display: block
// IE 11 required specifying the flex-basis otherwise it breaks mobile // IE 11 required specifying the flex-basis otherwise it breaks mobile
flex: 1 1 auto flex: 1 1 auto
margin-left: 0 margin-left: 0
max-width: 100% max-width: 100%
width: 100% width: 100%
// Column Offsets // Column Offsets
&.column-offset-10 &.column-offset-10
margin-left: 10% margin-left: 10%
&.column-offset-20 &.column-offset-20
margin-left: 20% margin-left: 20%
&.column-offset-25 &.column-offset-25
margin-left: 25% margin-left: 25%
&.column-offset-33, &.column-offset-33,
&.column-offset-34 &.column-offset-34
margin-left: 33.3333% margin-left: 33.3333%
&.column-offset-40 &.column-offset-40
margin-left: 40% margin-left: 40%
&.column-offset-50 &.column-offset-50
margin-left: 50% margin-left: 50%
&.column-offset-60 &.column-offset-60
margin-left: 60% margin-left: 60%
&.column-offset-66, &.column-offset-66,
&.column-offset-67 &.column-offset-67
margin-left: 66.6666% margin-left: 66.6666%
&.column-offset-75 &.column-offset-75
margin-left: 75% margin-left: 75%
&.column-offset-80 &.column-offset-80
margin-left: 80% margin-left: 80%
&.column-offset-90 &.column-offset-90
margin-left: 90% margin-left: 90%
// Explicit Column Percent Sizes // Explicit Column Percent Sizes
// By default each grid column will evenly distribute // By default each grid column will evenly distribute
// across the grid. However, you can specify individual // across the grid. However, you can specify individual
// columns to take up a certain size of the available area // columns to take up a certain size of the available area
&.column-10 &.column-10
flex: 0 0 10% flex: 0 0 10%
max-width: 10% max-width: 10%
&.column-20 &.column-20
flex: 0 0 20% flex: 0 0 20%
max-width: 20% max-width: 20%
&.column-25 &.column-25
flex: 0 0 25% flex: 0 0 25%
max-width: 25% max-width: 25%
&.column-33, &.column-33,
&.column-34 &.column-34
flex: 0 0 33.3333% flex: 0 0 33.3333%
max-width: 33.3333% max-width: 33.3333%
&.column-40 &.column-40
flex: 0 0 40% flex: 0 0 40%
max-width: 40% max-width: 40%
&.column-50 &.column-50
flex: 0 0 50% flex: 0 0 50%
max-width: 50% max-width: 50%
&.column-60 &.column-60
flex: 0 0 60% flex: 0 0 60%
max-width: 60% max-width: 60%
&.column-66, &.column-66,
&.column-67 &.column-67
flex: 0 0 66.6666% flex: 0 0 66.6666%
max-width: 66.6666% max-width: 66.6666%
&.column-75 &.column-75
flex: 0 0 75% flex: 0 0 75%
max-width: 75% max-width: 75%
&.column-80 &.column-80
flex: 0 0 80% flex: 0 0 80%
max-width: 80% max-width: 80%
&.column-90 &.column-90
flex: 0 0 90% flex: 0 0 90%
max-width: 90% max-width: 90%
// .column-* vertically aligns an individual .column // .column-* vertically aligns an individual .column
.column-top .column-top
align-self: flex-start align-self: flex-start
.column-bottom .column-bottom
align-self: flex-end align-self: flex-end
.column-center .column-center
align-self: center align-self: center
// Larger than mobile screen // Larger than mobile screen
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works @media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
.row .row
flex-direction: row flex-direction: row
margin-left: -1.0rem margin-left: -1.0rem
width: calc(100% + 2.0rem) width: calc(100% + 2.0rem)
.column .column
margin-bottom: inherit margin-bottom: inherit
padding: 0 1.0rem padding: 0 1.0rem

2
src/_Image.sass

@ -3,4 +3,4 @@
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
img img
max-width: 100% max-width: 100%

10
src/_Link.sass

@ -3,9 +3,9 @@
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
a a
color: $color-primary color: $color-primary
text-decoration: none text-decoration: none
&:focus, &:focus,
&:hover &:hover
color: $color-secondary color: $color-secondary

20
src/_List.sass

@ -5,18 +5,18 @@
dl, dl,
ol, ol,
ul ul
list-style: none list-style: none
margin-top: 0 margin-top: 0
padding-left: 0 padding-left: 0
dl, dl,
ol, ol,
ul ul
font-size: 90% font-size: 90%
margin: 1.5rem 0 1.5rem 3.0rem margin: 1.5rem 0 1.5rem 3.0rem
ol ol
list-style: decimal inside list-style: decimal inside
ul ul
list-style: circle inside list-style: circle inside

6
src/_Spacing.sass

@ -7,13 +7,13 @@ button,
dd, dd,
dt, dt,
li li
margin-bottom: 1.0rem margin-bottom: 1.0rem
fieldset, fieldset,
input, input,
select, select,
textarea textarea
margin-bottom: 1.5rem margin-bottom: 1.5rem
blockquote, blockquote,
dl, dl,
@ -24,4 +24,4 @@ p,
pre, pre,
table, table,
ul ul
margin-bottom: 2.5rem margin-bottom: 2.5rem

62
src/_Table.sass

@ -3,57 +3,25 @@
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
table table
border-spacing: 0 border-spacing: 0
width: 100% display: block
overflow-x: auto
text-align: left
width: 100%
td, td,
th th
border-bottom: .1rem solid $color-quinary border-bottom: .1rem solid $color-quinary
padding: 1.2rem 1.5rem padding: 1.2rem 1.5rem
text-align: left
&:first-child &:first-child
padding-left: 0 padding-left: 0
&:last-child &:last-child
padding-right: 0 padding-right: 0
@media screen and (max-width: 40.0rem) @media (min-width: 40.0rem)
table
border-spacing: 0
display: flex
width: 100%
thead table
border-right: solid .1rem $color-quinary display: table
overflow-x: initial
td,
th
padding-left: 0
&:first-child
padding-left: 0
&:last-child
padding-right: 1.2rem
tbody
display: flex
overflow-x: auto
white-space: nowrap
tr
border-right: solid .1rem $color-quinary
&:last-child
border-right: none
td,
th
display: block
&:first-child
padding-left: 1.2rem
&:last-child
padding-right: 1.2rem

42
src/_Typography.sass

@ -4,10 +4,10 @@
b, b,
strong strong
font-weight: bold font-weight: bold
p p
margin-top: 0 margin-top: 0
h1, h1,
h2, h2,
@ -15,34 +15,34 @@ h3,
h4, h4,
h5, h5,
h6 h6
font-weight: 300 font-weight: 300
letter-spacing: -.1rem letter-spacing: -.1rem
margin-bottom: 2.0rem margin-bottom: 2.0rem
margin-top: 0 margin-top: 0
h1 h1
font-size: 4.6rem font-size: 4.6rem
line-height: 1.2 line-height: 1.2
h2 h2
font-size: 3.6rem font-size: 3.6rem
line-height: 1.25 line-height: 1.25
h3 h3
font-size: 2.8rem font-size: 2.8rem
line-height: 1.3 line-height: 1.3
h4 h4
font-size: 2.2rem font-size: 2.2rem
letter-spacing: -.08rem letter-spacing: -.08rem
line-height: 1.35 line-height: 1.35
h5 h5
font-size: 1.8rem font-size: 1.8rem
letter-spacing: -.05rem letter-spacing: -.05rem
line-height: 1.5 line-height: 1.5
h6 h6
font-size: 1.6rem font-size: 1.6rem
letter-spacing: 0 letter-spacing: 0
line-height: 1.4 line-height: 1.4

12
src/_Utility.sass

@ -5,14 +5,14 @@
// Clear a float with .clearfix // Clear a float with .clearfix
.clearfix .clearfix
&:after &:after
clear: both clear: both
content: ' ' // The space content is one way to avoid an Opera bug. content: ' ' // The space content is one way to avoid an Opera bug.
display: table display: table
// Float either direction // Float either direction
.float-left .float-left
float: left float: left
.float-right .float-right
float: right float: right

32
src/milligram.sass

@ -1,19 +1,19 @@
// Sass Modules // Modules
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
@import Color @import _Color
@import Base @import _Base
@import Blockquote @import _Blockquote
@import Button @import _Button
@import Code @import _Code
@import Divider @import _Divider
@import Form @import _Form
@import Grid @import _Grid
@import Link @import _Link
@import List @import _List
@import Spacing @import _Spacing
@import Table @import _Table
@import Typography @import _Typography
@import Image @import _Image
@import Utility @import _Utility

1518
test/index.html

File diff suppressed because it is too large Load Diff

BIN
test/regression/1893383643_Blockquotes_0_blockquotesexample_0_phone.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 9.8 KiB

BIN
test/regression/1893383643_Blockquotes_0_blockquotesexample_1_laptop.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 10 KiB

BIN
test/regression/1893383643_Buttons_0_buttonsexample_0_phone.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 70 KiB

BIN
test/regression/1893383643_Buttons_0_buttonsexample_1_laptop.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 60 KiB

BIN
test/regression/1893383643_Code_0_codeexample_0_phone.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 4.3 KiB

BIN
test/regression/1893383643_Code_0_codeexample_1_laptop.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 4.9 KiB

BIN
test/regression/1893383643_Forms_0_formsexample_0_phone.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 102 KiB

BIN
test/regression/1893383643_Forms_0_formsexample_1_laptop.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 109 KiB

BIN
test/regression/1893383643_Grids_0_gridsexample_0_phone.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 119 KiB

BIN
test/regression/1893383643_Grids_0_gridsexample_1_laptop.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 139 KiB

BIN
test/regression/1893383643_Lists_0_listsexample_0_phone.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 82 KiB

BIN
test/regression/1893383643_Lists_0_listsexample_1_laptop.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 86 KiB

BIN
test/regression/1893383643_Tables_0_tablesexample_0_phone.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 45 KiB

BIN
test/regression/1893383643_Tables_0_tablesexample_1_laptop.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 72 KiB

BIN
test/regression/1893383643_Typography_0_typographyexample_0_phone.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 86 KiB

BIN
test/regression/1893383643_Typography_0_typographyexample_1_laptop.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 87 KiB

BIN
test/regression/1893383643_Utilities_0_utilitiesexample_0_phone.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 5.6 KiB

BIN
test/regression/1893383643_Utilities_0_utilitiesexample_1_laptop.png Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 3.5 KiB

BIN
test/regression/486021560_Blockquotes_0_blockquotesexample_0_phone.png

Binary file not shown.
Side by Side

Before

(image error) Size: 9.6 KiB

BIN
test/regression/486021560_Blockquotes_0_blockquotesexample_1_laptop.png

Binary file not shown.
Side by Side

Before

(image error) Size: 10 KiB

BIN
test/regression/486021560_Buttons_0_buttonsexample_0_phone.png

Binary file not shown.
Side by Side

Before

(image error) Size: 73 KiB

BIN
test/regression/486021560_Buttons_0_buttonsexample_1_laptop.png

Binary file not shown.
Side by Side

Before

(image error) Size: 60 KiB

BIN
test/regression/486021560_Codes_0_codesexample_0_phone.png

Binary file not shown.
Side by Side

Before

(image error) Size: 4.8 KiB

BIN
test/regression/486021560_Codes_0_codesexample_1_laptop.png

Binary file not shown.
Side by Side

Before

(image error) Size: 5.4 KiB

BIN
test/regression/486021560_Forms_0_formsexample_0_phone.png

Binary file not shown.
Side by Side

Before

(image error) Size: 59 KiB

BIN
test/regression/486021560_Forms_0_formsexample_1_laptop.png

Binary file not shown.
Side by Side

Before

(image error) Size: 63 KiB

BIN
test/regression/486021560_Grids_0_gridsexample_0_phone.png

Binary file not shown.
Side by Side

Before

(image error) Size: 118 KiB

BIN
test/regression/486021560_Grids_0_gridsexample_1_laptop.png

Binary file not shown.
Side by Side

Before

(image error) Size: 138 KiB

BIN
test/regression/486021560_Lists_0_listsexample_0_phone.png

Binary file not shown.
Side by Side

Before

(image error) Size: 81 KiB

BIN
test/regression/486021560_Lists_0_listsexample_1_laptop.png

Binary file not shown.
Side by Side

Before

(image error) Size: 86 KiB

BIN
test/regression/486021560_Tables_0_tablesexample_0_phone.png

Binary file not shown.
Side by Side

Before

(image error) Size: 41 KiB

BIN
test/regression/486021560_Tables_0_tablesexample_1_laptop.png

Binary file not shown.
Side by Side

Before

(image error) Size: 48 KiB

BIN
test/regression/486021560_Typography_0_typographyexample_0_phone.png

Binary file not shown.
Side by Side

Before

(image error) Size: 84 KiB

BIN
test/regression/486021560_Typography_0_typographyexample_1_laptop.png

Binary file not shown.
Side by Side

Before

(image error) Size: 86 KiB

BIN
test/regression/486021560_Utilities_0_utilitiesexample_0_phone.png

Binary file not shown.
Side by Side

Before

(image error) Size: 4.4 KiB

BIN
test/regression/486021560_Utilities_0_utilitiesexample_1_laptop.png

Binary file not shown.
Side by Side

Before

(image error) Size: 4.1 KiB

26
test/unit/build.js

@ -5,29 +5,29 @@ const path = require('path')
let dist = path.join(__dirname, '../../dist') let dist = path.join(__dirname, '../../dist')
test.before('`dist` path should be created', t => { test.before('`dist` path should be created', t => {
t.true(fs.lstatSync(dist).isDirectory()) t.true(fs.lstatSync(dist).isDirectory())
}) })
test('`milligram.css` should be created', t => { test('`milligram.css` should be created', t => {
fs.readdirSync(dist).map(file => { fs.readdirSync(dist).map(file => {
if (file === 'milligram.css') t.is(file, 'milligram.css') if (file === 'milligram.css') t.is(file, 'milligram.css')
}) })
}) })
test('`milligram.min.css` should be created', t => { test('`milligram.min.css` should be created', t => {
fs.readdirSync(dist).map(file => { fs.readdirSync(dist).map(file => {
if (file === 'milligram.min.css') t.is(file, 'milligram.min.css') if (file === 'milligram.min.css') t.is(file, 'milligram.min.css')
}) })
}) })
test('`milligram.css.map` should be created', t => { test('`milligram.css.map` should be created', t => {
fs.readdirSync(dist).map(file => { fs.readdirSync(dist).map(file => {
if (file === 'milligram.css.map') t.is(file, 'milligram.css.map') if (file === 'milligram.css.map') t.is(file, 'milligram.css.map')
}) })
}) })
test('`milligram.min.css.map` should be created', t => { test('`milligram.min.css.map` should be created', t => {
fs.readdirSync(dist).map(file => { fs.readdirSync(dist).map(file => {
if (file === 'milligram.min.css.map') t.is(file, 'milligram.min.css.map') if (file === 'milligram.min.css.map') t.is(file, 'milligram.min.css.map')
}) })
}) })

126
test/unit/packages.js

@ -3,90 +3,102 @@ const npm = require('../../package.json')
const bower = require('../../bower.json') const bower = require('../../bower.json')
const composer = require('../../composer.json') const composer = require('../../composer.json')
const packages = [ const packages = [npm, bower, composer]
npm,
bower,
composer
]
test(`Name should be equal "${npm.name}"`, t => { test(`Name should be equal "${npm.name}"`, t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (compareValue.name.match('/')) compareValue.name = compareValue.name.split('/')[1] if (compareValue.name.match('/'))
if (referenceIndex !== compareIndex) t.is(referenceValue.name, compareValue.name) compareValue.name = compareValue.name.split('/')[1]
}) if (referenceIndex !== compareIndex)
}) t.is(referenceValue.name, compareValue.name)
})
})
}) })
test(`Version should be equal to "v${npm.version}"`, t => { test(`Version should be equal to "v${npm.version}"`, t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (referenceIndex !== compareIndex) t.is(referenceValue.version, compareValue.version) if (referenceIndex !== compareIndex)
}) t.is(referenceValue.version, compareValue.version)
}) })
})
}) })
test(`Description should be equal to "${npm.description}"`, t => { test(`Description should be equal to "${npm.description}"`, t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (referenceIndex !== compareIndex) t.is(referenceValue.description, compareValue.description) if (referenceIndex !== compareIndex)
}) t.is(referenceValue.description, compareValue.description)
}) })
})
}) })
test(`Homepage should be equal to "${npm.homepage}"`, t => { test(`Homepage should be equal to "${npm.homepage}"`, t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (referenceIndex !== compareIndex) t.is(referenceValue.homepage, compareValue.homepage) if (referenceIndex !== compareIndex)
}) t.is(referenceValue.homepage, compareValue.homepage)
}) })
})
}) })
test(`Repository should be equal to "${npm.repository}"`, t => { test(`Repository should be equal to "${npm.repository}"`, t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (referenceIndex !== compareIndex) t.is(referenceValue.repository, compareValue.repository) if (referenceIndex !== compareIndex)
}) t.is(referenceValue.repository, compareValue.repository)
}) })
})
}) })
test(`License should be equal to "${npm.license}"`, t => { test(`License should be equal to "${npm.license}"`, t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (referenceIndex !== compareIndex) t.is(referenceValue.license, compareValue.license) if (referenceIndex !== compareIndex)
}) t.is(referenceValue.license, compareValue.license)
}) })
})
}) })
test(`Author Name should be equal to "${npm.author}"`, t => { test(`Author Name should be equal to "${npm.author}"`, t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (referenceIndex !== compareIndex) t.is(referenceValue.author, compareValue.author) if (referenceIndex !== compareIndex)
}) t.is(referenceValue.author, compareValue.author)
}) })
})
}) })
test(`Main File should be equal to "${npm.main}"`, t => { test(`Main File should be equal to "${npm.main}"`, t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (referenceIndex !== compareIndex) t.is(referenceValue.main, compareValue.main) if (referenceIndex !== compareIndex)
}) t.is(referenceValue.main, compareValue.main)
}) })
})
}) })
test('Ignore should be equal', t => { test('Ignore should be equal', t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (referenceIndex !== compareIndex) t.is(JSON.stringify(referenceValue.ignore), JSON.stringify(compareValue.ignore)) if (referenceIndex !== compareIndex)
}) t.is(
}) JSON.stringify(referenceValue.ignore),
JSON.stringify(compareValue.ignore),
)
})
})
}) })
test('Keywords should be equal', t => { test('Keywords should be equal', t => {
packages.map((referenceValue, referenceIndex) => { packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => { packages.map((compareValue, compareIndex) => {
if (referenceIndex !== compareIndex) t.is(JSON.stringify(referenceValue.keywords), JSON.stringify(compareValue.keywords)) if (referenceIndex !== compareIndex)
}) t.is(
}) JSON.stringify(referenceValue.keywords),
JSON.stringify(compareValue.keywords),
)
})
})
}) })

5141
yarn.lock

File diff suppressed because it is too large Load Diff