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

Merge branch 'release/v1.0.2'

Browse Source
This commit is contained in:
CJ Patoilo 2015-12-26 18:46:53 -03:00
commit 2fe9b8fa85
27 changed files with 320 additions and 571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig Normal file
View File

@ -0,0 +1,12 @@
# editorconfig.org
root = true
[*]
indent_style = tab
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

59
bower.json
View File

@ -1,61 +1,44 @@
{
"name": "milligram",
"version": "1.0.1",
"version": "1.0.2",
"description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io",
"license": {
"type": "MIT",
"url": "https://cjpatoilo.mit-license.org"
},
"repository": {
"type": "git",
"url": "git+https://github.com/milligram/milligram.git"
},
"bugs": {
"url": "https://github.com/milligram/milligram/issues"
},
"author": {
"name": "CJ Patoilo",
"email": "cjpatoilo@gmail.com",
"url": "http://cjpatoilo.com"
},
"moduleType": "globals",
"main": "dist/milligram.min.css",
"repository": "milligram/milligram",
"license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
"main": "dist/milligram.css",
"keywords": [
"app",
"boilerplate",
"botstrap",
"build",
"bootstrap",
"css",
"css3",
"design",
"dev",
"development",
"front-end",
"framework",
"html",
"html5",
"kickstart",
"less",
"milligram",
"responsive",
"mobile",
"mobile-first",
"responsive",
"sass",
"stack",
"stylus",
"style",
"styles",
"stylesheet",
"stylesheets",
"tool",
"tooling",
"web",
"web-design"
"stylesheet"
],
"ignore": [
".editorconfig",
".gitignore",
".travis.yml",
"component.json",
"package.json",
"gruntfile.js",
"src"
],
"dependencies": {
"normalize.css": "latest"
},
"ignore": [
"**/.*",
"bower_components",
"node_modules"
]
}
}

54
component.json
View File

@ -1,59 +1,43 @@
{
"name": "milligram",
"version": "1.0.1",
"version": "1.0.2",
"description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io",
"license": {
"type": "MIT",
"url": "https://cjpatoilo.mit-license.org"
},
"repository": {
"type": "git",
"url": "git+https://github.com/milligram/milligram.git"
},
"bugs": {
"url": "https://github.com/milligram/milligram/issues"
},
"author": {
"name": "CJ Patoilo",
"email": "cjpatoilo@gmail.com",
"url": "http://cjpatoilo.com"
},
"main": "dist/milligram.min.css",
"repository": "milligram/milligram",
"license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
"main": "dist/milligram.css",
"keywords": [
"app",
"boilerplate",
"botstrap",
"build",
"bootstrap",
"css",
"css3",
"design",
"dev",
"development",
"front-end",
"framework",
"html",
"html5",
"kickstart",
"less",
"milligram",
"responsive",
"mobile",
"mobile-first",
"responsive",
"sass",
"stack",
"stylus",
"style",
"styles",
"stylesheet",
"stylesheets",
"tool",
"tooling",
"web",
"web-design"
"stylesheet"
],
"ignore": [
"**/.*",
"bower_components",
"node_modules"
".editorconfig",
".gitignore",
".travis.yml",
"bower.json",
"package.json",
"gruntfile.js",
"src"
],
"repo": "milligram/milligram",
"styles": ["dist/milligram.min.css"]
"styles": ["dist/milligram.css"]
}

0
demo/.gitdirectory
View File

144
demo/index.html Normal file
View File

