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

Merge branch 'release/release/v1.2.0-rc3'

Browse Source
This commit is contained in:
CJ Patoilo 2016-08-01 01:02:38 -03:00
commit 463220786a
19 changed files with 329 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.github/contributing.md vendored
View File

@ -9,6 +9,7 @@ We would love for you to contribute to Milligram and help us make this even bett
- [Submit a Pull Request](#submit-a-pull-request) - [Submit a Pull Request](#submit-a-pull-request)
- [Building](#building) - [Building](#building)
- [Style Guide](#style-guide) - [Style Guide](#style-guide)
- [Test](#test)
- [Code of Conduct](#code-of-conduct) - [Code of Conduct](#code-of-conduct)
- [License](#license) - [License](#license)
@ -80,6 +81,11 @@ Milligram use [Sass](http://sass-lang.com/) to give super powers to CSS. Look at
*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). Milligram uses an `.editorconfig` file, which most editors support, to enforce these coding standards.*
## 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.
## 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/).

4
dist/milligram.css vendored
View File

@ -639,6 +639,10 @@ h6 {
} }
} }
img {
max-width: 100%;
}
.float-right { .float-right {
float: right; float: right;
} }

2
dist/milligram.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
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

132
examples/index.html
View File

@ -2,40 +2,15 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#f4f5f6">
<meta name="apple-mobile-web-app-status-bar-style" content="#f4f5f6">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<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.">
<meta property="og: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 property="og:image" content="https://milligram.github.io/img/thumbnail.jpg">
<meta property="og:locale" content="en">
<meta property="og:site_name" content="Milligram | A minimalist CSS framework.">
<meta property="og:title" content="Milligram | A minimalist CSS framework.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://milligram.github.io/">
<meta property="article:published_time" content="2015-12-25T01:00:00Z">
<meta property="article:author" content="CJ Patoilo">
<meta property="article:section" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="Milligram | A minimalist CSS framework.">
<meta name="twitter:url" content="https://milligram.github.io/">
<meta name="twitter:site" content="https://milligram.github.io/">
<meta name="twitter:creator" content="CJ Patoilo">
<meta name="twitter:title" content="Milligram | A minimalist CSS framework.">
<meta name="twitter: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="twitter:image:src" content="https://milligram.github.io/img/thumbnail.jpg">
<title>Milligram | A minimalist CSS framework.</title> <title>Milligram | A minimalist CSS framework.</title>
<link rel="canonical" href="https://milligram.github.io/"> <link rel="icon" href="https://milligram.github.io/img/favicon.ico">
<link rel="image_src" href="https://milligram.github.io/img/thumbnail.jpg">
<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/font-awesome/4.5.0/css/font-awesome.min.css">
<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="https://milligram.github.io/css/milligram.min.css"> <link rel="stylesheet" href="../dist/milligram.min.css">
<link rel="stylesheet" href="https://milligram.github.io/css/style.css"> <link rel="stylesheet" href="https://milligram.github.io/css/style.css">
<link rel="icon" href="https://milligram.github.io/img/favicon.png">
</head> </head>
<body> <body>
@ -50,38 +25,38 @@
</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="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/#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/#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/#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/#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/#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/#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/#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/#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/#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/#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/#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/#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="https://milligram.github.io/#contributing" title="Contributing">Contributing</a></li>
</ul> </ul>
</div> </div>
</li> </li>
<li class="navigation-item"> <li class="navigation-item">
<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://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#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> <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 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"> <svg width="80" height="80" viewBox="0 0 250 250" class="github-corner">
@ -94,29 +69,29 @@
</nav> </nav>
<section class="container" id="examples"> <section class="container" id="examples">
<h5 class="title">Examples</h5> <h5 class="title">Examples</h5>
<p>You can view more examples of using Milligram.</p> <p>You can view more examples of using Milligram.</p>
<p> <p>
<ul> <ul>
<li><a href="https://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li> <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/#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/#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/#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/#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/#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/#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/#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/#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/#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/#tips" title="Tips">Tips</a></li>
<li><a href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li> <li><a href="https://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
</ul> </ul>
</p> </p>
</section> </section>
<section class="container" id="contributing"> <section class="container" id="contributing">
<h5 class="title">Contributing</h5> <h5 class="title">Contributing</h5>
<p>Want to contribute? Follow these <a href="https://github.com/milligram/milligram/blob/master/contributing.md" title="Contributing">recommendations</a>.</p> <p>Want to contribute? Follow these <a href="https://github.com/milligram/milligram/blob/master/.github/contributing.md" title="Contributing">recommendations</a>.</p>
</section> </section>
<footer class="footer"> <footer class="footer">
@ -127,7 +102,6 @@
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>
<script src="https://milligram.github.io/js/script.js"></script> <script src="https://milligram.github.io/js/script.js"></script>
</body> </body>

16
package.json
View File

@ -47,21 +47,25 @@
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.3.6", "autoprefixer": "^6.3.6",
"backstopjs": "^1.3.5",
"browser-sync": "^2.13.0",
"node-sass": "^3.7.0", "node-sass": "^3.7.0",
"npm-run-all": "^2.1.1", "npm-run-all": "^2.1.1",
"onchange": "^2.4.0", "onchange": "^2.4.0",
"postcss-cli": "^2.5.2" "postcss-cli": "^2.5.2",
"slimerjs": "^0.906.2"
}, },
"engines": { "engines": {
"node": "^6.0.0" "node": "^6.0.0"
}, },
"scripts": { "scripts": {
"banner:expanded": "echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - dist/milligram.css > temp && mv temp dist/milligram.css", "banner": "for m in dist/*.css; do echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - $m > temp && mv temp $m; done",
"banner:compressed": "echo '/*!\n * Milligram v1.1.0\n * http://milligram.github.io\n *\n * Copyright (c) 2016 CJ Patoilo\n * Licensed under the MIT license\n*/\n' | cat - dist/milligram.min.css > temp && mv temp 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",
"sass:expanded": "node-sass --output-style expanded src/milligram.sass dist/milligram.css",
"sass:compressed": "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",
"build": "npm-run-all sass autoprefixer banner",
"watch": "onchange src -- npm run build", "watch": "onchange src -- npm run build",
"build": "npm-run-all sass:expanded sass:compressed autoprefixer banner:expanded banner:compressed" "serve": "browser-sync start -s test --ss dist -f dist",
"start": "npm-run-all -p watch serve",
"test": "cd node_modules/backstopjs && npm run test -- --configPath=../../test/visual/backstop.config.js && cd ../../"
} }
} }

