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

Merge branch 'release/v1.0.3'

Browse Source
This commit is contained in:
CJ Patoilo 2015-12-28 23:52:26 -03:00
commit 38c84824b1
15 changed files with 90 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.npmignore Normal file
View File

@ -0,0 +1,7 @@
.editorconfig
.gitignore
.travis.yml
bower.json
component.json
gruntfile.js
src

8
.travis.yml Normal file
View File

@ -0,0 +1,8 @@
sudo: false
language: node_js
node_js:
- 0.12
before_install:
- gem update --system
- gem install sass
- npm install grunt-cli --global

2
bower.json
View File

@ -1,6 +1,6 @@
{ {
"name": "milligram", "name": "milligram",
"version": "1.0.2", "version": "1.0.3",
"description": "A minimalist CSS framework.", "description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io", "homepage": "http://milligram.github.io",
"repository": "milligram/milligram", "repository": "milligram/milligram",

2
component.json
View File

@ -1,6 +1,6 @@
{ {
"name": "milligram", "name": "milligram",
"version": "1.0.2", "version": "1.0.3",
"description": "A minimalist CSS framework.", "description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io", "homepage": "http://milligram.github.io",
"repository": "milligram/milligram", "repository": "milligram/milligram",

62
demo/index.html
View File

@ -17,17 +17,17 @@
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="http://milligram.github.io/"> <meta property="og:url" content="http://milligram.github.io/">
<meta property="article:published_time" content="2015-12-25T01:00:00Z"> <meta property="article:published_time" content="2015-12-25T01:00:00Z">
<meta property="article:author" content="@cjpatoilo"> <meta property="article:author" content="CJ Patoilo">
<meta property="article:section" content="website"> <meta property="article:section" content="website">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="Milligram | A minimalist CSS framework."> <meta name="twitter:domain" content="Milligram | A minimalist CSS framework.">
<meta name="twitter:url" content="http://milligram.github.io/"> <meta name="twitter:url" content="http://milligram.github.io/">
<meta name="twitter:site" content="http://milligram.github.io/"> <meta name="twitter:site" content="http://milligram.github.io/">
<meta name="twitter:creator" content="@cjpatoilo"> <meta name="twitter:creator" content="CJ Patoilo">
<meta name="twitter:title" content="Milligram | A minimalist CSS framework."> <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: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"> <meta name="twitter:image:src" content="http://milligram.github.io/img/thumbnail.jpg">
<title>Milliigram | A minimalist CSS framework.</title> <title>Milligram | A minimalist CSS framework.</title>
<link rel="canonical" href="http://milligram.github.io/"> <link rel="canonical" href="http://milligram.github.io/">
<link rel="image_src" href="http://milligram.github.io/img/thumbnail.jpg"> <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://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
@ -54,20 +54,20 @@
<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="#getting-started" title="Getting Started">Getting Started</a></li> <li class="popover-item"><a class="popover-link" href="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#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="http://milligram.github.io/#examples" title="Examples">Examples</a></li>
<li class="popover-item"><a class="popover-link" href="#contributing" title="Contributing">Contributing</a></li> <li class="popover-item"><a class="popover-link" href="http://milligram.github.io/#contributing" title="Contributing">Contributing</a></li>
</ul> </ul>
</div> </div>
</li> </li>
@ -83,7 +83,7 @@
</div> </div>
</li> </li>
</ul> </ul>
<a target="blank" href="https://github.com/milligram/milligram" class="hidden-xs github-corner"> <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">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <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="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>
@ -98,18 +98,18 @@
<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="getting-started.html" title="Getting Started">Getting Started</a></li> <li><a href="http://milligram.github.io/#getting-started" title="Getting Started">Getting Started</a></li>
<li><a href="typography.html" title="Typography">Typography</a></li> <li><a href="http://milligram.github.io/#typography" title="Typography">Typography</a></li>
<li><a href="blockquotes.html" title="Blockquotes">Blockquotes</a></li> <li><a href="http://milligram.github.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
<li><a href="buttons.html" title="Buttons">Buttons</a></li> <li><a href="http://milligram.github.io/#buttons" title="Buttons">Buttons</a></li>
<li><a href="lists.html" title="Lists">Lists</a></li> <li><a href="http://milligram.github.io/#lists" title="Lists">Lists</a></li>
<li><a href="forms.html" title="Forms">Forms</a></li> <li><a href="http://milligram.github.io/#forms" title="Forms">Forms</a></li>
<li><a href="tables.html" title="Tables">Tables</a></li> <li><a href="http://milligram.github.io/#tables" title="Tables">Tables</a></li>
<li><a href="grids.html" title="Grids">Grids</a></li> <li><a href="http://milligram.github.io/#grids" title="Grids">Grids</a></li>
<li><a href="codes.html" title="Codes">Codes</a></li> <li><a href="http://milligram.github.io/#codes" title="Codes">Codes</a></li>
<li><a href="utilities.html" title="Utilities">Utilities</a></li> <li><a href="http://milligram.github.io/#utilities" title="Utilities">Utilities</a></li>
<li><a href="tips.html" title="Tips">Tips</a></li> <li><a href="http://milligram.github.io/#tips" title="Tips">Tips</a></li>
<li><a href="browser-support.html" title="Browser Support">Browser Support</a></li> <li><a href="http://milligram.github.io/#browser-support" title="Browser Support">Browser Support</a></li>
</ul> </ul>
</p> </p>
</section> </section>
@ -131,7 +131,7 @@
<footer class="footer"> <footer class="footer">
<section class="container"> <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> <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> </section>
</footer> </footer>

60
dist/milligram.css vendored
View File

@ -1,5 +1,5 @@
/*! /*!
* Milligram v1.0.2 * Milligram v1.0.3
* http://milligram.github.io * http://milligram.github.io
* *
* Copyright (c) 2015, CJ Patoilo * Copyright (c) 2015, CJ Patoilo
@ -27,23 +27,21 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.blockquote,
blockquote { blockquote {
border-left: 0.3rem solid #d1d1d1; border-left: 0.3rem solid #d1d1d1;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }
.blockquote *:last-child,
blockquote *:last-child { blockquote *:last-child {
margin: 0; margin: 0;
} }
.button, .button,
button, button,
input[type='submit'], input[type='button'],
input[type='reset'], input[type='reset'],
input[type='button'] { input[type='submit'] {
background-color: #9b4dca; background-color: #9b4dca;
border: 0.1rem solid #9b4dca; border: 0.1rem solid #9b4dca;
border-radius: 0.4rem; border-radius: 0.4rem;
@ -65,12 +63,12 @@ input[type='button'] {
.button:hover, .button:focus, .button:hover, .button:focus,
button:hover, button:hover,
button:focus, button:focus,
input[type='submit']:hover, input[type='button']:hover,
input[type='submit']:focus, input[type='button']:focus,
input[type='reset']:hover, input[type='reset']:hover,
input[type='reset']:focus, input[type='reset']:focus,
input[type='button']:hover, input[type='submit']:hover,
input[type='button']:focus { input[type='submit']:focus {
background-color: #606c76; background-color: #606c76;
border-color: #606c76; border-color: #606c76;
color: #ffffff; color: #ffffff;
@ -78,30 +76,30 @@ input[type='button']:focus {
} }
.button.button-outline, .button.button-outline,
button.button-outline, button.button-outline,
input[type='submit'].button-outline, input[type='button'].button-outline,
input[type='reset'].button-outline, input[type='reset'].button-outline,
input[type='button'].button-outline { input[type='submit'].button-outline {
color: #9b4dca; color: #9b4dca;
background-color: transparent; background-color: transparent;
} }
.button.button-outline:hover, .button.button-outline:focus, .button.button-outline:hover, .button.button-outline:focus,
button.button-outline:hover, button.button-outline:hover,
button.button-outline:focus, button.button-outline:focus,
input[type='submit'].button-outline:hover, input[type='button'].button-outline:hover,
input[type='submit'].button-outline:focus, input[type='button'].button-outline:focus,
input[type='reset'].button-outline:hover, input[type='reset'].button-outline:hover,
input[type='reset'].button-outline:focus, input[type='reset'].button-outline:focus,
input[type='button'].button-outline:hover, input[type='submit'].button-outline:hover,
input[type='button'].button-outline:focus { input[type='submit'].button-outline:focus {
color: #606c76; color: #606c76;
background-color: transparent; background-color: transparent;
border-color: #606c76; border-color: #606c76;
} }
.button.button-clear, .button.button-clear,
button.button-clear, button.button-clear,
input[type='submit'].button-clear, input[type='button'].button-clear,
input[type='reset'].button-clear, input[type='reset'].button-clear,
input[type='button'].button-clear { input[type='submit'].button-clear {
color: #9b4dca; color: #9b4dca;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
@ -109,12 +107,12 @@ input[type='button'].button-clear {
.button.button-clear:hover, .button.button-clear:focus, .button.button-clear:hover, .button.button-clear:focus,
button.button-clear:hover, button.button-clear:hover,
button.button-clear:focus, button.button-clear:focus,
input[type='submit'].button-clear:hover, input[type='button'].button-clear:hover,
input[type='submit'].button-clear:focus, input[type='button'].button-clear:focus,
input[type='reset'].button-clear:hover, input[type='reset'].button-clear:hover,
input[type='reset'].button-clear:focus, input[type='reset'].button-clear:focus,
input[type='button'].button-clear:hover, input[type='submit'].button-clear:hover,
input[type='button'].button-clear:focus { input[type='submit'].button-clear:focus {
color: #606c76; color: #606c76;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
@ -145,11 +143,11 @@ pre > code {
input[type='email'], input[type='email'],
input[type='number'], input[type='number'],
input[type='search'],
input[type='text'],
input[type='tel'],
input[type='url'],
input[type='password'], input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea, textarea,
select { select {
-webkit-appearance: none; -webkit-appearance: none;
@ -166,11 +164,11 @@ select {
} }
input[type='email']:focus, input[type='email']:focus,
input[type='number']:focus, input[type='number']:focus,
input[type='search']:focus,
input[type='text']:focus,
input[type='tel']:focus,
input[type='url']:focus,
input[type='password']:focus, input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
border: 0.1rem solid #9b4dca; border: 0.1rem solid #9b4dca;
@ -394,8 +392,8 @@ hr {
margin-top: 3rem; margin-top: 3rem;
} }
button, .button,
.button { button {
margin-bottom: 1rem; margin-bottom: 1rem;
} }

4
dist/milligram.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/milligram.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "milligram", "name": "milligram",
"version": "1.0.2", "version": "1.0.3",
"description": "A minimalist CSS framework.", "description": "A minimalist CSS framework.",
"homepage": "http://milligram.github.io", "homepage": "http://milligram.github.io",
"repository": "milligram/milligram", "repository": "milligram/milligram",

2
readme.md
View File

@ -3,7 +3,7 @@
| A minimalist CSS framework. | A minimalist CSS framework.
## Why it's awesome ## Why it's awesome?
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! 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!

2
src/_Base.sass
View File

@ -2,10 +2,8 @@
// Base // Base
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
// NOTE
// The base font-size is set at 62.5% for having the convenience // 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. 1.6rem=16px // of sizing rems in a way that is similar to using px. 1.6rem=16px
html html
box-sizing: border-box box-sizing: border-box
font-size: 62.5% font-size: 62.5%

1
src/_Blockquote.sass
View File

@ -2,7 +2,6 @@
// Blockquote // Blockquote
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
.blockquote,
blockquote blockquote
border-left: 0.3rem solid $color-quaternary border-left: 0.3rem solid $color-quaternary
margin-left: 0 margin-left: 0

4
src/_Button.sass
View File

@ -4,9 +4,9 @@
.button, .button,
button, button,
input[type='submit'], input[type='button'],
input[type='reset'], input[type='reset'],
input[type='button'] input[type='submit']
background-color: $color-primary background-color: $color-primary
border: .1rem solid $color-primary border: .1rem solid $color-primary
border-radius: .4rem border-radius: .4rem

8
src/_Form.sass
View File

@ -4,11 +4,11 @@
input[type='email'], input[type='email'],
input[type='number'], input[type='number'],
input[type='search'],
input[type='text'],
input[type='tel'],
input[type='url'],
input[type='password'], input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea, textarea,
select select
appearance: none // Removes awkward default styles on some inputs for iOS appearance: none // Removes awkward default styles on some inputs for iOS

4
src/_Spacing.sass
View File

@ -2,8 +2,8 @@
// Spacing // Spacing
// –––––––––––––––––––––––––––––––––––––––––––––––––– // ––––––––––––––––––––––––––––––––––––––––––––––––––
button, .button,
.button button
margin-bottom: 1rem margin-bottom: 1rem
input, input,