@ -0,0 +1,144 @@
<!doctype html>
<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="http://milligram.github.io/">
<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="http://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="http://milligram.github.io/">
<meta property="article:published_time" content="2015-12-25T01:00:00Z">
<meta property="article:author" content="@cjpatoilo">
<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="http://milligram.github.io/">
<meta name="twitter:site" content="http://milligram.github.io/">
<meta name="twitter:creator" content="@cjpatoilo">
<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="http://milligram.github.io/img/thumbnail.jpg">
<title>Milliigram | A minimalist CSS framework.</title>
<link rel="canonical" href="http://milligram.github.io/">
<link rel="image_src" href="http://milligram.github.io/img/thumbnail.jpg">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="http://milligram.github.io/css/milligram.min.css">
<link rel="stylesheet" href="http://milligram.github.io/css/style.css">
<link rel="icon" href="http://milligram.github.io/img/favicon.png">
</head>
<body>
<main class="wrapper">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="http://milligram.github.io/">
<img class="img" src="http://milligram.github.io/img/logo.svg" height="30" alt="Milligram" title="Milligram">
<h1 class="title">Milligram</h1>
</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="#getting-started" title="Getting Started">Getting Started</a></li>
<li class="popover-item"><a class="popover-link" href="#typography" title="Typography">Typography</a></li>
<li class="popover-item"><a class="popover-link" href="#blockquotes" title="Blockquotes">Blockquotes</a></li>
<li class="popover-item"><a class="popover-link" href="#buttons" title="Buttons">Buttons</a></li>
<li class="popover-item"><a class="popover-link" href="#lists" title="Lists">Lists</a></li>
<li class="popover-item"><a class="popover-link" href="#forms" title="Forms">Forms</a></li>
<li class="popover-item"><a class="popover-link" href="#tables" title="Tables">Tables</a></li>
<li class="popover-item"><a class="popover-link" href="#grids" title="Grids">Grids</a></li>
<li class="popover-item"><a class="popover-link" href="#codes" title="Codes">Codes</a></li>
<li class="popover-item"><a class="popover-link" href="#utilities" title="Utilities">Utilities</a></li>
<li class="popover-item"><a class="popover-link" href="#tips" title="Tips">Tips</a></li>
<li class="popover-item"><a class="popover-link" href="#browser-support" title="Browser Support">Browser Support</a></li>
<li class="popover-item"><a class="popover-link" href="#examples" title="Examples">Examples</a></li>
<li class="popover-item"><a class="popover-link" href="#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 target="blank" href="https://github.com/milligram/milligram" class="hidden-xs github-corner">
<svg width="80" height="80" viewBox="0 0 250 250" class="github-corner">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
</section>
</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="getting-started.html" title="Getting Started">Getting Started</a></li>
<li><a href="typography.html" title="Typography">Typography</a></li>
<li><a href="blockquotes.html" title="Blockquotes">Blockquotes</a></li>
<li><a href="buttons.html" title="Buttons">Buttons</a></li>
<li><a href="lists.html" title="Lists">Lists</a></li>
<li><a href="forms.html" title="Forms">Forms</a></li>
<li><a href="tables.html" title="Tables">Tables</a></li>
<li><a href="grids.html" title="Grids">Grids</a></li>
<li><a href="codes.html" title="Codes">Codes</a></li>
<li><a href="utilities.html" title="Utilities">Utilities</a></li>
<li><a href="tips.html" title="Tips">Tips</a></li>
<li><a href="browser-support.html" title="Browser Support">Browser Support</a></li>
</ul>
</p>
</section>
<section class="container" id="contributing">
<h5 class="title">Contributing</h5>
<p> Help improve these docs. Open an <a target="blank" href="https://github.com/milligram/milligram/issues/new" title="Issue">issue</a> or submit a pull request.</p>
<p>
<ol>
<li>Navigate to the main page of the repository</li>
<li><a target="blank" href="https://github.com/milligram/milligram#fork-destination-box" title="Fork it!">Fork it!</a></li>
<li>Create your feature branch: git checkout -b my-new-feature</li>
<li>Commit your changes: git commit -m 'Add some feature'</li>
<li>Push to the branch: git push origin my-new-feature</li>
<li>Submit a pull request =D</li>
</ol>
</p>
</section>
<footer class="footer">
<section class="container">
<p>Designed with ♥ by <a target="blank" href="https://cjpatoilo.com" title="CJ Patoilo">@cjpatoilo</a>. <br>Licensed under the <a target="blank" href="https://github.com/milligram/milligram#license" title="MIT License">MIT License</a>.</p>
</section>
</footer>
</main>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>
<script src="http://milligram.github.io/js/script.js"></script>
</body>
</html>

57
dist/milligram.css vendored
View File