6
src/_Image.sass Normal file
View File

@ -0,0 +1,6 @@
// Image
// ––––––––––––––––––––––––––––––––––––––––––––––––––
img
max-width: 100%

1
src/milligram.sass
View File

@ -15,4 +15,5 @@
@import Spacing @import Spacing
@import Table @import Table
@import Typography @import Typography
@import Image
@import Utility @import Utility

204
test/index.html Normal file
View File

@ -0,0 +1,204 @@
<!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.github.io/img/favicon.ico">
<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="milligram.min.css"><!-- to generate this style run `$ npm start` -->
<link rel="stylesheet" href="https://milligram.github.io/css/style.css">
</head>
<body>
<main class="wrapper">
<section class="container" id="typography">
<h5 class="title">Typography</h5>
<div class="example">
<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>
</div>
<p>See more examples of <strong>typography</strong> <a href="typography.html" title="Examples about typography">here</a>.</p>
</section>
<section class="container" id="blockquotes">
<h5 class="title">Blockquotes</h5>
<div class="example">
<blockquote>
<p><em>Yeah!! Milligram is amazing.</em></p>
</blockquote>
</div>
<p>See more examples of <strong>blockquotes</strong> <a href="blockquotes.html" title="Examples about blockquotes">here</a>.</p>
</section>
<section class="container" id="buttons">
<h5 class="title">Buttons</h5>
<div class="example">
<a class="button" href="javascript: void(0)">Default Button</a>
<button class="button button-outline">Outlined Button</button>
<input class="button button-clear" type="submit" value="Clear Button">
</div>
<p>See more examples of <strong>buttons</strong> <a href="buttons.html" title="Examples about buttons">here</a>.</p>
</section>
<section class="container" id="lists">
<h5 class="title">Lists</h5>
<div class="example">
<div class="row">
<div class="column">
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
</div>
<div class="column">
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
</div>
<div class="column">
<dl>
<dt>Description list item 1</dt>
<dd>Description list item 1.1</dd>
</dl>
</div>
</div>
</div>
<p>See more examples of <strong>lists</strong> <a href="lists.html" title="Examples about lists">here</a>.</p>
</section>
<section class="container" id="forms">
<h5 class="title">Forms</h5>
<div class="example">
<form action="javascript: void(0)">
<fieldset>
<label for="nameField">Name</label>
<input type="text" placeholder="CJ Patoilo" id="nameField">
<label for="commentField">Comment</label>
<textarea placeholder="Hi CJ &hellip;" id="commentField"></textarea>
<div class="example-send-yourself-copy">
<input type="checkbox" id="confirmField">
<label class="label-inline" for="confirmField">Send a copy to yourself</label>
</div>
<input class="button-primary" type="submit" value="Send">
</fieldset>
</form>
</div>
<p>See more examples of <strong>forms</strong> <a href="forms.html" title="Examples about forms">here</a>.</p>
</section>
<section class="container" id="tables">
<h5 class="title">Tables</h5>
<div class="example">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
</div>
<p>See more examples of <strong>tables</strong> <a href="tables.html" title="Examples about tables">here</a>.</p>
</section>
<section class="container" id="grids">
<h5 class="title">Grids</h5>
<div class="example">
<div class="container">
<div class="row">
<div class="column"><span class="column-demo">.column</span></div>
<div class="column"><span class="column-demo">.column</span></div>
<div class="column"><span class="column-demo">.column</span></div>
<div class="column"><span class="column-demo">.column</span></div>
</div>
<div class="row">
<div class="column"><span class="column-demo">.column</span></div>
<div class="column column-50 column-offset-25"><span class="column-demo">.column-50.column-offset-25</span></div>
</div>
</div>
</div>
<p>See more examples of <strong>grids</strong> <a href="grids.html" title="Examples about grids">here</a>.</p>
</section>
<section class="container" id="codes">
<h5 class="title">Codes</h5>
<div class="example">
<pre><code>.milligram {
color: #9b4dca;
}
</code></pre>
</div>
<p>See more examples of <strong>codes</strong> <a href="codes.html" title="Examples about codes">here</a>.</p>
</section>
<section class="container" id="utilities">
<h5 class="title">Utilities</h5>
<div class="example">
<div class="clearfix">
<div class="float-left">
<h6>Float to left</h6>
</div>
<div class="float-right">
<h6>Float to right</h6>
</div>
</div>
</div>
<p>See more examples of <strong>utilities</strong> <a href="utilities.html" title="Examples about utilities">here</a>.</p>
</section>
<section class="container" id="examples">
<h5 class="title">Examples</h5>
<p>
<ul>
<li><a href="https://milligram.github.io/getting-started.html" title="Getting Started">Getting Started</a></li>
<li><a href="https://milligram.github.io/typography.html" title="Typography">Typography</a></li>
<li><a href="https://milligram.github.io/blockquotes.html" title="Blockquotes">Blockquotes</a></li>
<li><a href="https://milligram.github.io/buttons.html" title="Buttons">Buttons</a></li>
<li><a href="https://milligram.github.io/lists.html" title="Lists">Lists</a></li>
<li><a href="https://milligram.github.io/forms.html" title="Forms">Forms</a></li>
<li><a href="https://milligram.github.io/tables.html" title="Tables">Tables</a></li>
<li><a href="https://milligram.github.io/grids.html" title="Grids">Grids</a></li>
<li><a href="https://milligram.github.io/codes.html" title="Codes">Codes</a></li>
<li><a href="https://milligram.github.io/utilities.html" title="Utilities">Utilities</a></li>
<li><a href="https://milligram.github.io/tips.html" title="Tips">Tips</a></li>
<li><a href="https://milligram.github.io/browser-support.html" title="Browser Support">Browser Support</a></li>
</ul>
</p>
</section>
<footer class="footer">
<section class="container">
<p>Designed with ♥ by <a target="blank" href="http://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>
</body>
</html>

