library-mirrors/milligram
1
0
Fork 0
mirror of https://github.com/milligram/milligram.git synced 2024-11-13 16:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/improvements' into develop

Browse Source
This commit is contained in:
CJ Patoilo 2016-07-31 21:29:16 -03:00
commit e5d808b7f3
14 changed files with 316 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
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>
@ -116,7 +91,7 @@
<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