@ -1,3 +1,12 @@
/*!
* Milligram v1.0.2
* http://milligram.github.io
*
* Copyright (c) 2015, CJ Patoilo
* Licensed under the MIT license
*/
html {
box-sizing: border-box;
font-size: 62.5%;
@ -208,18 +217,12 @@ input[type='radio'] {
}
.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
width: 100%;
}
.row .row-wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row .row-no-padding {
@ -229,52 +232,34 @@ input[type='radio'] {
padding: 0;
}
.row .row-top {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.row .row-bottom {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}
.row .row-center {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.row .row-stretch {
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.row .row-baseline {
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.row .column {
display: block;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-left: 0;
max-width: 100%;
width: 100%;
}
.row .column .col-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.row .column .col-bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.row .column .col-center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.row .column.column-offset-10 {
@ -305,76 +290,52 @@ input[type='radio'] {
margin-left: 90%;
}
.row .column.column-10 {
-webkit-flex: 0 0 10%;
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
}
.row .column.column-20 {
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.row .column.column-25 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.row .column.column-33, .row .column.column-34 {
-webkit-flex: 0 0 33.3333%;
-ms-flex: 0 0 33.3333%;
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.row .column.column-40 {
-webkit-flex: 0 0 40%;
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
.row .column.column-50 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.row .column.column-60 {
-webkit-flex: 0 0 60%;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
.row .column.column-66, .row .column.column-67 {
-webkit-flex: 0 0 66.6666%;
-ms-flex: 0 0 66.6666%;
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
.row .column.column-75 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.row .column.column-80 {
-webkit-flex: 0 0 80%;
-ms-flex: 0 0 80%;
flex: 0 0 80%;
max-width: 80%;
}
.row .column.column-90 {
-webkit-flex: 0 0 90%;
-ms-flex: 0 0 90%;
flex: 0 0 90%;
max-width: 90%;
}
@media (min-width: 40rem) {
.row {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
margin-left: -1rem;
width: calc(100% + 2.0rem);

13
dist/milligram.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/milligram.min.css.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

48
gruntfile.js
View File

@ -10,12 +10,22 @@ module.exports = function ( grunt ) {
// Define the configuration
grunt.initConfig({
// DEFAULT TASK
// ================================================================
// Specifics of npm's package.json handling
pkg: grunt.file.readJSON( 'package.json' ),
// Banner
banner:
'/*!\n'+
' * Milligram v<%= pkg.version %>\n'+
' * <%= pkg.homepage %>\n'+
' *\n'+
' * Copyright (c) 2015, CJ Patoilo\n'+
' * Licensed under the <%= pkg.license %> license\n'+
'*/\n\n',
// DEFAULT TASK
// ================================================================
// Watch files and process the above tasks
watch: {
options: {
@ -31,7 +41,7 @@ module.exports = function ( grunt ) {
},
sass: {
files: [
'sass/**/*.sass'
'src/**/*.sass'
],
tasks: [
'sass',
@ -52,39 +62,51 @@ module.exports = function ( grunt ) {
sass: {
minify: {
options: {
banner: '<%= banner %>',
noCache: true,
sourcemap: 'none',
style: 'compressed'
},
files: {
'dist/milligram.min.css': [ 'sass/**/*.sass', '!sass/**/_*.sass' ]
'dist/milligram.min.css': [ 'src/**/*.sass', '!src/**/_*.sass' ]
}
},
default: {
options: {
banner: '<%= banner %>',
noCache: true,
sourcemap: 'none',
style: 'expanded'
},
files: {
'dist/milligram.css': [ 'sass/**/*.sass', '!sass/**/_*.sass' ]
'dist/milligram.css': [ 'src/**/*.sass', '!src/**/_*.sass' ]
}
}
},
// Parse CSS and add vendor-prefixed CSS properties using the Can I Use database.
autoprefixer: {
all: {
minify: {
options: {
browsers: [
'last 2 versions',
'ie 8',
'ie 9'
'last 1 versions'
],
map: {
inline: false
}
},
files: {
'dist/milligram.min.css': 'dist/milligram.min.css'
}
},
default: {
options: {
browsers: [
'last 1 versions'
],
map: false
},
files: {
'dist/milligram.min.css': 'dist/milligram.min.css',
'dist/milligram.css': 'dist/milligram.css'
}
}
@ -97,13 +119,13 @@ module.exports = function ( grunt ) {
// REGISTER TASKS
// ================================================================
// Default tasks
// Default task
grunt.registerTask( 'default', [
'build',
'watch'
]);
// Build tasks
// Build task
grunt.registerTask( 'build', [
'clean',
'sass',

78
package.json
View File

@ -1,66 +1,42 @@
{
"name": "milligram",
"version": "1.0.1",
"version": "1.0.2",
"description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io",
"license": {
"type": "MIT",
"url": "https://cjpatoilo.mit-license.org"
},
"repository": {
"type": "git",
"url": "git+https://github.com/milligram/milligram.git"
},
"bugs": {
"url": "https://github.com/milligram/milligram/issues"
},
"author": {
"name": "CJ Patoilo",
"email": "cjpatoilo@gmail.com",
"url": "http://cjpatoilo.com"
},
"engines": {
"node": ">=0.12.0"
},
"scripts": {
"start": "grunt",
"build": "grunt build"
},
"files": [
"*.json",
"*.md",
".gitignore",
"license"
],
"main": "dist/milligram.min.css",
"repository": "milligram/milligram",
"license": "MIT",
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
"main": "dist/milligram.css",
"keywords": [
"app",
"boilerplate",
"botstrap",
"build",
"bootstrap",
"css",
"css3",
"design",
"dev",
"development",
"front-end",
"framework",
"html",
"html5",
"kickstart",
"less",
"milligram",
"responsive",
"mobile",
"mobile-first",
"responsive",
"sass",
"stack",
"stylus",
"style",
"styles",
"stylesheet",
"stylesheets",
"tool",
"tooling",
"web",
"web-design"
"stylesheet"
],
"ignore": [
".editorconfig",
".gitignore",
".travis.yml",
"bower.json",
"component.json",
"gruntfile.js",
"src"
],
"dependencies": {
"normalize.css": "latest"
@ -70,16 +46,18 @@
"grunt": "^0.4.5",
"grunt-autoprefixer": "^3.0.3",
"grunt-contrib-clean": "^0.7.0",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-sass": "~0.8.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-newer": "^1.1.1",
"grunt-notify": "^0.4.3",
"load-grunt-tasks": "^3.3.0",
"time-grunt": "^1.2.2"
},
"ignore": [
"**/.*",
"bower_components",
"node_modules"
]
"engines": {
"node": ">=0.12.0"
},
"scripts": {
"start": "grunt",
"test": "grunt build"
}
}

379
readme.md
View File

@ -8,383 +8,36 @@
Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! **Only 2kb gzipped!** It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!
## Getting Started
There are some ways to get started. First, see all download options available below, then choose the most suitable option for your need. Now you should add the main file of the Milligram and the CSS Reset in the header of your project. Just that!
## Download
**Install with Bower**
Milligram is available to install using Bower.
```sh
$ bower install milligram
```
**Install with npm**
Milligram is also available to install using npm.
```sh
$ npm install milligram
```
**What's included**
Once downloaded, extract the compressed folder to see the main file in the uncompressed and minified version.
```sh
milligram/
├── .gitignore
├── bower.json
├── component.json
├── demo/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── gruntfile.js
├── license
├── package.json
├── readme.md
├── sass/
└── test/
```
**Usage**
First, use any method mentioned above to download Milligram. Then, just add these tags in the head. Milligram is also available via [CDN](#).
```html
<!-- Google Fonts -->
<link rel="stylesheet" target="blank" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<!-- CSS Reset -->
<link rel="stylesheet" target="blank" href="https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css">
<!-- Milligram CSS minified -->
<link rel="stylesheet" href="milligram/dist/milligram.min.css">
<!-- You should properly set the path from the main file. -->
```
See more examples of **getting started** [here](http://milligram.github.io/getting-started.html).
## Typography
CSS3 introduces a few new units, including the `rem` unit, which stands for *"root em"*. The rem unit is relative to the font-size of the root element `<html>`. That means that we can define a single font size on the root element, and define all `rem` units to be a percentage of that. The typography has `font-size` defined in 1.6rem (16px) and `line-height` in 1.6 (24px). Milligram uses the `font-family` [Roboto](https://www.google.com/fonts/specimen/Roboto), created by Christian Robertson, and provided by Google.
```html
<!-- Base font-size and line-height -->
<p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
<!-- Other elements to text markup -->
<a>Archor</a>
<em>Emphasis</em>
<small>Small</small>
<strong>Strong</strong>
<u>Underline</u>
<!-- Default Headings -->
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<!-- The base font-size is set at 62.5% for having the convenience of sizing rems in a way that is similar to using px. So basically 1.6rem = 16px. -->
````
See more examples of **typography** [here](http://milligram.github.io/typography.html).
## Blockquotes
The Blockquote represents a section that is quoted from another source.
```html
<blockquote>
<p><em>Yeah!! Milligram is amazing.</em></p>
</blockquote>
```
See more examples of **blockquotes** [here](http://milligram.github.io/blockquotes.html).
## Buttons
The Button, an essential part of any user experience. Buttons come in three basic styles in Milligram: The `<button>` element has flat color by default, whereas .button-outline has a simple outline around, and `.button-clear` is entirely clear.
```html
<!-- Default Button -->
<a class="button" href="#">Default Button</a>
<!-- Outlined Button -->
<button class="button button-outline">Outlined Button</button>
<!-- Clear Button -->
<input class="button button-clear" type="submit" value="Clear Button">
<!-- Easily apply the .button class for button style in the anchor element. -->
```
See more examples of **buttons** [here](http://milligram.github.io/buttons.html).
## Lists
The List is a very versatile and common way to display items. Milligram has three types of lists: The unordered list use `<ol>` element will be marked with a outline circles, the ordered list use `<ul>` element and your items will be marked with numbers, the description list use `<dl>` element and your items will not be marking, only spacings.
```html
<!-- Description list -->
<dl>
<dt>Description list title 1</dt>
<dt>Description list title 2</dt>
</dl>
<!-- Unordered list -->
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<!-- Ordered list -->
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
<!-- Easily change any <dl>, <ul> or an <ol> to get clear lists, number lists or outline circles. -->
```
See more examples of **lists** [here](http://milligram.github.io/lists.html).
## Forms
The Form has never been exactly fun, and it can be downright painful on a mobile device with its on-screen keyboard. Milligram help to make this much easier with design focused on the user experience.
```html
<form>
<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>
<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-inline"> inside of it -->
```
See more examples of **forms** [here](http://milligram.github.io/forms.html).
## Tables
The Table element represents data in two dimensions or more. We encourage the use of proper formatting with `<thead>` and `<tbody>` to create a `<table>`. The code becomes cleaner without disturbing understanding.
```html
<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>
<!-- Prior to the creation of CSS, HTML <table> elements were often used as a method for page layout. This usage has been discouraged since HTML4, and the <table> element should not be used for layout purposes. -->
```
See more examples of **tables** [here](http://milligram.github.io/tables.html).
## Grids
The Grid is a fluid system with a max width of `112.0rem` (1200px), that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. Milligram is different than most because of its use of the **CSS Flexible Box Layout Module standard**. The advantage is the simplicity, and we know that a functional code is very important for maintainability and scalability. Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There is no restriction on number of columns, but we advise you to follow a design pattern of grid system. See more tips on best practices in the [tips](http://milligram.github.io/tips.html).
```html
<!-- .container is main centered wrapper -->
<div class="content">
<div class="row">
<div class="column">.column</div>
<div class="column">.column</div>
<div class="column">.column</div>
<div class="column">.column</div>
</div>
<div class="row">
<div class="column column">.column</div>
<div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
</div>
</div>
<!-- Every .column added inside a .row will automatically receive an equal amount of the available area. -->
```
See more examples of **grids** [here](http://milligram.github.io/grids.html).
## Codes
The Code element represents a fragment of computer code. Just wrap anything in a `<code>` and it will appear like this. if you need a block, by default, enter the `<code>` within the `<pre>` element.
```html
<pre><code>
.milligram {
color: #9b4dca;
}
</code></pre>
```
See more examples of **codes** [here](http://milligram.github.io/codes.html).
## Utilities
Milligram has some functional classes to improve the performance and productivity everyday.
```html
<!-- Functional Classes -->
<!-- Clear any float -->
<div class="clearfix">
<!-- Float either directions -->
<div class="float-left"></div>
<div class="float-right"></div>
</div>
```
See more examples of **utilities** [here](http://milligram.github.io/utilities.html).
## Tips
Tips, techniques, and best practice on using Cascading Style Sheets.
**Mobile First**
The Mobile First is the design strategy that takes priority development for mobile devices like smartphones and tablets. It means all styles outside of a media queries apply to all devices, then larger screens are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. Milligram use some breakpoints like these:
**Mobile**: 40.0rem (400px)
**Tablet**: 80.0rem (800px)
**Desktop**: 120.0rem (1200px)
```css
/* Mobile First Media Queries */
/* Base style */
{ ... }
/* Larger than mobile screen */
@media (min-width: 40.0rem) { ... }
/* Larger than tablet screen */
@media (min-width: 80.0rem) { ... }
/* Larger than desktop screen */
@media (min-width: 120.0rem) { ... }
```
See more examples of **tips** [here](http://milligram.github.io/tips.html).
**Extending The Inheritances**
The style of an element can be defined in several different locations, which interact in a complex way. It is form of interaction makes CSS powerful, but it can make it confusing and difficult to debug.
```css
/* Extending The Inheritances */
/* Applying color variation */
.button-black {
background-color: black;
border-color: black;
}
.button-black.button-outline {
color: black;
}
.button-black.button-clear {
color: black;
}
/* Applying size variation */
.button-small {
font-size: .8rem;
height: 2.8rem;
line-height: 2.8rem;
padding: 0 1.5rem;
}
.button-large {
font-size: 1.4rem;
height: 4.5rem;
line-height: 4.5rem;
padding: 0 2rem;
}
```
See more examples of **tips** [here](http://milligram.github.io/tips.html).
## Browser Support
While not designed for old browsers, Milligram has support for some old versions, but we recommend using the latest versions of their browsers.
- Chrome latest
- Firefox latest
- IE latest
- Opera latest
- Safari latest
See more examples of **browser support** [here](http://milligram.github.io/browser-support.html).
## Examples
You can view more examples of using Milligram.
- [Getting Started](http://milligram.github.io/getting-started.html)
- [Typography](http://milligram.github.io/typography.html)
- [Blockquotes](http://milligram.github.io/blockquotes.html)
- [Buttons](http://milligram.github.io/buttons.html)
- [Lists](http://milligram.github.io/lists.html)
- [Forms](http://milligram.github.io/forms.html)
- [Tables](http://milligram.github.io/tables.html)
- [Grids](http://milligram.github.io/grids.html)
- [Codes](http://milligram.github.io/codes.html)
- [Utilities](http://milligram.github.io/utilities.html)
- [Tips](http://milligram.github.io/tips.html)
- [Browser Support](http://milligram.github.io/browser-support.html)
See more examples of **examples** [here](http://milligram.github.io/examples.html).
## Table of Contents
- [Getting Started](http://milligram.github.io/#getting-started)
- [Typography](http://milligram.github.io/#typography)
- [Blockquotes](http://milligram.github.io/#blockquotes)
- [Buttons](http://milligram.github.io/#buttons)
- [Lists](http://milligram.github.io/#lists)
- [Forms](http://milligram.github.io/#forms)
- [Tables](http://milligram.github.io/#tables)
- [Grids](http://milligram.github.io/#grids)
- [Codes](http://milligram.github.io/#codes)
- [Utilities](http://milligram.github.io/#utilities)
- [Tips](http://milligram.github.io/#tips)
- [Browser Support](http://milligram.github.io/#browser-support)
- [Examples](http://milligram.github.io/#examples)
## Contributing

0
sass/_Base.sass → src/_Base.sass
View File

0
sass/_Blockquote.sass → src/_Blockquote.sass
View File

0
sass/_Button.sass → src/_Button.sass
View File

0
sass/_Code.sass → src/_Code.sass
View File

0
sass/_Color.sass → src/_Color.sass
View File

0
sass/_Form.sass → src/_Form.sass
View File

0
sass/_Grid.sass → src/_Grid.sass
View File

0
sass/_Link.sass → src/_Link.sass
View File

0
sass/_List.sass → src/_List.sass
View File

0
sass/_Misc.sass → src/_Misc.sass
View File

0
sass/_Spacing.sass → src/_Spacing.sass
View File

0
sass/_Table.sass → src/_Table.sass
View File

0
sass/_Typography.sass → src/_Typography.sass
View File

0
sass/_Utility.sass → src/_Utility.sass
View File

0
sass/milligram.sass → src/milligram.sass
View File

0
test/.gitdirectory
View File