mirror of
https://github.com/milligram/milligram.git
synced 2024-11-13 16:54:22 +00:00
Format all files fot he new definition
This commit is contained in:
parent
831481f1c8
commit
9a63e760df
@ -1,5 +1,5 @@
|
|||||||
os: Visual Studio 2015
|
os: Visual Studio 2015
|
||||||
version: "{build}"
|
version: '{build}'
|
||||||
build: off
|
build: off
|
||||||
platform: x64
|
platform: x64
|
||||||
environment:
|
environment:
|
||||||
|
12
.github/contributing.md
vendored
12
.github/contributing.md
vendored
@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
We would love for you to contribute to Milligram and help us make this even better! Start reading this document to see it is not difficult as you might have imagined.
|
We would love for you to contribute to Milligram and help us make this even better! Start reading this document to see it is not difficult as you might have imagined.
|
||||||
|
|
||||||
|
|
||||||
## Table of Contents
|
## Table of Contents
|
||||||
|
|
||||||
- [Open an Issue](#open-an-issue)
|
- [Open an Issue](#open-an-issue)
|
||||||
@ -13,12 +12,10 @@ We would love for you to contribute to Milligram and help us make this even bett
|
|||||||
- [Code of Conduct](#code-of-conduct)
|
- [Code of Conduct](#code-of-conduct)
|
||||||
- [License](#license)
|
- [License](#license)
|
||||||
|
|
||||||
|
|
||||||
## Open an Issue
|
## Open an Issue
|
||||||
|
|
||||||
[Open an Issue](../../../issues/new) to report any problems or improvements. When necessary, use [Codepen](http://codepen.io/) to show the problem. Be sure to include some description to explain the problem.
|
[Open an Issue](../../../issues/new) to report any problems or improvements. When necessary, use [Codepen](http://codepen.io/) to show the problem. Be sure to include some description to explain the problem.
|
||||||
|
|
||||||
|
|
||||||
## Submit a Pull Request
|
## Submit a Pull Request
|
||||||
|
|
||||||
To submit a new feature, make sure that changes are done to the source code. [Follow our style guide](#style-guide) and do not forget the tests and attach the link [Codepen](http://codepen.io/) along with the description.
|
To submit a new feature, make sure that changes are done to the source code. [Follow our style guide](#style-guide) and do not forget the tests and attach the link [Codepen](http://codepen.io/) along with the description.
|
||||||
@ -35,14 +32,12 @@ You can do all of this from your browser using Gitpod, the free online dev envir
|
|||||||
|
|
||||||
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/milligram/milligram)
|
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/milligram/milligram)
|
||||||
|
|
||||||
*Note: For issues relating to the site, please use the [milligram.github.io](https://github.com/milligram/milligram.github.io)*
|
_Note: For issues relating to the site, please use the [milligram.github.io](https://github.com/milligram/milligram.github.io)_
|
||||||
|
|
||||||
|
|
||||||
## Building
|
## Building
|
||||||
|
|
||||||
First install [Node.js](https://nodejs.org/en/download/) for the build process. Now install all the dependencies, run `npm install` from the project directory. Once you have the dependencies installed, run `npm start`. This will run the build task which compiles the Sass files into Milligram.css file in the expanded and compressed version.
|
First install [Node.js](https://nodejs.org/en/download/) for the build process. Now install all the dependencies, run `npm install` from the project directory. Once you have the dependencies installed, run `npm start`. This will run the build task which compiles the Sass files into Milligram.css file in the expanded and compressed version.
|
||||||
|
|
||||||
|
|
||||||
## Style Guide
|
## Style Guide
|
||||||
|
|
||||||
Milligram use [Sass](http://sass-lang.com/) to give super powers to CSS. Look at how the code is being maintained, we must always be consistent. We try to follow best practices as much as possible. In addition, here are some tips you should follow:
|
Milligram use [Sass](http://sass-lang.com/) to give super powers to CSS. Look at how the code is being maintained, we must always be consistent. We try to follow best practices as much as possible. In addition, here are some tips you should follow:
|
||||||
@ -82,19 +77,16 @@ Milligram use [Sass](http://sass-lang.com/) to give super powers to CSS. Look at
|
|||||||
color: #000
|
color: #000
|
||||||
```
|
```
|
||||||
|
|
||||||
*Note: This style guide was inspired by [Idiomatic.css](https://github.com/necolas/idiomatic-css). Milligram uses an `.editorconfig` file, which most editors support, to enforce these coding standards.*
|
_Note: This style guide was inspired by [Idiomatic.css](https://github.com/necolas/idiomatic-css). Milligram uses an `.editorconfig` file, which most editors support, to enforce these coding standards._
|
||||||
|
|
||||||
|
|
||||||
## Test
|
## Test
|
||||||
|
|
||||||
Breaking CSS is easy. Checking every responsive page element is hard. That's why Milligram uses automated visual regression testing for responsive web UI by comparing DOM screenshots at various viewport sizes. To view the comparison run `npm test` after making changes to the source code.
|
Breaking CSS is easy. Checking every responsive page element is hard. That's why Milligram uses automated visual regression testing for responsive web UI by comparing DOM screenshots at various viewport sizes. To view the comparison run `npm test` after making changes to the source code.
|
||||||
|
|
||||||
|
|
||||||
## Code of Conduct
|
## Code of Conduct
|
||||||
|
|
||||||
Help us keep Milligram open and inclusive. Please read and follow our thoughts on [Code of Conduct](http://confcodeofconduct.com/).
|
Help us keep Milligram open and inclusive. Please read and follow our thoughts on [Code of Conduct](http://confcodeofconduct.com/).
|
||||||
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
By contributing your code, you agree to license your contribution under the [MIT license](../license).
|
By contributing your code, you agree to license your contribution under the [MIT license](../license).
|
||||||
|
5
.github/issue_template.md
vendored
5
.github/issue_template.md
vendored
@ -16,7 +16,6 @@ By contributing your code, you agree to license your contribution under the [MIT
|
|||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
|
||||||
### Version info
|
### Version info
|
||||||
|
|
||||||
<!-- What versions of the following libraries are you using? Note that your issue may already
|
<!-- What versions of the following libraries are you using? Note that your issue may already
|
||||||
@ -26,22 +25,18 @@ be fixed in the latest versions. -->
|
|||||||
|
|
||||||
**Other (e.g. normalize.css, node.js, npm, bower, browser, operating system) (if applicable):**
|
**Other (e.g. normalize.css, node.js, npm, bower, browser, operating system) (if applicable):**
|
||||||
|
|
||||||
|
|
||||||
### Test case
|
### Test case
|
||||||
|
|
||||||
<!-- Provide code samples on [Codepen](http://codepen.io/). -->
|
<!-- Provide code samples on [Codepen](http://codepen.io/). -->
|
||||||
|
|
||||||
|
|
||||||
### Steps to reproduce
|
### Steps to reproduce
|
||||||
|
|
||||||
<!-- Provide the steps needed to reproduce the issue given the above test case. -->
|
<!-- Provide the steps needed to reproduce the issue given the above test case. -->
|
||||||
|
|
||||||
|
|
||||||
### Expected behavior
|
### Expected behavior
|
||||||
|
|
||||||
<!-- What is the expected behavior? -->
|
<!-- What is the expected behavior? -->
|
||||||
|
|
||||||
|
|
||||||
### Actual behavior
|
### Actual behavior
|
||||||
|
|
||||||
<!-- What is the actual behavior? -->
|
<!-- What is the actual behavior? -->
|
||||||
|
1
.github/pull_request_template.md
vendored
1
.github/pull_request_template.md
vendored
@ -26,7 +26,6 @@ By contributing your code, you agree to license your contribution under the [MIT
|
|||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
|
||||||
### Description
|
### Description
|
||||||
|
|
||||||
<!-- Are you fixing a bug? Implementing a new feature? Updating the documentation? Describe here something about your changes. Don't forget to add the link to the open issue, or to other pull request related. -->
|
<!-- Are you fixing a bug? Implementing a new feature? Updating the documentation? Describe here something about your changes. Don't forget to add the link to the open issue, or to other pull request related. -->
|
||||||
|
12
.gitpod.yml
12
.gitpod.yml
@ -1,13 +1,13 @@
|
|||||||
tasks:
|
tasks:
|
||||||
- init: yarn install
|
- init: yarn install
|
||||||
command: yarn start
|
command: yarn start
|
||||||
|
|
||||||
# list the ports to be exposed
|
# list the ports to be exposed
|
||||||
ports:
|
ports:
|
||||||
- port: 3000
|
- port: 3000
|
||||||
onOpen: open-preview
|
onOpen: open-preview
|
||||||
- port: 3001
|
- port: 3001
|
||||||
onOpen: ignore
|
onOpen: ignore
|
||||||
|
|
||||||
vscode:
|
vscode:
|
||||||
extensions:
|
extensions:
|
||||||
|
@ -1,129 +1,138 @@
|
|||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
viewports: [{
|
viewports: [
|
||||||
name: 'phone',
|
{
|
||||||
width: 320,
|
name: 'phone',
|
||||||
height: 480
|
width: 320,
|
||||||
}, {
|
height: 480
|
||||||
name: 'laptop',
|
},
|
||||||
width: 1280,
|
{
|
||||||
height: 800
|
name: 'laptop',
|
||||||
}],
|
width: 1280,
|
||||||
scenarios: [{
|
height: 800
|
||||||
label: 'Typography',
|
}
|
||||||
url: 'http://localhost:3000',
|
],
|
||||||
hideSelectors: [],
|
scenarios: [
|
||||||
removeSelectors: [],
|
{
|
||||||
selectors: ['#typography .example'],
|
label: 'Typography',
|
||||||
readyEvent: null,
|
url: 'http://localhost:3000',
|
||||||
delay: 500,
|
hideSelectors: [],
|
||||||
misMatchThreshold: 0.1,
|
removeSelectors: [],
|
||||||
onReadyScript: null,
|
selectors: ['#typography .example'],
|
||||||
onBeforeScript: null
|
readyEvent: null,
|
||||||
}, {
|
delay: 500,
|
||||||
label: 'Blockquotes',
|
misMatchThreshold: 0.1,
|
||||||
url: 'http://localhost:3000',
|
onReadyScript: null,
|
||||||
hideSelectors: [],
|
onBeforeScript: null
|
||||||
removeSelectors: [],
|
},
|
||||||
selectors: ['#blockquotes .example'],
|
{
|
||||||
readyEvent: null,
|
label: 'Blockquotes',
|
||||||
delay: 500,
|
url: 'http://localhost:3000',
|
||||||
misMatchThreshold: 0.1,
|
hideSelectors: [],
|
||||||
onReadyScript: null,
|
removeSelectors: [],
|
||||||
onBeforeScript: null
|
selectors: ['#blockquotes .example'],
|
||||||
}, {
|
readyEvent: null,
|
||||||
label: 'Buttons',
|
delay: 500,
|
||||||
url: 'http://localhost:3000',
|
misMatchThreshold: 0.1,
|
||||||
hideSelectors: [],
|
onReadyScript: null,
|
||||||
removeSelectors: [],
|
onBeforeScript: null
|
||||||
selectors: ['#buttons .example'],
|
},
|
||||||
readyEvent: null,
|
{
|
||||||
delay: 500,
|
label: 'Buttons',
|
||||||
misMatchThreshold: 0.1,
|
url: 'http://localhost:3000',
|
||||||
onReadyScript: null,
|
hideSelectors: [],
|
||||||
onBeforeScript: null
|
removeSelectors: [],
|
||||||
}, {
|
selectors: ['#buttons .example'],
|
||||||
label: 'Lists',
|
readyEvent: null,
|
||||||
url: 'http://localhost:3000',
|
delay: 500,
|
||||||
hideSelectors: [],
|
misMatchThreshold: 0.1,
|
||||||
removeSelectors: [],
|
onReadyScript: null,
|
||||||
selectors: ['#lists .example'],
|
onBeforeScript: null
|
||||||
readyEvent: null,
|
},
|
||||||
delay: 500,
|
{
|
||||||
misMatchThreshold: 0.1,
|
label: 'Lists',
|
||||||
onReadyScript: null,
|
url: 'http://localhost:3000',
|
||||||
onBeforeScript: null
|
hideSelectors: [],
|
||||||
}, {
|
removeSelectors: [],
|
||||||
label: 'Forms',
|
selectors: ['#lists .example'],
|
||||||
url: 'http://localhost:3000',
|
readyEvent: null,
|
||||||
hideSelectors: [],
|
delay: 500,
|
||||||
removeSelectors: [],
|
misMatchThreshold: 0.1,
|
||||||
selectors: ['#forms .example'],
|
onReadyScript: null,
|
||||||
readyEvent: null,
|
onBeforeScript: null
|
||||||
delay: 500,
|
},
|
||||||
misMatchThreshold: 0.1,
|
{
|
||||||
onReadyScript: null,
|
label: 'Forms',
|
||||||
onBeforeScript: null
|
url: 'http://localhost:3000',
|
||||||
}, {
|
hideSelectors: [],
|
||||||
label: 'Tables',
|
removeSelectors: [],
|
||||||
url: 'http://localhost:3000',
|
selectors: ['#forms .example'],
|
||||||
hideSelectors: [],
|
readyEvent: null,
|
||||||
removeSelectors: [],
|
delay: 500,
|
||||||
selectors: ['#tables .example'],
|
misMatchThreshold: 0.1,
|
||||||
readyEvent: null,
|
onReadyScript: null,
|
||||||
delay: 500,
|
onBeforeScript: null
|
||||||
misMatchThreshold: 0.1,
|
},
|
||||||
onReadyScript: null,
|
{
|
||||||
onBeforeScript: null
|
label: 'Tables',
|
||||||
}, {
|
url: 'http://localhost:3000',
|
||||||
label: 'Grids',
|
hideSelectors: [],
|
||||||
url: 'http://localhost:3000',
|
removeSelectors: [],
|
||||||
hideSelectors: [],
|
selectors: ['#tables .example'],
|
||||||
removeSelectors: [],
|
readyEvent: null,
|
||||||
selectors: ['#grids .example'],
|
delay: 500,
|
||||||
readyEvent: null,
|
misMatchThreshold: 0.1,
|
||||||
delay: 500,
|
onReadyScript: null,
|
||||||
misMatchThreshold: 0.1,
|
onBeforeScript: null
|
||||||
onReadyScript: null,
|
},
|
||||||
onBeforeScript: null
|
{
|
||||||
}, {
|
label: 'Grids',
|
||||||
label: 'Codes',
|
url: 'http://localhost:3000',
|
||||||
url: 'http://localhost:3000',
|
hideSelectors: [],
|
||||||
hideSelectors: [],
|
removeSelectors: [],
|
||||||
removeSelectors: [],
|
selectors: ['#grids .example'],
|
||||||
selectors: ['#codes .example'],
|
readyEvent: null,
|
||||||
readyEvent: null,
|
delay: 500,
|
||||||
delay: 500,
|
misMatchThreshold: 0.1,
|
||||||
misMatchThreshold: 0.1,
|
onReadyScript: null,
|
||||||
onReadyScript: null,
|
onBeforeScript: null
|
||||||
onBeforeScript: null
|
},
|
||||||
}, {
|
{
|
||||||
label: 'Utilities',
|
label: 'Codes',
|
||||||
url: 'http://localhost:3000',
|
url: 'http://localhost:3000',
|
||||||
hideSelectors: [],
|
hideSelectors: [],
|
||||||
removeSelectors: [],
|
removeSelectors: [],
|
||||||
selectors: ['#utilities .example'],
|
selectors: ['#codes .example'],
|
||||||
readyEvent: null,
|
readyEvent: null,
|
||||||
delay: 500,
|
delay: 500,
|
||||||
misMatchThreshold: 0.1,
|
misMatchThreshold: 0.1,
|
||||||
onReadyScript: null,
|
onReadyScript: null,
|
||||||
onBeforeScript: null
|
onBeforeScript: null
|
||||||
}],
|
},
|
||||||
paths: {
|
{
|
||||||
bitmaps_reference: 'test/regression',
|
label: 'Utilities',
|
||||||
bitmaps_test: 'node_modules/backstopjs/.tmp/bitmaps_test',
|
url: 'http://localhost:3000',
|
||||||
casper_scripts: 'node_modules/backstopjs/.tmp/casper_scripts',
|
hideSelectors: [],
|
||||||
html_report: 'node_modules/backstopjs/.tmp/html_report',
|
removeSelectors: [],
|
||||||
ci_report: 'node_modules/backstopjs/.tmp/ci_report'
|
selectors: ['#utilities .example'],
|
||||||
},
|
readyEvent: null,
|
||||||
engine: 'phantomjs',
|
delay: 500,
|
||||||
report: [
|
misMatchThreshold: 0.1,
|
||||||
'browser',
|
onReadyScript: null,
|
||||||
'CLI',
|
onBeforeScript: null
|
||||||
'CI'
|
}
|
||||||
],
|
],
|
||||||
casperFlags: [],
|
paths: {
|
||||||
debug: false,
|
bitmaps_reference: 'test/regression',
|
||||||
port: 3002
|
bitmaps_test: 'node_modules/backstopjs/.tmp/bitmaps_test',
|
||||||
|
casper_scripts: 'node_modules/backstopjs/.tmp/casper_scripts',
|
||||||
|
html_report: 'node_modules/backstopjs/.tmp/html_report',
|
||||||
|
ci_report: 'node_modules/backstopjs/.tmp/ci_report'
|
||||||
|
},
|
||||||
|
engine: 'phantomjs',
|
||||||
|
report: ['browser', 'CLI', 'CI'],
|
||||||
|
casperFlags: [],
|
||||||
|
debug: false,
|
||||||
|
port: 3002
|
||||||
}
|
}
|
||||||
|
96
bower.json
96
bower.json
@ -1,50 +1,50 @@
|
|||||||
{
|
{
|
||||||
"name": "milligram",
|
"name": "milligram",
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"description": "A minimalist CSS framework.",
|
"description": "A minimalist CSS framework.",
|
||||||
"homepage": "https://milligram.io",
|
"homepage": "https://milligram.io",
|
||||||
"repository": "milligram/milligram",
|
"repository": "milligram/milligram",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
|
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
|
||||||
"main": "dist/milligram.css",
|
"main": "dist/milligram.css",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"bootstrap",
|
"bootstrap",
|
||||||
"css",
|
"css",
|
||||||
"css3",
|
"css3",
|
||||||
"flexbox",
|
"flexbox",
|
||||||
"front-end",
|
"front-end",
|
||||||
"framework",
|
"framework",
|
||||||
"html",
|
"html",
|
||||||
"html5",
|
"html5",
|
||||||
"kickstarter",
|
"kickstarter",
|
||||||
"less",
|
"less",
|
||||||
"responsive",
|
"responsive",
|
||||||
"mobile",
|
"mobile",
|
||||||
"mobile-first",
|
"mobile-first",
|
||||||
"postcss",
|
"postcss",
|
||||||
"responsive",
|
"responsive",
|
||||||
"sass",
|
"sass",
|
||||||
"scss",
|
"scss",
|
||||||
"stylus"
|
"stylus"
|
||||||
],
|
],
|
||||||
"ignore": [
|
"ignore": [
|
||||||
".appveyor.yml",
|
".appveyor.yml",
|
||||||
".github",
|
".github",
|
||||||
".gitignore",
|
".gitignore",
|
||||||
".gitpod.yml",
|
".gitpod.yml",
|
||||||
".prettierignore",
|
".prettierignore",
|
||||||
".sasslintrc",
|
".sasslintrc",
|
||||||
".travis.yml",
|
".travis.yml",
|
||||||
"backstop.config.js",
|
"backstop.config.js",
|
||||||
"bower.json",
|
"bower.json",
|
||||||
"changelog.md",
|
"changelog.md",
|
||||||
"composer.json",
|
"composer.json",
|
||||||
"package.js",
|
"package.js",
|
||||||
"package.json",
|
"package.json",
|
||||||
"src",
|
"src",
|
||||||
"test"
|
"test"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"normalize.css": "~5.0.0"
|
"normalize.css": "~5.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,50 +1,50 @@
|
|||||||
{
|
{
|
||||||
"name": "milligram/milligram",
|
"name": "milligram/milligram",
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"description": "A minimalist CSS framework.",
|
"description": "A minimalist CSS framework.",
|
||||||
"homepage": "https://milligram.io",
|
"homepage": "https://milligram.io",
|
||||||
"repository": "milligram/milligram",
|
"repository": "milligram/milligram",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
|
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
|
||||||
"main": "dist/milligram.css",
|
"main": "dist/milligram.css",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"bootstrap",
|
"bootstrap",
|
||||||
"css",
|
"css",
|
||||||
"css3",
|
"css3",
|
||||||
"flexbox",
|
"flexbox",
|
||||||
"front-end",
|
"front-end",
|
||||||
"framework",
|
"framework",
|
||||||
"html",
|
"html",
|
||||||
"html5",
|
"html5",
|
||||||
"kickstarter",
|
"kickstarter",
|
||||||
"less",
|
"less",
|
||||||
"responsive",
|
"responsive",
|
||||||
"mobile",
|
"mobile",
|
||||||
"mobile-first",
|
"mobile-first",
|
||||||
"postcss",
|
"postcss",
|
||||||
"responsive",
|
"responsive",
|
||||||
"sass",
|
"sass",
|
||||||
"scss",
|
"scss",
|
||||||
"stylus"
|
"stylus"
|
||||||
],
|
],
|
||||||
"ignore": [
|
"ignore": [
|
||||||
".appveyor.yml",
|
".appveyor.yml",
|
||||||
".github",
|
".github",
|
||||||
".gitignore",
|
".gitignore",
|
||||||
".gitpod.yml",
|
".gitpod.yml",
|
||||||
".prettierignore",
|
".prettierignore",
|
||||||
".sasslintrc",
|
".sasslintrc",
|
||||||
".travis.yml",
|
".travis.yml",
|
||||||
"backstop.config.js",
|
"backstop.config.js",
|
||||||
"bower.json",
|
"bower.json",
|
||||||
"changelog.md",
|
"changelog.md",
|
||||||
"composer.json",
|
"composer.json",
|
||||||
"package.js",
|
"package.js",
|
||||||
"package.json",
|
"package.json",
|
||||||
"src",
|
"src",
|
||||||
"test"
|
"test"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"normalize.css": "~5.0.0"
|
"normalize.css": "~5.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
406
example.html
406
example.html
@ -1,110 +1,308 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<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
|
||||||
<title>Milligram | A minimalist CSS framework.</title>
|
name="description"
|
||||||
<link rel="icon" href="https://milligram.io/images/icon.png">
|
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."
|
||||||
<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">
|
<title>Milligram | A minimalist CSS framework.</title>
|
||||||
<link rel="stylesheet" href="../dist/milligram.min.css">
|
<link rel="icon" href="https://milligram.io/images/icon.png" />
|
||||||
<link rel="stylesheet" href="https://milligram.io/styles/main.css">
|
<link
|
||||||
</head>
|
rel="stylesheet"
|
||||||
<body>
|
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="../dist/milligram.min.css" />
|
||||||
|
<link rel="stylesheet" href="https://milligram.io/styles/main.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="wrapper">
|
||||||
|
<nav class="navigation">
|
||||||
|
<section class="container">
|
||||||
|
<a class="navigation-title" href="https://milligram.io/">
|
||||||
|
<svg class="img" version="1.1" viewBox="0 0 463 669">
|
||||||
|
<g
|
||||||
|
transform="translate(0.000000,669.000000) scale(0.100000,-0.100000)"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M2303 6677c-11-13-58-89-393-627-128-206-247-397-265-425-18-27-85-135-150-240-65-104-281-451-480-770-358-575-604-970-641-1032-10-18-45-74-76-126-47-78-106-194-107-212-1-3-11-26-24-53-60-118-132-406-157-623-19-158-8-491 20-649 82-462 291-872 619-1213 192-199 387-340 646-467 335-165 638-235 1020-235 382 0 685 70 1020 235 259 127 454 268 646 467 328 341 537 751 619 1213 28 158 39 491 20 649-25 217-97 505-157 623-13 27-23 50-23 53 0 16-57 127-107 210-32 52-67 110-77 128-37 62-283 457-641 1032-199 319-415 666-480 770-65 105-132 213-150 240-18 28-137 219-265 425-354 570-393 630-400 635-4 3-12-1-17-8zm138-904c118-191 654-1050 1214-1948 148-236 271-440 273-452 2-13 8-23 11-23 14 0 72-99 125-212 92-195 146-384 171-598 116-974-526-1884-1488-2110-868-205-1779 234-2173 1046-253 522-257 1124-10 1659 45 97 108 210 126 225 4 3 9 13 13 22 3 9 126 209 273 445 734 1176 1102 1766 1213 1946 67 108 124 197 126 197 2 0 59-89 126-197zM1080 3228c-75-17-114-67-190-243-91-212-128-368-137-580-34-772 497-1451 1254-1605 77-15 112-18 143-11 155 35 212 213 106 329-32 36-62 48-181 75-223 50-392 140-552 291-115 109-178 192-242 316-101 197-136 355-128 580 3 111 10 167 30 241 30 113 80 237 107 267 11 12 20 26 20 32 0 6 8 22 17 36 26 41 27 99 3 147-54 105-142 149-250 125z"
|
||||||
|
></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<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://codepen.io/milligramcss"
|
||||||
|
title="On Codepen"
|
||||||
|
>On Codepen</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a
|
||||||
|
class="popover-link"
|
||||||
|
target="blank"
|
||||||
|
href="https://facebook.com/milligramcss"
|
||||||
|
title="On Facebook"
|
||||||
|
>On Facebook</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="popover-item">
|
||||||
|
<a
|
||||||
|
class="popover-link"
|
||||||
|
target="blank"
|
||||||
|
href="https://twitter.com/milligramcss"
|
||||||
|
title="On Twitter"
|
||||||
|
>On Twitter</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
|
||||||
|
href="https://github.com/milligram/milligram"
|
||||||
|
title="Milligram on Github"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<svg class="octocat" viewBox="0 0 250 250">
|
||||||
|
<path
|
||||||
|
d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
class="octocat-arm"
|
||||||
|
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"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
class="octocat-body"
|
||||||
|
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"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<main class="wrapper">
|
<section class="container" id="examples">
|
||||||
|
<h5 class="title">Examples</h5>
|
||||||
|
<p>You can view more examples of using Milligram.</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://milligram.io/#getting-started"
|
||||||
|
title="Getting Started"
|
||||||
|
>Getting Started</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://milligram.io/#typography" title="Typography"
|
||||||
|
>Typography</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://milligram.io/#blockquotes" title="Blockquotes"
|
||||||
|
>Blockquotes</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://milligram.io/#buttons" title="Buttons">Buttons</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="https://milligram.io/#lists" title="Lists">Lists</a></li>
|
||||||
|
<li><a href="https://milligram.io/#forms" title="Forms">Forms</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="https://milligram.io/#tables" title="Tables">Tables</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="https://milligram.io/#grids" title="Grids">Grids</a></li>
|
||||||
|
<li><a href="https://milligram.io/#codes" title="Codes">Codes</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="https://milligram.io/#utilities" title="Utilities"
|
||||||
|
>Utilities</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li><a href="https://milligram.io/#tips" title="Tips">Tips</a></li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://milligram.io/#browser-support"
|
||||||
|
title="Browser Support"
|
||||||
|
>Browser Support</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<nav class="navigation">
|
<section class="container" id="contributing">
|
||||||
<section class="container">
|
<h5 class="title">Contributing</h5>
|
||||||
<a class="navigation-title" href="https://milligram.io/">
|
<p>
|
||||||
<svg class="img" version="1.1" viewBox="0 0 463 669">
|
Want to contribute? Follow these
|
||||||
<g transform="translate(0.000000,669.000000) scale(0.100000,-0.100000)">
|
<a
|
||||||
<path d="M2303 6677c-11-13-58-89-393-627-128-206-247-397-265-425-18-27-85-135-150-240-65-104-281-451-480-770-358-575-604-970-641-1032-10-18-45-74-76-126-47-78-106-194-107-212-1-3-11-26-24-53-60-118-132-406-157-623-19-158-8-491 20-649 82-462 291-872 619-1213 192-199 387-340 646-467 335-165 638-235 1020-235 382 0 685 70 1020 235 259 127 454 268 646 467 328 341 537 751 619 1213 28 158 39 491 20 649-25 217-97 505-157 623-13 27-23 50-23 53 0 16-57 127-107 210-32 52-67 110-77 128-37 62-283 457-641 1032-199 319-415 666-480 770-65 105-132 213-150 240-18 28-137 219-265 425-354 570-393 630-400 635-4 3-12-1-17-8zm138-904c118-191 654-1050 1214-1948 148-236 271-440 273-452 2-13 8-23 11-23 14 0 72-99 125-212 92-195 146-384 171-598 116-974-526-1884-1488-2110-868-205-1779 234-2173 1046-253 522-257 1124-10 1659 45 97 108 210 126 225 4 3 9 13 13 22 3 9 126 209 273 445 734 1176 1102 1766 1213 1946 67 108 124 197 126 197 2 0 59-89 126-197zM1080 3228c-75-17-114-67-190-243-91-212-128-368-137-580-34-772 497-1451 1254-1605 77-15 112-18 143-11 155 35 212 213 106 329-32 36-62 48-181 75-223 50-392 140-552 291-115 109-178 192-242 316-101 197-136 355-128 580 3 111 10 167 30 241 30 113 80 237 107 267 11 12 20 26 20 32 0 6 8 22 17 36 26 41 27 99 3 147-54 105-142 149-250 125z"></path>
|
href="https://github.com/milligram/milligram/blob/master/.github/contributing.md"
|
||||||
</g>
|
title="Contributing"
|
||||||
</svg>
|
>recommendations</a
|
||||||
|
>.
|
||||||
<h1 class="title">Milligram</h1>
|
</p>
|
||||||
</a>
|
</section>
|
||||||
<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://codepen.io/milligramcss" title="On Codepen">On Codepen</a></li>
|
|
||||||
<li class="popover-item"><a class="popover-link" target="blank" href="https://facebook.com/milligramcss" title="On Facebook">On Facebook</a></li>
|
|
||||||
<li class="popover-item"><a class="popover-link" target="blank" href="https://twitter.com/milligramcss" title="On Twitter">On Twitter</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 href="https://github.com/milligram/milligram" title="Milligram on Github" target="_blank">
|
|
||||||
<svg class="octocat" viewBox="0 0 250 250"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path class="octocat-arm" 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"></path><path class="octocat-body" 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"></path></svg>
|
|
||||||
</a>
|
|
||||||
</section>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<section class="container" id="examples">
|
<footer class="footer">
|
||||||
<h5 class="title">Examples</h5>
|
<section class="container">
|
||||||
<p>You can view more examples of using Milligram.</p>
|
<p>
|
||||||
<p>
|
Designed with ♥ by
|
||||||
<ul>
|
<a target="_blank" href="https://cjpatoilo.com" title="CJ Patoilo"
|
||||||
<li><a href="https://milligram.io/#getting-started" title="Getting Started">Getting Started</a></li>
|
>CJ Patoilo</a
|
||||||
<li><a href="https://milligram.io/#typography" title="Typography">Typography</a></li>
|
>. Licensed under the
|
||||||
<li><a href="https://milligram.io/#blockquotes" title="Blockquotes">Blockquotes</a></li>
|
<a
|
||||||
<li><a href="https://milligram.io/#buttons" title="Buttons">Buttons</a></li>
|
target="_blank"
|
||||||
<li><a href="https://milligram.io/#lists" title="Lists">Lists</a></li>
|
href="https://github.com/milligram/milligram#license"
|
||||||
<li><a href="https://milligram.io/#forms" title="Forms">Forms</a></li>
|
title="MIT License"
|
||||||
<li><a href="https://milligram.io/#tables" title="Tables">Tables</a></li>
|
>MIT License</a
|
||||||
<li><a href="https://milligram.io/#grids" title="Grids">Grids</a></li>
|
>.
|
||||||
<li><a href="https://milligram.io/#codes" title="Codes">Codes</a></li>
|
</p>
|
||||||
<li><a href="https://milligram.io/#utilities" title="Utilities">Utilities</a></li>
|
</section>
|
||||||
<li><a href="https://milligram.io/#tips" title="Tips">Tips</a></li>
|
</footer>
|
||||||
<li><a href="https://milligram.io/#browser-support" title="Browser Support">Browser Support</a></li>
|
</main>
|
||||||
</ul>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="container" id="contributing">
|
<script src="https://milligram.io/scripts/main.js"></script>
|
||||||
<h5 class="title">Contributing</h5>
|
</body>
|
||||||
<p>Want to contribute? Follow these <a href="https://github.com/milligram/milligram/blob/master/.github/contributing.md" title="Contributing">recommendations</a>.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<section class="container">
|
|
||||||
<p>Designed with ♥ by <a target="_blank" href="https://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>
|
|
||||||
|
|
||||||
<script src="https://milligram.io/scripts/main.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
28540
package-lock.json
generated
28540
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.js
16
package.js
@ -1,16 +1,14 @@
|
|||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
Package.describe({
|
Package.describe({
|
||||||
name: 'milligram:milligram',
|
name: 'milligram:milligram',
|
||||||
version: '1.3.0',
|
version: '1.3.0',
|
||||||
summary: 'A minimalist CSS framework.',
|
summary: 'A minimalist CSS framework.',
|
||||||
git: 'https://github.com/milligram/milligram.git',
|
git: 'https://github.com/milligram/milligram.git',
|
||||||
documentation: 'readme.md'
|
documentation: 'readme.md'
|
||||||
})
|
})
|
||||||
|
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
Package.onUse(api => {
|
Package.onUse(api => {
|
||||||
api.versionsFrom('METEOR@1.0')
|
api.versionsFrom('METEOR@1.0')
|
||||||
api.addFiles([
|
api.addFiles(['dist/milligram.css'], 'client')
|
||||||
'dist/milligram.css'
|
|
||||||
], 'client')
|
|
||||||
})
|
})
|
||||||
|
200
package.json
200
package.json
@ -1,102 +1,102 @@
|
|||||||
{
|
{
|
||||||
"name": "milligram",
|
"name": "milligram",
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"description": "A minimalist CSS framework.",
|
"description": "A minimalist CSS framework.",
|
||||||
"homepage": "https://milligram.io",
|
"homepage": "https://milligram.io",
|
||||||
"repository": "milligram/milligram",
|
"repository": "milligram/milligram",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
|
"author": "CJ Patoilo <cjpatoilo@gmail.com>",
|
||||||
"main": "dist/milligram.css",
|
"main": "dist/milligram.css",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"bootstrap",
|
"bootstrap",
|
||||||
"css",
|
"css",
|
||||||
"css3",
|
"css3",
|
||||||
"flexbox",
|
"flexbox",
|
||||||
"front-end",
|
"front-end",
|
||||||
"framework",
|
"framework",
|
||||||
"html",
|
"html",
|
||||||
"html5",
|
"html5",
|
||||||
"kickstarter",
|
"kickstarter",
|
||||||
"less",
|
"less",
|
||||||
"responsive",
|
"responsive",
|
||||||
"mobile",
|
"mobile",
|
||||||
"mobile-first",
|
"mobile-first",
|
||||||
"postcss",
|
"postcss",
|
||||||
"responsive",
|
"responsive",
|
||||||
"sass",
|
"sass",
|
||||||
"scss",
|
"scss",
|
||||||
"stylus"
|
"stylus"
|
||||||
],
|
],
|
||||||
"ignore": [
|
"ignore": [
|
||||||
".appveyor.yml",
|
".appveyor.yml",
|
||||||
".github",
|
".github",
|
||||||
".gitignore",
|
".gitignore",
|
||||||
".gitpod.yml",
|
".gitpod.yml",
|
||||||
".prettierignore",
|
".prettierignore",
|
||||||
".sasslintrc",
|
".sasslintrc",
|
||||||
".travis.yml",
|
".travis.yml",
|
||||||
"backstop.config.js",
|
"backstop.config.js",
|
||||||
"bower.json",
|
"bower.json",
|
||||||
"changelog.md",
|
"changelog.md",
|
||||||
"composer.json",
|
"composer.json",
|
||||||
"package.js",
|
"package.js",
|
||||||
"package.json",
|
"package.json",
|
||||||
"src",
|
"src",
|
||||||
"test"
|
"test"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"normalize.css": "~5.0.0"
|
"normalize.css": "~5.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^9.6.1",
|
"autoprefixer": "^9.6.1",
|
||||||
"ava": "^2.2.0",
|
"ava": "^2.2.0",
|
||||||
"backstopjs": "^3.8.9",
|
"backstopjs": "^3.8.9",
|
||||||
"banner-cli": "^0.14.0",
|
"banner-cli": "^0.14.0",
|
||||||
"browser-sync": "^2.18.5",
|
"browser-sync": "^2.18.5",
|
||||||
"husky": "^4.2.5",
|
"husky": "^4.2.5",
|
||||||
"lint-staged": "^10.2.2",
|
"lint-staged": "^10.2.2",
|
||||||
"node-sass": "^4.12.0",
|
"node-sass": "^4.12.0",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"nyc": "^14.1.1",
|
"nyc": "^14.1.1",
|
||||||
"onchange": "^6.0.0",
|
"onchange": "^6.0.0",
|
||||||
"postcss-cli": "^6.1.3",
|
"postcss-cli": "^6.1.3",
|
||||||
"prettier-standard": "^16.3.0",
|
"prettier-standard": "^16.3.0",
|
||||||
"rimraf": "^2.5.4",
|
"rimraf": "^2.5.4",
|
||||||
"sass-lint": "^1.12.1"
|
"sass-lint": "^1.12.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^10.20.1",
|
"node": "^10.20.1",
|
||||||
"npm": "^6.14.4"
|
"npm": "^6.14.4"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "run-p build watch serve",
|
"start": "run-p build watch serve",
|
||||||
"build": "run-s clean sass autoprefixer banner",
|
"build": "run-s clean sass autoprefixer banner",
|
||||||
"clean": "rimraf dist",
|
"clean": "rimraf dist",
|
||||||
"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": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && 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",
|
||||||
"banner": "banner-cli dist/*.css",
|
"banner": "banner-cli dist/*.css",
|
||||||
"watch": "onchange src -- run-p build",
|
"watch": "onchange src -- run-p build",
|
||||||
"serve": "browser-sync start --no-notify -s test --ss dist -f dist",
|
"serve": "browser-sync start --no-notify -s test --ss dist -f dist",
|
||||||
"backstop": "run-s build && run-s serve compare",
|
"backstop": "run-s build && run-s serve compare",
|
||||||
"reference": "backstop reference --config backstop.config.js",
|
"reference": "backstop reference --config backstop.config.js",
|
||||||
"compare": "backstop test --config backstop.config.js",
|
"compare": "backstop test --config backstop.config.js",
|
||||||
"lint": "prettier-standard --check && sass-lint -c .sasslintrc src --verbose --no-exit",
|
"lint": "prettier-standard --check && sass-lint -c .sasslintrc src --verbose --no-exit",
|
||||||
"prepublish": "run-s build",
|
"prepublish": "run-s build",
|
||||||
"postpublish": "run-s clean",
|
"postpublish": "run-s clean",
|
||||||
"test": "npm run build && nyc ava"
|
"test": "npm run build && nyc ava"
|
||||||
},
|
},
|
||||||
"husky": {
|
"husky": {
|
||||||
"hooks": {
|
"hooks": {
|
||||||
"pre-commit": "lint-staged"
|
"pre-commit": "lint-staged"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"**/*": [
|
"**/*": [
|
||||||
"prettier-standard --format",
|
"prettier-standard --format",
|
||||||
"git add"
|
"git add"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"natives": "1.1.3"
|
"natives": "1.1.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -11,12 +11,10 @@
|
|||||||
[![Gitter Chat](https://img.shields.io/badge/gitter-join_the_chat-4cc61e.svg)](https://gitter.im/milligram/milligram)
|
[![Gitter Chat](https://img.shields.io/badge/gitter-join_the_chat-4cc61e.svg)](https://gitter.im/milligram/milligram)
|
||||||
[![Setup Automated](https://img.shields.io/badge/setup-automated-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
|
[![Setup Automated](https://img.shields.io/badge/setup-automated-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
|
||||||
|
|
||||||
|
|
||||||
## 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!
|
||||||
|
|
||||||
|
|
||||||
## Download
|
## Download
|
||||||
|
|
||||||
**Install with Bower**
|
**Install with Bower**
|
||||||
@ -37,7 +35,6 @@ $ npm install milligram
|
|||||||
$ yarn add milligram
|
$ yarn add milligram
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Table of Contents
|
## Table of Contents
|
||||||
|
|
||||||
- [Getting Started](https://milligram.io/#getting-started)
|
- [Getting Started](https://milligram.io/#getting-started)
|
||||||
@ -54,12 +51,10 @@ $ yarn add milligram
|
|||||||
- [Browser Support](https://milligram.io/#browser-support)
|
- [Browser Support](https://milligram.io/#browser-support)
|
||||||
- [Examples](https://milligram.io/#examples)
|
- [Examples](https://milligram.io/#examples)
|
||||||
|
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
Want to contribute? Follow these [recommendations](https://github.com/milligram/milligram/blob/master/.github/contributing.md).
|
Want to contribute? Follow these [recommendations](https://github.com/milligram/milligram/blob/master/.github/contributing.md).
|
||||||
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
Designed with ♥ by [CJ Patoilo](https://twitter.com/cjpatoilo). Licensed under the [MIT License](license).
|
Designed with ♥ by [CJ Patoilo](https://twitter.com/cjpatoilo). Licensed under the [MIT License](license).
|
||||||
|
1511
test/index.html
1511
test/index.html
File diff suppressed because it is too large
Load Diff
@ -5,29 +5,29 @@ const path = require('path')
|
|||||||
let dist = path.join(__dirname, '../../dist')
|
let dist = path.join(__dirname, '../../dist')
|
||||||
|
|
||||||
test.before('`dist` path should be created', t => {
|
test.before('`dist` path should be created', t => {
|
||||||
t.true(fs.lstatSync(dist).isDirectory())
|
t.true(fs.lstatSync(dist).isDirectory())
|
||||||
})
|
})
|
||||||
|
|
||||||
test('`milligram.css` should be created', t => {
|
test('`milligram.css` should be created', t => {
|
||||||
fs.readdirSync(dist).map(file => {
|
fs.readdirSync(dist).map(file => {
|
||||||
if (file === 'milligram.css') t.is(file, 'milligram.css')
|
if (file === 'milligram.css') t.is(file, 'milligram.css')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test('`milligram.min.css` should be created', t => {
|
test('`milligram.min.css` should be created', t => {
|
||||||
fs.readdirSync(dist).map(file => {
|
fs.readdirSync(dist).map(file => {
|
||||||
if (file === 'milligram.min.css') t.is(file, 'milligram.min.css')
|
if (file === 'milligram.min.css') t.is(file, 'milligram.min.css')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test('`milligram.css.map` should be created', t => {
|
test('`milligram.css.map` should be created', t => {
|
||||||
fs.readdirSync(dist).map(file => {
|
fs.readdirSync(dist).map(file => {
|
||||||
if (file === 'milligram.css.map') t.is(file, 'milligram.css.map')
|
if (file === 'milligram.css.map') t.is(file, 'milligram.css.map')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test('`milligram.min.css.map` should be created', t => {
|
test('`milligram.min.css.map` should be created', t => {
|
||||||
fs.readdirSync(dist).map(file => {
|
fs.readdirSync(dist).map(file => {
|
||||||
if (file === 'milligram.min.css.map') t.is(file, 'milligram.min.css.map')
|
if (file === 'milligram.min.css.map') t.is(file, 'milligram.min.css.map')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -3,90 +3,102 @@ const npm = require('../../package.json')
|
|||||||
const bower = require('../../bower.json')
|
const bower = require('../../bower.json')
|
||||||
const composer = require('../../composer.json')
|
const composer = require('../../composer.json')
|
||||||
|
|
||||||
const packages = [
|
const packages = [npm, bower, composer]
|
||||||
npm,
|
|
||||||
bower,
|
|
||||||
composer
|
|
||||||
]
|
|
||||||
|
|
||||||
test(`Name should be equal "${npm.name}"`, t => {
|
test(`Name should be equal "${npm.name}"`, t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (compareValue.name.match('/')) compareValue.name = compareValue.name.split('/')[1]
|
if (compareValue.name.match('/'))
|
||||||
if (referenceIndex !== compareIndex) t.is(referenceValue.name, compareValue.name)
|
compareValue.name = compareValue.name.split('/')[1]
|
||||||
})
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(referenceValue.name, compareValue.name)
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test(`Version should be equal to "v${npm.version}"`, t => {
|
test(`Version should be equal to "v${npm.version}"`, t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (referenceIndex !== compareIndex) t.is(referenceValue.version, compareValue.version)
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(referenceValue.version, compareValue.version)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test(`Description should be equal to "${npm.description}"`, t => {
|
test(`Description should be equal to "${npm.description}"`, t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (referenceIndex !== compareIndex) t.is(referenceValue.description, compareValue.description)
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(referenceValue.description, compareValue.description)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test(`Homepage should be equal to "${npm.homepage}"`, t => {
|
test(`Homepage should be equal to "${npm.homepage}"`, t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (referenceIndex !== compareIndex) t.is(referenceValue.homepage, compareValue.homepage)
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(referenceValue.homepage, compareValue.homepage)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test(`Repository should be equal to "${npm.repository}"`, t => {
|
test(`Repository should be equal to "${npm.repository}"`, t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (referenceIndex !== compareIndex) t.is(referenceValue.repository, compareValue.repository)
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(referenceValue.repository, compareValue.repository)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test(`License should be equal to "${npm.license}"`, t => {
|
test(`License should be equal to "${npm.license}"`, t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (referenceIndex !== compareIndex) t.is(referenceValue.license, compareValue.license)
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(referenceValue.license, compareValue.license)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test(`Author Name should be equal to "${npm.author}"`, t => {
|
test(`Author Name should be equal to "${npm.author}"`, t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (referenceIndex !== compareIndex) t.is(referenceValue.author, compareValue.author)
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(referenceValue.author, compareValue.author)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test(`Main File should be equal to "${npm.main}"`, t => {
|
test(`Main File should be equal to "${npm.main}"`, t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (referenceIndex !== compareIndex) t.is(referenceValue.main, compareValue.main)
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(referenceValue.main, compareValue.main)
|
||||||
})
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test('Ignore should be equal', t => {
|
test('Ignore should be equal', t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (referenceIndex !== compareIndex) t.is(JSON.stringify(referenceValue.ignore), JSON.stringify(compareValue.ignore))
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(
|
||||||
})
|
JSON.stringify(referenceValue.ignore),
|
||||||
|
JSON.stringify(compareValue.ignore)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
test('Keywords should be equal', t => {
|
test('Keywords should be equal', t => {
|
||||||
packages.map((referenceValue, referenceIndex) => {
|
packages.map((referenceValue, referenceIndex) => {
|
||||||
packages.map((compareValue, compareIndex) => {
|
packages.map((compareValue, compareIndex) => {
|
||||||
if (referenceIndex !== compareIndex) t.is(JSON.stringify(referenceValue.keywords), JSON.stringify(compareValue.keywords))
|
if (referenceIndex !== compareIndex)
|
||||||
})
|
t.is(
|
||||||
})
|
JSON.stringify(referenceValue.keywords),
|
||||||
|
JSON.stringify(compareValue.keywords)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user