mirror of
https://github.com/milligram/milligram.git
synced 2024-11-13 16:54:22 +00:00
Merge branch 'feature/improvements' into develop
This commit is contained in:
CJ Patoilo
commit
e5d808b7f3
@ -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>
|
||||
|
||||
@ -116,7 +91,7 @@
|
||||
|
||||
<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,7 +102,6 @@
|
||||
|
||||
</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>
|
||||
|
||||
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