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

Merge branch 'master' into feature-more-form-types

Browse Source
This commit is contained in:
MKody 2018-02-07 14:24:48 +01:00
commit acd8800081
57 changed files with 5370 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.eslintrc
View File

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

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

4
bower.json
View File

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

4
changelog.md
View File

@ -1,5 +1,5 @@
# 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",
"version": "1.2.4",
"version": "1.3.0",
"description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io",
"homepage": "https://milligram.github.io",
"repository": "milligram/milligram",
"license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>",

39
dist/milligram.css vendored
View File

@ -1,8 +1,8 @@
/*!
* Milligram v1.2.4
* http://milligram.github.io
* Milligram v1.3.0
* https://milligram.github.io
*
* Copyright (c) 2017 CJ Patoilo
* Copyright (c) 2018 CJ Patoilo
* Licensed under the MIT license
*/
@ -210,6 +210,7 @@ input[type='month'],
input[type='week'],
input[type='datetime'],
input[type='datetime-local'],
input:not([type]),
textarea,
select {
-webkit-appearance: none;
@ -238,6 +239,7 @@ 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;
@ -245,12 +247,12 @@ select:focus {
}
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="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
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="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
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 {
@ -561,7 +563,7 @@ h6 {
}
h1 {
font-size: 4.0rem;
font-size: 4.6rem;
line-height: 1.2;
}
@ -571,12 +573,12 @@ h2 {
}
h3 {
font-size: 3.0rem;
font-size: 2.8rem;
line-height: 1.3;
}
h4 {
font-size: 2.4rem;
font-size: 2.2rem;
letter-spacing: -.08rem;
line-height: 1.35;
}
@ -593,27 +595,6 @@ h6 {
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 {
max-width: 100%;
}

2
dist/milligram.css.map vendored
View File

File diff suppressed because one or more lines are too long

10
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

126
examples/index.html
View File

@ -6,11 +6,11 @@
<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.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://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.github.io/styles/main.min.css">
<link rel="stylesheet" href="https://milligram.github.io/styles/main.css">
</head>
<body>
@ -18,75 +18,77 @@
<nav class="navigation">
<section class="container">
<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>
</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="https://milligram.github.io/#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="https://milligram.github.io/#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="https://milligram.github.io/#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="https://milligram.github.io/#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="https://milligram.github.io/#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="https://milligram.github.io/#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="https://milligram.github.io/#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>
</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://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>
<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 class="hidden-xs github-corner" 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">
<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 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.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
<li><a href="https://milligram.github.io/#typography" title="Typography">Typography</a></li>
<li><a href="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
<li><a href="https://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
<li><a href="https://milligram.github.io/#lists" title="Lists">Lists</a></li>
<li><a href="https://milligram.github.io/#forms" title="Forms">Forms</a></li>
<li><a href="https://milligram.github.io/#tables" title="Tables">Tables</a></li>
<li><a href="https://milligram.github.io/#grids" title="Grids">Grids</a></li>
<li><a href="https://milligram.github.io/#codes" title="Codes">Codes</a></li>
<li><a href="https://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
<li><a href="https://milligram.github.io/#tips" title="Tips">Tips</a></li>
<li><a href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
</ul>
</p>
<h5 class="title">Examples</h5>
<p>You can view more examples of using Milligram.</p>
<p>
<ul>
<li><a href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
<li><a href="https://milligram.github.io/#typography" title="Typography">Typography</a></li>
<li><a href="https://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
<li><a href="https://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
<li><a href="https://milligram.github.io/#lists" title="Lists">Lists</a></li>
<li><a href="https://milligram.github.io/#forms" title="Forms">Forms</a></li>
<li><a href="https://milligram.github.io/#tables" title="Tables">Tables</a></li>
<li><a href="https://milligram.github.io/#grids" title="Grids">Grids</a></li>
<li><a href="https://milligram.github.io/#codes" title="Codes">Codes</a></li>
<li><a href="https://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
<li><a href="https://milligram.github.io/#tips" title="Tips">Tips</a></li>
<li><a href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
</ul>
</p>
</section>
<section class="container" id="contributing">
@ -102,7 +104,7 @@
</main>
<script src="https://milligram.github.io/scripts/main.min.js"></script>
<script src="https://milligram.github.io/scripts/main.js"></script>
</body>
</html>

2
license
View File

@ -1,6 +1,6 @@
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
of this software and associated documentation files (the "Software"), to deal

12
package.js
View File

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

21
package.json
View File

@ -1,8 +1,8 @@
{
"name": "milligram",
"version": "1.2.4",
"version": "1.3.0",
"description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io",
"homepage": "https://milligram.github.io",
"repository": "milligram/milligram",
"license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
@ -52,8 +52,11 @@
"autoprefixer": "^6.5.4",
"ava": "^0.17.0",
"backstopjs": "^2.3.5",
"banner-cli": "^0.9.2",
"banner-cli": "^0.11.0",
"browser-sync": "^2.18.5",
"editorconfig-tools": "^0.1.1",
"eslint": "^3.14.0",
"eslint-config-styled": "^0.0.0",
"husky": "^0.11.9",
"node-sass": "^3.13.1",
"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",
"autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r 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",
"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",
"reference": "backstop reference --configPath=backstop.conf.js",
"compare": "backstop test --configPath=backstop.conf.js",
"precommit": "run-s build test",
"prestart": "npm install",
"pretest": "npm install"
"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"
}
}

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.
@ -11,7 +11,7 @@
[![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!
@ -30,22 +30,28 @@ $ bower install milligram
$ npm install milligram
```
**Install with Yarn**
```sh
$ yarn add milligram
```
## Table of Contents
- [Getting Started](http://milligram.github.io/#getting-started)
- [Typography](http://milligram.github.io/#typography)
- [Blockquotes](http://milligram.github.io/#blockquotes)
- [Buttons](http://milligram.github.io/#buttons)
- [Lists](http://milligram.github.io/#lists)
- [Forms](http://milligram.github.io/#forms)
- [Tables](http://milligram.github.io/#tables)
- [Grids](http://milligram.github.io/#grids)
- [Codes](http://milligram.github.io/#codes)
- [Utilities](http://milligram.github.io/#utilities)
- [Tips](http://milligram.github.io/#tips)
- [Browser Support](http://milligram.github.io/#browser-support)
- [Examples](http://milligram.github.io/#examples)
- [Getting Started](https://milligram.github.io/#getting-started)
- [Typography](https://milligram.github.io/#typography)
- [Blockquotes](https://milligram.github.io/#blockquotes)
- [Buttons](https://milligram.github.io/#buttons)
- [Lists](https://milligram.github.io/#lists)
- [Forms](https://milligram.github.io/#forms)
- [Tables](https://milligram.github.io/#tables)
- [Grids](https://milligram.github.io/#grids)
- [Codes](https://milligram.github.io/#codes)
- [Utilities](https://milligram.github.io/#utilities)
- [Tips](https://milligram.github.io/#tips)
- [Browser Support](https://milligram.github.io/#browser-support)
- [Examples](https://milligram.github.io/#examples)
## Contributing

5
src/_Form.sass
View File

@ -15,6 +15,7 @@ input[type='month'],
input[type='week'],
input[type='datetime'],
input[type='datetime-local'],
input:not([type]),
textarea,
select
appearance: none // Removes awkward default styles on some inputs for iOS
@ -32,11 +33,11 @@ select
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="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat
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
&: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="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')
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

27
src/_Typography.sass
View File

@ -21,7 +21,7 @@ h6
margin-top: 0
h1
font-size: 4.0rem
font-size: 4.6rem
line-height: 1.2
h2
@ -29,11 +29,11 @@ h2
line-height: 1.25
h3
font-size: 3.0rem
font-size: 2.8rem
line-height: 1.3
h4
font-size: 2.4rem
font-size: 2.2rem
letter-spacing: -.08rem
line-height: 1.35
@ -46,24 +46,3 @@ h6
font-size: 1.6rem
letter-spacing: 0
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: 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

16
test/index.html
View File

@ -6,11 +6,11 @@
<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.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://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="https://milligram.github.io/styles/main.min.css">
<link rel="stylesheet" href="https://milligram.github.io/styles/main.css">
</head>
<body>
@ -26,12 +26,12 @@
<div class="example">
<div class="row">
<div class="column">
<h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 5.0rem (50px)</span></h1>
<h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 4.2rem (42px)</span></h2>
<h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 3.6rem (36px)</span></h3>
<h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 3.0rem (30px)</span></h4>
<h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 2.4rem (24px)</span></h5>
<h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.5rem (15px)</span></h6>
<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> 3.6rem (36px)</span></h2>
<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> 2.2rem (22px)</span></h4>
<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.6rem (16px)</span></h6>
</div>
<div class="column">
<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 fs = require('fs');
const path = require('path');
const test = require('ava')
const fs = require('fs')
const path = require('path')
let dist = path.join(__dirname, '../../dist');
let dist = path.join(__dirname, '../../dist')
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 => {
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 => {
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 => {
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 => {
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 npm = require('../../package.json');
const bower = require('../../bower.json');
const composer = require('../../composer.json');
const test = require('ava')
const npm = require('../../package.json')
const bower = require('../../bower.json')
const composer = require('../../composer.json')
const packages = [
npm,
bower,
composer
];
]
test(`Name should be equal "${npm.name}"`, t => {
packages.map((referenceValue, referenceIndex) => {
packages.map((compareValue, compareIndex) => {
if (compareValue.name.match('/')) compareValue.name = compareValue.name.split('/')[1];
if (referenceIndex !== compareIndex) t.is(referenceValue.name, compareValue.name);
});
});
});
if (compareValue.name.match('/')) 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 => {
packages.map((referenceValue, referenceIndex) => {
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 => {
packages.map((referenceValue, referenceIndex) => {
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 => {
packages.map((referenceValue, referenceIndex) => {
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 => {
packages.map((referenceValue, referenceIndex) => {
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 => {
packages.map((referenceValue, referenceIndex) => {
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 => {
packages.map((referenceValue, referenceIndex) => {
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 => {
packages.map((referenceValue, referenceIndex) => {
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 => {
packages.map((referenceValue, referenceIndex) => {
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 => {
packages.map((referenceValue, referenceIndex) => {
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 Normal file
View File

File diff suppressed because it is too large Load Diff