33
test/visual/backstop.config.js Normal file
View File

@ -0,0 +1,33 @@
module.exports = {
viewports: [
{ name: 'phone_v', width: 320, height: 480 },
{ name: 'phone_h', width: 480, height: 320 },
{ name: 'tablet_v', width: 768, height: 1024 },
{ name: 'tablet_h', width: 1024, height: 768 },
{ name: 'laptop', width: 1280, height: 800 },
{ name: 'desktop', width: 1920, height: 1080 }
],
scenarios: [{
label: 'Milligram | A minimalist CSS framework.',
url: 'http://localhost:3000',
hideSelectors: [],
removeSelectors: ['.__bs_notify__'],
selectors: ['body'],
readyEvent: null,
delay: 500,
misMatchThreshold: 0.1,
onBeforeScript: 'onBefore.js',
onReadyScript: 'onReady.js'
}],
paths: {
bitmaps_reference: '../../test/visual/reference',
bitmaps_test: '.tmp',
casper_scripts: '../../test/visual/fixtures',
compare_data: '.tmp/compare.json'
},
engine: 'slimerjs',
report: ['browser'],
casperFlags: [],
debug: false,
port: 3002
}

4
test/visual/fixtures/onBefore.js Normal file
View File

@ -0,0 +1,4 @@
module.exports = function(casper, scenario, vp) {
casper.echo('onBeforeEach.js', 'INFO');
casper.wait(50);
};

4
test/visual/fixtures/onReady.js Normal file
View File

@ -0,0 +1,4 @@
module.exports = function(casper, scenario, vp) {
casper.echo('onReady.js', 'INFO');
casper.wait(50);
};

BIN
test/visual/reference/0_0_body_0_phone_v.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
test/visual/reference/0_0_body_1_phone_h.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
test/visual/reference/0_0_body_2_tablet_v.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
test/visual/reference/0_0_body_3_tablet_h.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
test/visual/reference/0_0_body_4_laptop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

BIN
test/visual/reference/0_0_body_5_desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB