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

Added server to preview the changes

Browse Source
This commit is contained in:
CJ Patoilo 2016-07-31 17:48:42 -03:00
parent ad24a05c0f
commit 1d20b81f03
3 changed files with 264 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

11
package.json
View File

@ -47,6 +47,7 @@
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.3.6", "autoprefixer": "^6.3.6",
"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",
@ -56,12 +57,12 @@
"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"
} }
} }

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>