From 54e25c52c5bd2a90323dc6f30f08a2f5c3516404 Mon Sep 17 00:00:00 2001 From: CJ Patoilo Date: Fri, 25 Dec 2015 22:49:36 -0300 Subject: [PATCH] updated information in bower component package and readme documentation --- bower.json | 9 +- component.json | 4 +- package.json | 28 +++- readme.md | 403 ++++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 428 insertions(+), 16 deletions(-) diff --git a/bower.json b/bower.json index e603f8c..a52720f 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "milligram", - "version": "0.0.1", - "description": "Slight, weightless, slim and minimalist framework for the web.", + "version": "1.0.0", + "description": "A minimalist CSS framework.", "homepage": "http://milligram.github.io", "license": { "type": "MIT", @@ -20,7 +20,7 @@ "url": "http://cjpatoilo.com" }, "moduleType": "globals", - "main": "dist/css/milligram.min.css", + "main": "dist/milligram.min.css", "keywords": [ "app", "boilerplate", @@ -50,6 +50,9 @@ "web", "web-design" ], + "dependencies": { + "normalize.css": "latest" + }, "ignore": [ "**/.*", "bower_components", diff --git a/component.json b/component.json index 9bd8a02..12294ca 100644 --- a/component.json +++ b/component.json @@ -1,7 +1,7 @@ { "name": "milligram", - "version": "0.0.1", - "description": "A simple, slight, and minimalist CSS framework.", + "version": "1.0.0", + "description": "A minimalist CSS framework.", "homepage": "http://milligram.github.io", "license": { "type": "MIT", diff --git a/package.json b/package.json index 3270dc2..348c3e0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "milligram", - "version": "0.0.1", - "description": "Slight, weightless, slim and minimalist framework for the web.", + "version": "1.0.0", + "description": "A minimalist CSS framework.", "homepage": "http://milligram.github.io", "license": { "type": "MIT", @@ -23,7 +23,8 @@ "node": ">=0.12.0" }, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "start": "grunt", + "build": "grunt build" }, "files": [ "*.json", @@ -31,6 +32,7 @@ ".gitignore", "license" ], + "main": "dist/milligram.min.css", "keywords": [ "app", "boilerplate", @@ -59,5 +61,25 @@ "tooling", "web", "web-design" + ], + "dependencies": { + "normalize.css": "latest" + }, + "devDependencies": { + "bower": "^1.6.8", + "grunt": "^0.4.5", + "grunt-autoprefixer": "^3.0.3", + "grunt-contrib-clean": "^0.7.0", + "grunt-contrib-sass": "^0.9.2", + "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" ] } diff --git a/readme.md b/readme.md index c658872..f5d1278 100644 --- a/readme.md +++ b/readme.md @@ -1,17 +1,404 @@ -# milligram +# [Milligram](http://milligram.github.io) -| Slight, weightless, slim and minimalist framework for the web. +| A minimalist CSS framework. + + +## 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! + + +## 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! + + +**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 + + + + + + + + + + +``` +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 ``. 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 + +

The base type is 1.6rem (16px) over 1.6 line height (24px)

+ + +Archor +Emphasis +Small +Strong +Underline + + +

Heading

+

Heading

+

Heading

+

Heading

+
Heading
+
Heading
+ + +```` + +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 +
+

Yeah!! Milligram is amazing.

+
+``` + +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 ` + + + + + +``` + +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 `
    ` element will be marked with a outline circles, the ordered list use `