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

Merge branch 'release/v1.3.0'

Browse Source
This commit is contained in:
CJ Patoilo 2017-01-26 07:02:09 -03:00
commit 7a1c78f313
No known key found for this signature in database
GPG Key ID: BB04A2FB1C21BF9D
56 changed files with 5340 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.eslintrc
View File

@ -1,13 +1,3 @@
{ {
"parserOptions": { "extends": "styled"
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": 2,
"quotes": ["error", "single"]
}
} }

16
.npmignore
View File

@ -1,16 +0,0 @@
.appveyor.yml
.editorconfig
.eslintrc
.github
.gitignore
.npmignore
.sasslintrc
.travis.yml
backstop.conf.js
bower.json
changelog.md
composer.json
package.js
package.json
src
test

44
backstop.conf.js
View File

@ -1,14 +1,20 @@
module.exports = { 'use strict'
viewports: [ const config = {
{ name: 'phone', width: 320, height: 480 }, viewports: [{
{ name: 'laptop', width: 1280, height: 800 } name: 'phone',
], width: 320,
height: 480
}, {
name: 'laptop',
width: 1280,
height: 800
}],
scenarios: [{ scenarios: [{
label: 'Typography', label: 'Typography',
url: 'http://localhost:3000', url: 'http://localhost:3000',
hideSelectors: [], hideSelectors: [],
removeSelectors: [], removeSelectors: [],
selectors: ['#typography'], selectors: ['#typography .example'],
readyEvent: null, readyEvent: null,
delay: 500, delay: 500,
misMatchThreshold: 0.1, misMatchThreshold: 0.1,
@ -19,7 +25,7 @@ module.exports = {
url: 'http://localhost:3000', url: 'http://localhost:3000',
hideSelectors: [], hideSelectors: [],
removeSelectors: [], removeSelectors: [],
selectors: ['#blockquotes'], selectors: ['#blockquotes .example'],
readyEvent: null, readyEvent: null,
delay: 500, delay: 500,
misMatchThreshold: 0.1, misMatchThreshold: 0.1,
@ -30,7 +36,7 @@ module.exports = {
url: 'http://localhost:3000', url: 'http://localhost:3000',
hideSelectors: [], hideSelectors: [],
removeSelectors: [], removeSelectors: [],
selectors: ['#buttons'], selectors: ['#buttons .example'],
readyEvent: null, readyEvent: null,
delay: 500, delay: 500,
misMatchThreshold: 0.1, misMatchThreshold: 0.1,
@ -41,7 +47,7 @@ module.exports = {
url: 'http://localhost:3000', url: 'http://localhost:3000',
hideSelectors: [], hideSelectors: [],
removeSelectors: [], removeSelectors: [],
selectors: ['#lists'], selectors: ['#lists .example'],
readyEvent: null, readyEvent: null,
delay: 500, delay: 500,
misMatchThreshold: 0.1, misMatchThreshold: 0.1,
@ -52,7 +58,7 @@ module.exports = {
url: 'http://localhost:3000', url: 'http://localhost:3000',
hideSelectors: [], hideSelectors: [],
removeSelectors: [], removeSelectors: [],
selectors: ['#forms'], selectors: ['#forms .example'],
readyEvent: null, readyEvent: null,
delay: 500, delay: 500,
misMatchThreshold: 0.1, misMatchThreshold: 0.1,
@ -63,7 +69,7 @@ module.exports = {
url: 'http://localhost:3000', url: 'http://localhost:3000',
hideSelectors: [], hideSelectors: [],
removeSelectors: [], removeSelectors: [],
selectors: ['#tables'], selectors: ['#tables .example'],
readyEvent: null, readyEvent: null,
delay: 500, delay: 500,
misMatchThreshold: 0.1, misMatchThreshold: 0.1,
@ -74,7 +80,7 @@ module.exports = {
url: 'http://localhost:3000', url: 'http://localhost:3000',
hideSelectors: [], hideSelectors: [],
removeSelectors: [], removeSelectors: [],
selectors: ['#grids'], selectors: ['#grids .example'],
readyEvent: null, readyEvent: null,
delay: 500, delay: 500,
misMatchThreshold: 0.1, misMatchThreshold: 0.1,
@ -85,7 +91,7 @@ module.exports = {
url: 'http://localhost:3000', url: 'http://localhost:3000',
hideSelectors: [], hideSelectors: [],
removeSelectors: [], removeSelectors: [],
selectors: ['#codes'], selectors: ['#codes .example'],
readyEvent: null, readyEvent: null,
delay: 500, delay: 500,
misMatchThreshold: 0.1, misMatchThreshold: 0.1,
@ -96,7 +102,7 @@ module.exports = {
url: 'http://localhost:3000', url: 'http://localhost:3000',
hideSelectors: [], hideSelectors: [],
removeSelectors: [], removeSelectors: [],
selectors: ['#utilities'], selectors: ['#utilities .example'],
readyEvent: null, readyEvent: null,
delay: 500, delay: 500,
misMatchThreshold: 0.1, misMatchThreshold: 0.1,
@ -111,8 +117,14 @@ module.exports = {
ci_report: 'node_modules/backstopjs/.tmp/ci_report' ci_report: 'node_modules/backstopjs/.tmp/ci_report'
}, },
engine: 'phantomjs', engine: 'phantomjs',
report: ['browser', 'CLI', 'CI'], report: [
'browser',
'CLI',
'CI'
],
casperFlags: [], casperFlags: [],
debug: false, debug: false,
port: 3002 port: 3002
}; }
module.exports = config

4
bower.json
View File

@ -1,8 +1,8 @@
{ {
"name": "milligram", "name": "milligram",
"version": "1.2.4", "version": "1.3.0",
"description": "A minimalist CSS framework.", "description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io", "homepage": "https://milligram.github.io",
"repository": "milligram/milligram", "repository": "milligram/milligram",
"license": "MIT", "license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>", "author": "CJ Patoilo <cjpatoilo@gmail.com>",

4
changelog.md
View File

@ -1,5 +1,5 @@
# Changelog # Changelog
Milligram uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs. **Milligram** uses [GitHub's Releases feature](https://github.com/blog/1547-release-your-software) for its changelogs.
See our [releases](https://github.com/milligram/milligram/releases) to accompany at the improvements for each version of Milligram. See our [releases](https://github.com/milligram/milligram/releases) to accompany at the improvements for each version of **Milligram**.

4
composer.json
View File

@ -1,8 +1,8 @@
{ {
"name": "milligram/milligram", "name": "milligram/milligram",
"version": "1.2.4", "version": "1.3.0",
"description": "A minimalist CSS framework.", "description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io", "homepage": "https://milligram.github.io",
"repository": "milligram/milligram", "repository": "milligram/milligram",
"license": "MIT", "license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>", "author": "CJ Patoilo <cjpatoilo@gmail.com>",

36
dist/milligram.css vendored
View File

@ -1,8 +1,8 @@
/*! /*!
* Milligram v1.2.4 * Milligram v1.3.0
* http://milligram.github.io * https://milligram.github.io
* *
* Copyright (c) 2016 CJ Patoilo * Copyright (c) 2017 CJ Patoilo
* Licensed under the MIT license * Licensed under the MIT license
*/ */
@ -318,7 +318,7 @@ input[type='radio'] {
.row .column { .row .column {
display: block; display: block;
flex: 1; flex: 1 1 auto;
margin-left: 0; margin-left: 0;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
@ -506,6 +506,7 @@ ul {
} }
table { table {
border-spacing: 0;
width: 100%; width: 100%;
} }
@ -548,7 +549,7 @@ h6 {
} }
h1 { h1 {
font-size: 4.0rem; font-size: 4.6rem;
line-height: 1.2; line-height: 1.2;
} }
@ -558,12 +559,12 @@ h2 {
} }
h3 { h3 {
font-size: 3.0rem; font-size: 2.8rem;
line-height: 1.3; line-height: 1.3;
} }
h4 { h4 {
font-size: 2.4rem; font-size: 2.2rem;
letter-spacing: -.08rem; letter-spacing: -.08rem;
line-height: 1.35; line-height: 1.35;
} }
@ -580,27 +581,6 @@ h6 {
line-height: 1.4; line-height: 1.4;
} }
@media (min-width: 40rem) {
h1 {
font-size: 5.0rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3.0rem;
}
h5 {
font-size: 2.4rem;
}
h6 {
font-size: 1.5rem;
}
}
img { img {
max-width: 100%; max-width: 100%;
} }

2
dist/milligram.css.map vendored
View File

File diff suppressed because one or more lines are too long

8
dist/milligram.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/milligram.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

62
examples/index.html
View File

@ -6,11 +6,11 @@
<meta name="author" content="CJ Patoilo"> <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."> <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> <title>Milligram | A minimalist CSS framework.</title>
<link rel="icon" href="https://milligram.github.io/images/favicon.ico"> <link rel="icon" href="https://milligram.github.io/images/icon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> <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="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="../dist/milligram.min.css"> <link rel="stylesheet" href="../dist/milligram.min.css">
<link rel="stylesheet" href="https://milligram.github.io/styles/main.min.css"> <link rel="stylesheet" href="https://milligram.github.io/styles/main.css">
</head> </head>
<body> <body>
@ -18,31 +18,34 @@
<nav class="navigation"> <nav class="navigation">
<section class="container"> <section class="container">
<a class="navigation-title" href="https://milligram.github.io/"> <a class="navigation-title" href="https://milligram.github.io/">
<img class="img" src="https://milligram.github.io/images/logo.svg" height="30" alt="Milligram" title="Milligram"> <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> <h1 class="title">Milligram</h1>
</a> </a>
<ul class="navigation-list float-right"> <ul class="navigation-list float-right">
<li class="navigation-item"> <li class="navigation-item">
<a class="navigation-link" href="#popover-grid" data-popover>Docs</a> <a class="navigation-link" href="#popover-grid" data-popover>Docs</a>
<div class="popover" id="popover-grid"> <div class="popover" id="popover-grid">
<ul class="popover-list"> <ul class="popover-list">
<li class="popover-item"><a class="popover-link" href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li> <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="https://milligram.github.io/#typography" title="Typography">Typography</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="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</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="https://milligram.github.io/#buttons" title="Buttons">Buttons</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="https://milligram.github.io/#lists" title="Lists">Lists</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="https://milligram.github.io/#forms" title="Forms">Forms</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="https://milligram.github.io/#tables" title="Tables">Tables</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="https://milligram.github.io/#grids" title="Grids">Grids</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="https://milligram.github.io/#codes" title="Codes">Codes</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="https://milligram.github.io/#utilities" title="Utilities">Utilities</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="https://milligram.github.io/#tips" title="Tips">Tips</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="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</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="https://milligram.github.io/#examples" title="Examples">Examples</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="https://milligram.github.io/#contributing" title="Contributing">Contributing</a></li> <li class="popover-item"><a class="popover-link" href="#contributing" title="Contributing">Contributing</a></li>
</ul> </ul>
</div> </div>
</li> </li>
@ -50,20 +53,19 @@
<a class="navigation-link" href="#popover-support" data-popover>Support</a> <a class="navigation-link" href="#popover-support" data-popover>Support</a>
<div class="popover" id="popover-support"> <div class="popover" id="popover-support">
<ul class="popover-list"> <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://github.com/milligram/milligram" title="On Github">On Github</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://codepen.io/milligramcss" title="On Codepen">On Codepen</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://facebook.com/milligramcss" title="On Facebook">On Facebook</a></li>
<li class="popover-item"><a class="popover-link" target="_blank" href="https://github.com/milligram/milligram/releases" title="Versions">Versions</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> </ul>
</div> </div>
</li> </li>
</ul> </ul>
<a class="hidden-xs github-corner" href="https://github.com/milligram/milligram" title="Milligram on Github" target="_blank"> <a href="https://github.com/milligram/milligram" title="Milligram on Github" target="_blank">
<svg width="80" height="80" viewBox="0 0 250 250" class="github-corner"> <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>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path 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" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path 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" fill="currentColor" class="octo-body"></path>
</svg>
</a> </a>
</section> </section>
</nav> </nav>
@ -102,7 +104,7 @@
</main> </main>
<script src="https://milligram.github.io/scripts/main.min.js"></script> <script src="https://milligram.github.io/scripts/main.js"></script>
</body> </body>
</html> </html>

2
license
View File

@ -1,6 +1,6 @@
The MIT License (MIT) The MIT License (MIT)
Copyright © 2016 CJ Patoilo <cjpatoilo@gmail.com> Copyright © 2017 CJ Patoilo <cjpatoilo@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

12
package.js
View File

@ -1,14 +1,14 @@
Package.describe({ Package.describe({
name: 'milligram:milligram', name: 'milligram:milligram',
version: '1.2.4', version: '1.3.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(function (api) { Package.onUse((api) => {
api.versionsFrom('METEOR@1.0'); api.versionsFrom('METEOR@1.0')
api.addFiles([ api.addFiles([
'dist/milligram.css' 'dist/milligram.css'
], 'client'); ], 'client')
}); })

19
package.json
View File

@ -1,8 +1,8 @@
{ {
"name": "milligram", "name": "milligram",
"version": "1.2.4", "version": "1.3.0",
"description": "A minimalist CSS framework.", "description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io", "homepage": "https://milligram.github.io",
"repository": "milligram/milligram", "repository": "milligram/milligram",
"license": "MIT", "license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>", "author": "CJ Patoilo <cjpatoilo@gmail.com>",
@ -54,6 +54,9 @@
"backstopjs": "^2.3.5", "backstopjs": "^2.3.5",
"banner-cli": "^0.9.2", "banner-cli": "^0.9.2",
"browser-sync": "^2.18.5", "browser-sync": "^2.18.5",
"editorconfig-tools": "^0.1.1",
"eslint": "^3.14.0",
"eslint-config-styled": "^0.0.0",
"husky": "^0.11.9", "husky": "^0.11.9",
"node-sass": "^3.13.1", "node-sass": "^3.13.1",
"npm-run-all": "^2.3.0", "npm-run-all": "^2.3.0",
@ -73,16 +76,14 @@
"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css", "sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
"autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r dist/*.css", "autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r dist/*.css",
"banner": "banner-cli dist/*.css", "banner": "banner-cli dist/*.css",
"watch": "onchange src -- run-s build", "watch": "onchange src -- run-p build",
"serve": "browser-sync start --no-notify -s test --ss dist -f dist", "serve": "browser-sync start --no-notify -s test --ss dist -f dist",
"test": "run-s lint ava",
"lint": "sass-lint -c .sasslintrc \"src/*.sass\" --verbose --no-exit",
"ava": "nyc ava",
"backstop": "run-s build && run-p serve compare", "backstop": "run-s build && run-p serve compare",
"reference": "backstop reference --configPath=backstop.conf.js", "reference": "backstop reference --configPath=backstop.conf.js",
"compare": "backstop test --configPath=backstop.conf.js", "compare": "backstop test --configPath=backstop.conf.js",
"precommit": "run-s build test", "lint": "sass-lint -c .sasslintrc src --verbose --no-exit && eslint test -c styled && editorconfig-tools check .",
"prestart": "npm install", "ava": "nyc ava",
"pretest": "npm install" "test": "run-s build lint ava",
"precommit": "run-p test"
} }
} }

36
readme.md
View File

@ -1,4 +1,4 @@
<a align="center" href="http://milligram.github.io"><img width="100%" src="https://milligram.github.io/images/thumbnail.png" alt="Milligram - A minimalist CSS framework"></a> <a align="center" href="https://milligram.github.io"><img width="100%" src="https://milligram.github.io/images/thumbnail.png" alt="Milligram - A minimalist CSS framework"></a>
> A minimalist CSS framework. > A minimalist CSS framework.
@ -11,7 +11,7 @@
[![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)
## 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!
@ -30,22 +30,28 @@ $ bower install milligram
$ npm install milligram $ npm install milligram
``` ```
**Install with Yarn**
```sh
$ yarn add milligram
```
## Table of Contents ## Table of Contents
- [Getting Started](http://milligram.github.io/#getting-started) - [Getting Started](https://milligram.github.io/#getting-started)
- [Typography](http://milligram.github.io/#typography) - [Typography](https://milligram.github.io/#typography)
- [Blockquotes](http://milligram.github.io/#blockquotes) - [Blockquotes](https://milligram.github.io/#blockquotes)
- [Buttons](http://milligram.github.io/#buttons) - [Buttons](https://milligram.github.io/#buttons)
- [Lists](http://milligram.github.io/#lists) - [Lists](https://milligram.github.io/#lists)
- [Forms](http://milligram.github.io/#forms) - [Forms](https://milligram.github.io/#forms)
- [Tables](http://milligram.github.io/#tables) - [Tables](https://milligram.github.io/#tables)
- [Grids](http://milligram.github.io/#grids) - [Grids](https://milligram.github.io/#grids)
- [Codes](http://milligram.github.io/#codes) - [Codes](https://milligram.github.io/#codes)
- [Utilities](http://milligram.github.io/#utilities) - [Utilities](https://milligram.github.io/#utilities)
- [Tips](http://milligram.github.io/#tips) - [Tips](https://milligram.github.io/#tips)
- [Browser Support](http://milligram.github.io/#browser-support) - [Browser Support](https://milligram.github.io/#browser-support)
- [Examples](http://milligram.github.io/#examples) - [Examples](https://milligram.github.io/#examples)
## Contributing ## Contributing

27
src/_Typography.sass
View File

@ -21,43 +21,28 @@ h6
margin-top: 0 margin-top: 0
h1 h1
font-size: 4.6rem
line-height: 1.2 line-height: 1.2
h2 h2
font-size: 3.6rem
line-height: 1.25 line-height: 1.25
h3 h3
font-size: 2.8rem
line-height: 1.3 line-height: 1.3
h4 h4
font-size: 2.2rem
letter-spacing: -.08rem letter-spacing: -.08rem
line-height: 1.35 line-height: 1.35
h5 h5
font-size: 1.8rem
letter-spacing: -.05rem letter-spacing: -.05rem
line-height: 1.5 line-height: 1.5
h6 h6
font-size: 1.6rem
letter-spacing: 0 letter-spacing: 0
line-height: 1.4 line-height: 1.4
// Larger than mobile screen
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
h1
font-size: 4.8rem
h2
font-size: 3.6rem
h3
font-size: 2.4rem
h4
font-size: 2.1rem
h5
font-size: 1.8rem
h6
font-size: 1.4rem

16
test/index.html
View File

@ -6,11 +6,11 @@
<meta name="author" content="CJ Patoilo"> <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."> <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> <title>Milligram | A minimalist CSS framework.</title>
<link rel="icon" href="https://milligram.github.io/images/favicon.ico"> <link rel="icon" href="https://milligram.github.io/images/icon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> <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/5.0.0/normalize.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<link rel="stylesheet" href="milligram.min.css"><!-- to generate this style run `$ npm start` --> <link rel="stylesheet" href="milligram.min.css"><!-- to generate this style run `$ npm start` -->
<link rel="stylesheet" href="https://milligram.github.io/styles/main.min.css"> <link rel="stylesheet" href="https://milligram.github.io/styles/main.css">
</head> </head>
<body> <body>
@ -26,12 +26,12 @@
<div class="example"> <div class="example">
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 5.0rem (50px)</span></h1> <h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 4.6rem (46px)</span></h1>
<h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 4.2rem (42px)</span></h2> <h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 3.6rem (36px)</span></h2>
<h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 3.6rem (36px)</span></h3> <h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 2.8rem (28px)</span></h3>
<h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 3.0rem (30px)</span></h4> <h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 2.2rem (22px)</span></h4>
<h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 2.4rem (24px)</span></h5> <h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 1.8rem (18px)</span></h5>
<h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.5rem (15px)</span></h6> <h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.6rem (16px)</span></h6>
</div> </div>
<div class="column"> <div class="column">
<p>Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.</p> <p>Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.</p>

BIN
test/regression/486021560_Blockquotes_0_blockquotes_0_phone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
test/regression/486021560_Blockquotes_0_blockquotes_1_laptop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
test/regression/486021560_Blockquotes_0_blockquotesexample_0_phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
test/regression/486021560_Blockquotes_0_blockquotesexample_1_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
test/regression/486021560_Buttons_0_buttons_0_phone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 77 KiB

BIN
test/regression/486021560_Buttons_0_buttons_1_laptop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 64 KiB

BIN
test/regression/486021560_Buttons_0_buttonsexample_0_phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
test/regression/486021560_Buttons_0_buttonsexample_1_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
test/regression/486021560_Codes_0_codes_0_phone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.4 KiB

BIN
test/regression/486021560_Codes_0_codes_1_laptop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

BIN
test/regression/486021560_Codes_0_codesexample_0_phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
test/regression/486021560_Codes_0_codesexample_1_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
test/regression/486021560_Forms_0_forms_0_phone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
test/regression/486021560_Forms_0_forms_1_laptop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
test/regression/486021560_Forms_0_formsexample_0_phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
test/regression/486021560_Forms_0_formsexample_1_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
test/regression/486021560_Grids_0_grids_0_phone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 127 KiB

BIN
test/regression/486021560_Grids_0_grids_1_laptop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 147 KiB

BIN
test/regression/486021560_Grids_0_gridsexample_0_phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
test/regression/486021560_Grids_0_gridsexample_1_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
test/regression/486021560_Lists_0_lists_0_phone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 84 KiB

BIN
test/regression/486021560_Lists_0_lists_1_laptop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 90 KiB

BIN
test/regression/486021560_Lists_0_listsexample_0_phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
test/regression/486021560_Lists_0_listsexample_1_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
test/regression/486021560_Tables_0_tables_0_phone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
test/regression/486021560_Tables_0_tables_1_laptop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
test/regression/486021560_Tables_0_tablesexample_0_phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
test/regression/486021560_Tables_0_tablesexample_1_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
test/regression/486021560_Typography_0_typography_0_phone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 89 KiB

BIN
test/regression/486021560_Typography_0_typography_1_laptop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 95 KiB

BIN
test/regression/486021560_Typography_0_typographyexample_0_phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
test/regression/486021560_Typography_0_typographyexample_1_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
test/regression/486021560_Utilities_0_utilities_0_phone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 KiB

BIN
test/regression/486021560_Utilities_0_utilities_1_laptop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.0 KiB

BIN
test/regression/486021560_Utilities_0_utilitiesexample_0_phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
test/regression/486021560_Utilities_0_utilitiesexample_1_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

36
test/unit/build.js
View File

@ -1,33 +1,33 @@
const test = require('ava'); const test = require('ava')
const fs = require('fs'); const fs = require('fs')
const path = require('path'); 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')
}); })
}); })

92
test/unit/packages.js
View File

@ -1,92 +1,92 @@
const test = require('ava'); const test = require('ava')
const npm = require('../../package.json'); 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, npm,
bower, bower,
composer 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('/')) compareValue.name = compareValue.name.split('/')[1]
if (referenceIndex !== compareIndex) t.is(referenceValue.name, compareValue.name); 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))
}); })
}); })
}); })

5111
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff