Merge branch 'release/release/v1.2.0-rc3'
This commit is contained in:
CJ Patoilo
commit
463220786a
6
.github/contributing.md
vendored
6
.github/contributing.md
vendored
@ -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)
|
||||
- [Building](#building)
|
||||
- [Style Guide](#style-guide)
|
||||
- [Test](#test)
|
||||
- [Code of Conduct](#code-of-conduct)
|
||||
- [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.*
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
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
4
dist/milligram.css
vendored
@ -639,6 +639,10 @@ h6 {
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
2
dist/milligram.css.map
vendored
2
dist/milligram.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/milligram.min.css
vendored
2
dist/milligram.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/milligram.min.css.map
vendored
2
dist/milligram.min.css.map
vendored
File diff suppressed because one or more lines are too long
@ -2,40 +2,15 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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="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 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>
|
||||
<link rel="canonical" href="https://milligram.github.io/">
|
||||
<link rel="image_src" href="https://milligram.github.io/img/thumbnail.jpg">
|
||||
<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/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://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="icon" href="https://milligram.github.io/img/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -50,38 +25,38 @@
|
||||
</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="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>
|
||||
</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">
|
||||
@ -94,29 +69,29 @@
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<footer class="footer">
|
||||
@ -127,8 +102,7 @@
|
||||
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
16
package.json
16
package.json
@ -47,21 +47,25 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.3.6",
|
||||
"backstopjs": "^1.3.5",
|
||||
"browser-sync": "^2.13.0",
|
||||
"node-sass": "^3.7.0",
|
||||
"npm-run-all": "^2.1.1",
|
||||
"onchange": "^2.4.0",
|
||||
"postcss-cli": "^2.5.2"
|
||||
"postcss-cli": "^2.5.2",
|
||||
"slimerjs": "^0.906.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^6.0.0"
|
||||
},
|
||||
"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: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: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",
|
||||
"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",
|
||||
"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",
|
||||
"build": "npm-run-all sass autoprefixer banner",
|
||||
"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
6
src/_Image.sass
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
// Image
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
@ -15,4 +15,5 @@
|
||||
@import Spacing
|
||||
@import Table
|
||||
@import Typography
|
||||
@import Image
|
||||
@import Utility
|
||||
|
||||
204
test/index.html
Normal file
204
test/index.html
Normal 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><h1></code> 5.0rem (50px)</span></h1>
|
||||
<h2>Heading<span class="heading-font-size"> <code><h2></code> 4.2rem (42px)</span></h2>
|
||||
<h3>Heading<span class="heading-font-size"> <code><h3></code> 3.6rem (36px)</span></h3>
|
||||
<h4>Heading<span class="heading-font-size"> <code><h4></code> 3.0rem (30px)</span></h4>
|
||||
<h5>Heading<span class="heading-font-size"> <code><h5></code> 2.4rem (24px)</span></h5>
|
||||
<h6>Heading<span class="heading-font-size"> <code><h6></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 …" 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
33
test/visual/backstop.config.js
Normal 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
4
test/visual/fixtures/onBefore.js
Normal 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
4
test/visual/fixtures/onReady.js
Normal 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
BIN
test/visual/reference/0_0_body_0_phone_v.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
test/visual/reference/0_0_body_1_phone_h.png
Normal file
BIN
test/visual/reference/0_0_body_1_phone_h.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
test/visual/reference/0_0_body_2_tablet_v.png
Normal file
BIN
test/visual/reference/0_0_body_2_tablet_v.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
test/visual/reference/0_0_body_3_tablet_h.png
Normal file
BIN
test/visual/reference/0_0_body_3_tablet_h.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
test/visual/reference/0_0_body_4_laptop.png
Normal file
BIN
test/visual/reference/0_0_body_4_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
BIN
test/visual/reference/0_0_body_5_desktop.png
Normal file
BIN
test/visual/reference/0_0_body_5_desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Loading…
Reference in New Issue
Block a user