CJ Patoilo
GitHub
commit
af339b2c05
@ -1,17 +1,16 @@
|
||||
os: Visual Studio 2015
|
||||
version: "{build}"
|
||||
version: '{build}'
|
||||
build: off
|
||||
platform: x64
|
||||
environment:
|
||||
matrix:
|
||||
- nodejs_version: 10
|
||||
- nodejs_version: 8
|
||||
- nodejs_version: 12
|
||||
install:
|
||||
- ps: Install-Product node $env:nodejs_version x64
|
||||
- set CI=true
|
||||
- npm i -g npm@latest
|
||||
- set PATH=%APPDATA%\npm;%PATH%
|
||||
- npm install
|
||||
- npm i
|
||||
matrix:
|
||||
fast_finish: true
|
||||
shallow_clone: true
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = tab
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
# editorconfig-tools is unable to ignore longs strings or urls
|
||||
max_line_length = null
|
||||
|
||||
[{*.yml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
20
.github/contributing.md
vendored
20
.github/contributing.md
vendored
@ -2,6 +2,7 @@
|
||||
|
||||
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.
|
||||
|
||||
_Note: For issues relating to the site, please use the [milligram/milligram.github.io](https://github.com/milligram/milligram.github.io)_
|
||||
|
||||
## Table of Contents
|
||||
|
||||
@ -13,12 +14,10 @@ We would love for you to contribute to Milligram and help us make this even bett
|
||||
- [Code of Conduct](#code-of-conduct)
|
||||
- [License](#license)
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
## 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.
|
||||
@ -31,17 +30,13 @@ Try to solve a problem for each pull request, this increases the chances of acce
|
||||
1. Push to the branch: `git push origin my-feature-name`
|
||||
1. Submit a pull request!
|
||||
|
||||
You can do all of this from yoru browser using Gitpod, the free online dev environment.
|
||||
|
||||
[](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)*
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
You can do all of this from your browser using Gitpod, the free online dev environment.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/milligram/milligram)
|
||||
|
||||
## Style Guide
|
||||
|
||||
@ -82,19 +77,16 @@ Milligram use [Sass](http://sass-lang.com/) to give super powers to CSS. Look at
|
||||
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)._
|
||||
|
||||
## 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 run visual-regression` after making changes to the source code.
|
||||
|
||||
## Code of Conduct
|
||||
|
||||
Help us keep Milligram open and inclusive. Please read and follow our thoughts on [Code of Conduct](http://confcodeofconduct.com/).
|
||||
|
||||
|
||||
## License
|
||||
|
||||
By contributing your code, you agree to license your contribution under the [MIT license](../license).
|
||||
|
||||
2
.github/funding.yml
vendored
2
.github/funding.yml
vendored
@ -1,2 +1,2 @@
|
||||
patreon: cjpatoilo
|
||||
open_collective: milligram
|
||||
patreon: cjpatoilo
|
||||
|
||||
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
|
||||
|
||||
<!-- 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):**
|
||||
|
||||
|
||||
### Test case
|
||||
|
||||
<!-- Provide code samples on [Codepen](http://codepen.io/). -->
|
||||
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Provide the steps needed to reproduce the issue given the above test case. -->
|
||||
|
||||
|
||||
### Expected behavior
|
||||
|
||||
<!-- What is the expected behavior? -->
|
||||
|
||||
|
||||
### Actual behavior
|
||||
|
||||
<!-- What is the actual behavior? -->
|
||||
|
||||
3
.github/pull_request_template.md
vendored
3
.github/pull_request_template.md
vendored
@ -14,7 +14,7 @@ Try to solve a problem for each pull request, this increases the chances of acce
|
||||
1. Push to the branch: `git push origin my-feature-name`
|
||||
1. Submit a pull request!
|
||||
|
||||
*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/milligram.github.io](https://github.com/milligram/milligram.github.io)_
|
||||
|
||||
Code of Conduct
|
||||
==============================
|
||||
@ -26,7 +26,6 @@ By contributing your code, you agree to license your contribution under the [MIT
|
||||
|
||||
-->
|
||||
|
||||
|
||||
### 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. -->
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -34,6 +34,7 @@ Temporary Items
|
||||
Thumbs.db
|
||||
build/Release
|
||||
coverage
|
||||
dist
|
||||
ehthumbs.db
|
||||
lib-cov
|
||||
logs
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
tasks:
|
||||
- init: yarn install
|
||||
- init: yarn install
|
||||
command: yarn start
|
||||
|
||||
# list the ports to be exposed
|
||||
ports:
|
||||
- port: 3000
|
||||
- port: 3000
|
||||
onOpen: open-preview
|
||||
- port: 3001
|
||||
- port: 3001
|
||||
onOpen: ignore
|
||||
|
||||
vscode:
|
||||
|
||||
@ -3,14 +3,16 @@
|
||||
.eslintrc
|
||||
.github
|
||||
.gitignore
|
||||
.gitpod.yml
|
||||
.npmignore
|
||||
.nyc_output
|
||||
.prettierignore
|
||||
.sasslintrc
|
||||
.travis.yml
|
||||
backstop.conf.js
|
||||
backstop.config.js
|
||||
bower.json
|
||||
changelog.md
|
||||
composer.json
|
||||
package.js
|
||||
package.json
|
||||
src
|
||||
test
|
||||
|
||||
2
.prettierignore
Normal file
2
.prettierignore
Normal file
@ -0,0 +1,2 @@
|
||||
dist
|
||||
.nyc_output
|
||||
11
.sasslintrc
11
.sasslintrc
@ -1,16 +1,19 @@
|
||||
#########################
|
||||
## Sass Lint File
|
||||
## SASS Lint File
|
||||
## See rules https://github.com/sasstools/sass-lint/tree/master/docs/rules
|
||||
#########################
|
||||
|
||||
# Linter Options
|
||||
options:
|
||||
# Don't merge default rules
|
||||
merge-default-rules: false
|
||||
|
||||
# File Options
|
||||
files:
|
||||
include: 'src/**/*.s+(a|c)ss'
|
||||
ignore:
|
||||
- 'node_modules/**/*.*'
|
||||
- 'node_modules'
|
||||
|
||||
# Rule Configuration
|
||||
rules:
|
||||
attribute-quotes:
|
||||
@ -52,9 +55,9 @@ rules:
|
||||
indentation:
|
||||
- 2
|
||||
-
|
||||
size: 'tab'
|
||||
size: 2
|
||||
property-sort-order:
|
||||
- 1
|
||||
- 2
|
||||
-
|
||||
order: 'alphabetical'
|
||||
ignore-custom-properties: true
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 10
|
||||
- 8
|
||||
- 12
|
||||
before_install:
|
||||
- npm i -g npm@latest
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
before_script:
|
||||
- npm run lint
|
||||
|
||||
130
backstop.conf.js
130
backstop.conf.js
@ -1,130 +0,0 @@
|
||||
'use strict'
|
||||
const config = {
|
||||
viewports: [{
|
||||
name: 'phone',
|
||||
width: 320,
|
||||
height: 480
|
||||
}, {
|
||||
name: 'laptop',
|
||||
width: 1280,
|
||||
height: 800
|
||||
}],
|
||||
scenarios: [{
|
||||
label: 'Typography',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#typography .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null
|
||||
}, {
|
||||
label: 'Blockquotes',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#blockquotes .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null
|
||||
}, {
|
||||
label: 'Buttons',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#buttons .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null
|
||||
}, {
|
||||
label: 'Lists',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#lists .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null
|
||||
}, {
|
||||
label: 'Forms',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#forms .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null
|
||||
}, {
|
||||
label: 'Tables',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#tables .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null
|
||||
}, {
|
||||
label: 'Grids',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#grids .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null
|
||||
}, {
|
||||
label: 'Codes',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#codes .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null
|
||||
}, {
|
||||
label: 'Utilities',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#utilities .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null
|
||||
}],
|
||||
paths: {
|
||||
bitmaps_reference: 'test/regression',
|
||||
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
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
138
backstop.config.js
Normal file
138
backstop.config.js
Normal file
@ -0,0 +1,138 @@
|
||||
'use strict'
|
||||
|
||||
module.exports = {
|
||||
viewports: [
|
||||
{
|
||||
name: 'phone',
|
||||
width: 320,
|
||||
height: 480,
|
||||
},
|
||||
{
|
||||
name: 'laptop',
|
||||
width: 1280,
|
||||
height: 800,
|
||||
},
|
||||
],
|
||||
scenarios: [
|
||||
{
|
||||
label: 'Typography',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#typography .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null,
|
||||
},
|
||||
{
|
||||
label: 'Blockquotes',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#blockquotes .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null,
|
||||
},
|
||||
{
|
||||
label: 'Buttons',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#buttons .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null,
|
||||
},
|
||||
{
|
||||
label: 'Lists',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#lists .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null,
|
||||
},
|
||||
{
|
||||
label: 'Forms',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#forms .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null,
|
||||
},
|
||||
{
|
||||
label: 'Tables',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#tables .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null,
|
||||
},
|
||||
{
|
||||
label: 'Grids',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#grids .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null,
|
||||
},
|
||||
{
|
||||
label: 'Code',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#code .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null,
|
||||
},
|
||||
{
|
||||
label: 'Utilities',
|
||||
url: 'http://localhost:3000',
|
||||
hideSelectors: [],
|
||||
removeSelectors: [],
|
||||
selectors: ['#utilities .example'],
|
||||
readyEvent: null,
|
||||
delay: 500,
|
||||
misMatchThreshold: 0.1,
|
||||
onReadyScript: null,
|
||||
onBeforeScript: null,
|
||||
},
|
||||
],
|
||||
paths: {
|
||||
bitmaps_reference: 'test/regression',
|
||||
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,
|
||||
}
|
||||
21
bower.json
21
bower.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "milligram",
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.0",
|
||||
"description": "A minimalist CSS framework.",
|
||||
"homepage": "https://milligram.io",
|
||||
"repository": "milligram/milligram",
|
||||
@ -27,24 +27,7 @@
|
||||
"scss",
|
||||
"stylus"
|
||||
],
|
||||
"ignore": [
|
||||
".appveyor.yml",
|
||||
".editorconfig",
|
||||
".eslintrc",
|
||||
".github",
|
||||
".gitignore",
|
||||
".sasslintrc",
|
||||
".travis.yml",
|
||||
"backstop.conf.js",
|
||||
"bower.json",
|
||||
"changelog.md",
|
||||
"composer.json",
|
||||
"package.js",
|
||||
"package.json",
|
||||
"src",
|
||||
"test"
|
||||
],
|
||||
"dependencies": {
|
||||
"normalize.css": "~5.0.0"
|
||||
"normalize.css": "~8.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "milligram/milligram",
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.0",
|
||||
"description": "A minimalist CSS framework.",
|
||||
"homepage": "https://milligram.io",
|
||||
"repository": "milligram/milligram",
|
||||
@ -27,24 +27,7 @@
|
||||
"scss",
|
||||
"stylus"
|
||||
],
|
||||
"ignore": [
|
||||
".appveyor.yml",
|
||||
".editorconfig",
|
||||
".eslintrc",
|
||||
".github",
|
||||
".gitignore",
|
||||
".sasslintrc",
|
||||
".travis.yml",
|
||||
"backstop.conf.js",
|
||||
"bower.json",
|
||||
"changelog.md",
|
||||
"composer.json",
|
||||
"package.js",
|
||||
"package.json",
|
||||
"src",
|
||||
"test"
|
||||
],
|
||||
"dependencies": {
|
||||
"normalize.css": "~5.0.0"
|
||||
"normalize.css": "~8.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
616
dist/milligram.css
vendored
616
dist/milligram.css
vendored
@ -1,616 +0,0 @@
|
||||
/*!
|
||||
* Milligram v1.3.0
|
||||
* https://milligram.github.io
|
||||
*
|
||||
* Copyright (c) 2018 CJ Patoilo
|
||||
* Licensed under the MIT license
|
||||
*/
|
||||
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #606c76;
|
||||
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
font-size: 1.6em;
|
||||
font-weight: 300;
|
||||
letter-spacing: .01em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 0.3rem solid #d1d1d1;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
blockquote *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.button,
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='reset'],
|
||||
input[type='submit'] {
|
||||
background-color: #9b4dca;
|
||||
border: 0.1rem solid #9b4dca;
|
||||
border-radius: .4rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
height: 3.8rem;
|
||||
letter-spacing: .1rem;
|
||||
line-height: 3.8rem;
|
||||
padding: 0 3.0rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button:focus, .button:hover,
|
||||
button:focus,
|
||||
button:hover,
|
||||
input[type='button']:focus,
|
||||
input[type='button']:hover,
|
||||
input[type='reset']:focus,
|
||||
input[type='reset']:hover,
|
||||
input[type='submit']:focus,
|
||||
input[type='submit']:hover {
|
||||
background-color: #606c76;
|
||||
border-color: #606c76;
|
||||
color: #fff;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button[disabled],
|
||||
button[disabled],
|
||||
input[type='button'][disabled],
|
||||
input[type='reset'][disabled],
|
||||
input[type='submit'][disabled] {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.button[disabled]:focus, .button[disabled]:hover,
|
||||
button[disabled]:focus,
|
||||
button[disabled]:hover,
|
||||
input[type='button'][disabled]:focus,
|
||||
input[type='button'][disabled]:hover,
|
||||
input[type='reset'][disabled]:focus,
|
||||
input[type='reset'][disabled]:hover,
|
||||
input[type='submit'][disabled]:focus,
|
||||
input[type='submit'][disabled]:hover {
|
||||
background-color: #9b4dca;
|
||||
border-color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-outline,
|
||||
button.button-outline,
|
||||
input[type='button'].button-outline,
|
||||
input[type='reset'].button-outline,
|
||||
input[type='submit'].button-outline {
|
||||
background-color: transparent;
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-outline:focus, .button.button-outline:hover,
|
||||
button.button-outline:focus,
|
||||
button.button-outline:hover,
|
||||
input[type='button'].button-outline:focus,
|
||||
input[type='button'].button-outline:hover,
|
||||
input[type='reset'].button-outline:focus,
|
||||
input[type='reset'].button-outline:hover,
|
||||
input[type='submit'].button-outline:focus,
|
||||
input[type='submit'].button-outline:hover {
|
||||
background-color: transparent;
|
||||
border-color: #606c76;
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
|
||||
button.button-outline[disabled]:focus,
|
||||
button.button-outline[disabled]:hover,
|
||||
input[type='button'].button-outline[disabled]:focus,
|
||||
input[type='button'].button-outline[disabled]:hover,
|
||||
input[type='reset'].button-outline[disabled]:focus,
|
||||
input[type='reset'].button-outline[disabled]:hover,
|
||||
input[type='submit'].button-outline[disabled]:focus,
|
||||
input[type='submit'].button-outline[disabled]:hover {
|
||||
border-color: inherit;
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-clear,
|
||||
button.button-clear,
|
||||
input[type='button'].button-clear,
|
||||
input[type='reset'].button-clear,
|
||||
input[type='submit'].button-clear {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
.button.button-clear:focus, .button.button-clear:hover,
|
||||
button.button-clear:focus,
|
||||
button.button-clear:hover,
|
||||
input[type='button'].button-clear:focus,
|
||||
input[type='button'].button-clear:hover,
|
||||
input[type='reset'].button-clear:focus,
|
||||
input[type='reset'].button-clear:hover,
|
||||
input[type='submit'].button-clear:focus,
|
||||
input[type='submit'].button-clear:hover {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
|
||||
button.button-clear[disabled]:focus,
|
||||
button.button-clear[disabled]:hover,
|
||||
input[type='button'].button-clear[disabled]:focus,
|
||||
input[type='button'].button-clear[disabled]:hover,
|
||||
input[type='reset'].button-clear[disabled]:focus,
|
||||
input[type='reset'].button-clear[disabled]:hover,
|
||||
input[type='submit'].button-clear[disabled]:focus,
|
||||
input[type='submit'].button-clear[disabled]:hover {
|
||||
color: #9b4dca;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #f4f5f6;
|
||||
border-radius: .4rem;
|
||||
font-size: 86%;
|
||||
margin: 0 .2rem;
|
||||
padding: .2rem .5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #f4f5f6;
|
||||
border-left: 0.3rem solid #9b4dca;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 0.1rem solid #f4f5f6;
|
||||
margin: 3.0rem 0;
|
||||
}
|
||||
|
||||
input[type='email'],
|
||||
input[type='number'],
|
||||
input[type='password'],
|
||||
input[type='search'],
|
||||
input[type='tel'],
|
||||
input[type='text'],
|
||||
input[type='url'],
|
||||
input[type='color'],
|
||||
input[type='date'],
|
||||
input[type='month'],
|
||||
input[type='week'],
|
||||
input[type='datetime'],
|
||||
input[type='datetime-local'],
|
||||
input:not([type]),
|
||||
textarea,
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
border: 0.1rem solid #d1d1d1;
|
||||
border-radius: .4rem;
|
||||
box-shadow: none;
|
||||
box-sizing: inherit;
|
||||
height: 3.8rem;
|
||||
padding: .6rem 1.0rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type='email']:focus,
|
||||
input[type='number']:focus,
|
||||
input[type='password']:focus,
|
||||
input[type='search']:focus,
|
||||
input[type='tel']:focus,
|
||||
input[type='text']:focus,
|
||||
input[type='url']:focus,
|
||||
input[type='color']:focus,
|
||||
input[type='date']:focus,
|
||||
input[type='month']:focus,
|
||||
input[type='week']:focus,
|
||||
input[type='datetime']:focus,
|
||||
input[type='datetime-local']:focus,
|
||||
input:not([type]):focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #9b4dca;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
|
||||
padding-right: 3.0rem;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 6.5rem;
|
||||
}
|
||||
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.label-inline {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 112.0rem;
|
||||
padding: 0 2.0rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row.row-no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row.row-no-padding > .column {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row.row-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row.row-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.row.row-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.row.row-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row.row-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.row.row-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.row .column {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
margin-left: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-10 {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-20 {
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-25 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-33, .row .column.column-offset-34 {
|
||||
margin-left: 33.3333%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-50 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-66, .row .column.column-offset-67 {
|
||||
margin-left: 66.6666%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-75 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-80 {
|
||||
margin-left: 80%;
|
||||
}
|
||||
|
||||
.row .column.column-offset-90 {
|
||||
margin-left: 90%;
|
||||
}
|
||||
|
||||
.row .column.column-10 {
|
||||
flex: 0 0 10%;
|
||||
max-width: 10%;
|
||||
}
|
||||
|
||||
.row .column.column-20 {
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
.row .column.column-25 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.row .column.column-33, .row .column.column-34 {
|
||||
flex: 0 0 33.3333%;
|
||||
max-width: 33.3333%;
|
||||
}
|
||||
|
||||
.row .column.column-40 {
|
||||
flex: 0 0 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.row .column.column-50 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.row .column.column-60 {
|
||||
flex: 0 0 60%;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.row .column.column-66, .row .column.column-67 {
|
||||
flex: 0 0 66.6666%;
|
||||
max-width: 66.6666%;
|
||||
}
|
||||
|
||||
.row .column.column-75 {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.row .column.column-80 {
|
||||
flex: 0 0 80%;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.row .column.column-90 {
|
||||
flex: 0 0 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.row .column .column-top {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.row .column .column-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.row .column .column-center {
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.row {
|
||||
flex-direction: row;
|
||||
margin-left: -1.0rem;
|
||||
width: calc(100% + 2.0rem);
|
||||
}
|
||||
.row .column {
|
||||
margin-bottom: inherit;
|
||||
padding: 0 1.0rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9b4dca;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus, a:hover {
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul dl,
|
||||
ul ol,
|
||||
ul ul {
|
||||
font-size: 90%;
|
||||
margin: 1.5rem 0 1.5rem 3.0rem;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: circle inside;
|
||||
}
|
||||
|
||||
.button,
|
||||
button,
|
||||
dd,
|
||||
dt,
|
||||
li {
|
||||
margin-bottom: 1.0rem;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 0.1rem solid #e1e1e1;
|
||||
padding: 1.2rem 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
letter-spacing: -.1rem;
|
||||
margin-bottom: 2.0rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.6rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.8rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.2rem;
|
||||
letter-spacing: -.08rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: -.05rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.6rem;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=milligram.css.map */
|
||||
1
dist/milligram.css.map
vendored
1
dist/milligram.css.map
vendored
File diff suppressed because one or more lines are too long
3
dist/milligram.min.css
vendored
3
dist/milligram.min.css
vendored
File diff suppressed because one or more lines are too long
1
dist/milligram.min.css.map
vendored
1
dist/milligram.min.css.map
vendored
File diff suppressed because one or more lines are too long
309
example.html
Normal file
309
example.html
Normal file
@ -0,0 +1,309 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="author" content="CJ Patoilo" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code."
|
||||
/>
|
||||
<title>Milligram | A minimalist CSS framework.</title>
|
||||
<link rel="icon" href="https://milligram.io/images/icon.png" />
|
||||
<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/8.0.1/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="#code" title="Code">Code</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">
|
||||
<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/#code" title="Code">Code</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>
|
||||
|
||||
<section class="container" id="contributing">
|
||||
<h5 class="title">Contributing</h5>
|
||||
<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://twitter.com/cjpatoilo"
|
||||
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>
|
||||
@ -1,110 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="CJ Patoilo">
|
||||
<meta name="description" content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.">
|
||||
<title>Milligram | A minimalist CSS framework.</title>
|
||||
<link rel="icon" href="https://milligram.io/images/icon.png">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
|
||||
<link rel="stylesheet" href="../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>
|
||||
|
||||
<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="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>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="container" id="contributing">
|
||||
<h5 class="title">Contributing</h5>
|
||||
<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>
|
||||
13049
package-lock.json
generated
Normal file
13049
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
10
package.js
10
package.js
@ -1,14 +1,12 @@
|
||||
Package.describe({
|
||||
name: 'milligram:milligram',
|
||||
version: '1.3.0',
|
||||
version: '1.4.0',
|
||||
summary: 'A minimalist CSS framework.',
|
||||
git: 'https://github.com/milligram/milligram.git',
|
||||
documentation: 'readme.md'
|
||||
documentation: 'readme.md',
|
||||
})
|
||||
|
||||
Package.onUse((api) => {
|
||||
Package.onUse(api => {
|
||||
api.versionsFrom('METEOR@1.0')
|
||||
api.addFiles([
|
||||
'dist/milligram.css'
|
||||
], 'client')
|
||||
api.addFiles(['dist/milligram.css'], 'client')
|
||||
})
|
||||
|
||||
93
package.json
93
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "milligram",
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.0",
|
||||
"description": "A minimalist CSS framework.",
|
||||
"homepage": "https://milligram.io",
|
||||
"repository": "milligram/milligram",
|
||||
@ -27,65 +27,58 @@
|
||||
"scss",
|
||||
"stylus"
|
||||
],
|
||||
"ignore": [
|
||||
".appveyor.yml",
|
||||
".editorconfig",
|
||||
".eslintrc",
|
||||
".github",
|
||||
".gitignore",
|
||||
".sasslintrc",
|
||||
".travis.yml",
|
||||
"backstop.conf.js",
|
||||
"bower.json",
|
||||
"changelog.md",
|
||||
"composer.json",
|
||||
"package.js",
|
||||
"package.json",
|
||||
"src",
|
||||
"test"
|
||||
],
|
||||
"dependencies": {
|
||||
"normalize.css": "~5.0.0"
|
||||
"normalize.css": "~8.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.5.4",
|
||||
"ava": "^0.17.0",
|
||||
"backstopjs": "^2.3.5",
|
||||
"banner-cli": "^0.9.2",
|
||||
"autoprefixer": "^9.6.1",
|
||||
"ava": "^3.8.2",
|
||||
"backstopjs": "3.8.8",
|
||||
"banner-cli": "^0.14.1",
|
||||
"browser-sync": "^2.18.5",
|
||||
"editorconfig-tools": "^0.1.1",
|
||||
"eslint": "^3.14.0",
|
||||
"eslint-config-styled": "^0.0.0",
|
||||
"husky": "^0.11.9",
|
||||
"node-sass": "^4.9.0",
|
||||
"npm-run-all": "^2.3.0",
|
||||
"nyc": "^10.0.0",
|
||||
"onchange": "^2.5.0",
|
||||
"postcss-cli": "^2.6.0",
|
||||
"rimraf": "^2.5.4",
|
||||
"husky": "^4.2.5",
|
||||
"lint-staged": "^10.2.7",
|
||||
"node-sass": "^4.12.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"nyc": "^15.1.0",
|
||||
"onchange": "^7.0.2",
|
||||
"postcss-cli": "^7.1.1",
|
||||
"prettier-standard": "^16.3.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass-lint": "^1.12.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "run-p build watch serve",
|
||||
"build": "run-s clean sass autoprefixer banner",
|
||||
"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",
|
||||
"autoprefixer": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"last 1 versions\" -r dist/*.css",
|
||||
"banner": "banner-cli dist/*.css",
|
||||
"watch": "onchange src -- run-p build",
|
||||
"build": "rimraf dist && run-s sass autoprefixer banner",
|
||||
"lint": "prettier-standard --check && sass-lint --verbose --no-exit",
|
||||
"prepublishOnly": "npm run build",
|
||||
"sass": "node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css",
|
||||
"serve": "browser-sync start --no-notify -s test --ss dist -f dist",
|
||||
"backstop": "run-s build && run-p serve compare",
|
||||
"reference": "backstop reference --configPath=backstop.conf.js",
|
||||
"compare": "backstop test --configPath=backstop.conf.js",
|
||||
"lint": "sass-lint -c .sasslintrc src --verbose --no-exit && eslint test -c styled && editorconfig-tools check .",
|
||||
"ava": "nyc ava",
|
||||
"test": "run-s build lint ava",
|
||||
"precommit": "run-p test"
|
||||
"start": "run-p build watch serve",
|
||||
"test": "npm run build && nyc ava",
|
||||
"visual-regression": "run-p serve visual-regression:compare",
|
||||
"visual-regression:compare": "run-s build && backstop test --config backstop.config.js",
|
||||
"visual-regression:reference": "run-s build && backstop reference --config backstop.config.js",
|
||||
"watch": "onchange src -- run-p build"
|
||||
},
|
||||
"resolutions": {
|
||||
"natives": "1.1.3"
|
||||
"engines": {
|
||||
"node": "^12.17.0",
|
||||
"npm": "^6.14.5"
|
||||
},
|
||||
"prettier": {
|
||||
"jsxSingleQuote": false,
|
||||
"trailingComma": "all"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"**/*": [
|
||||
"prettier-standard --format",
|
||||
"git add"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
13
readme.md
13
readme.md
@ -1,8 +1,7 @@
|
||||
<a align="center" href="https://milligram.io"><img width="100%" src="https://milligram.io/images/thumbnail.png" alt="Milligram - A minimalist CSS framework"></a>
|
||||
<a align="center" href="https://milligram.io"><img width="100%" src="https://milligram.io/images/thumbnail.png" alt="Milligram - A minimalist CSS framework."></a>
|
||||
|
||||
> A minimalist CSS framework.
|
||||
|
||||
[](https://gitpod.io/from-referrer/)
|
||||
[](https://travis-ci.org/milligram/milligram?branch=master)
|
||||
[](https://ci.appveyor.com/project/cjpatoilo/milligram)
|
||||
[](https://www.codacy.com/app/milligram/milligram/dashboard)
|
||||
@ -10,13 +9,12 @@
|
||||
[](https://www.npmjs.com/package/milligram)
|
||||
[](https://www.npmjs.com/package/milligram)
|
||||
[](https://gitter.im/milligram/milligram)
|
||||
|
||||
[](https://gitpod.io/from-referrer/)
|
||||
|
||||
## 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!
|
||||
|
||||
|
||||
## Download
|
||||
|
||||
**Install with Bower**
|
||||
@ -37,7 +35,6 @@ $ npm install milligram
|
||||
$ yarn add milligram
|
||||
```
|
||||
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Getting Started](https://milligram.io/#getting-started)
|
||||
@ -48,17 +45,15 @@ $ yarn add milligram
|
||||
- [Forms](https://milligram.io/#forms)
|
||||
- [Tables](https://milligram.io/#tables)
|
||||
- [Grids](https://milligram.io/#grids)
|
||||
- [Codes](https://milligram.io/#codes)
|
||||
- [Code](https://milligram.io/#code)
|
||||
- [Utilities](https://milligram.io/#utilities)
|
||||
- [Tips](https://milligram.io/#tips)
|
||||
- [Browser Support](https://milligram.io/#browser-support)
|
||||
- [Examples](https://milligram.io/#examples)
|
||||
|
||||
|
||||
## 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/contribute).
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@ -2,30 +2,30 @@
|
||||
// Form
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
input[type='color'],
|
||||
input[type='date'],
|
||||
input[type='datetime'],
|
||||
input[type='datetime-local'],
|
||||
input[type='email'],
|
||||
input[type='month'],
|
||||
input[type='number'],
|
||||
input[type='password'],
|
||||
input[type='search'],
|
||||
input[type='tel'],
|
||||
input[type='text'],
|
||||
input[type='url'],
|
||||
input[type='color'],
|
||||
input[type='date'],
|
||||
input[type='month'],
|
||||
input[type='week'],
|
||||
input[type='datetime'],
|
||||
input[type='datetime-local'],
|
||||
input:not([type]),
|
||||
textarea,
|
||||
select
|
||||
appearance: none // Removes awkward default styles on some inputs for iOS
|
||||
-webkit-appearance: none // sass-lint:disable-line no-vendor-prefixes
|
||||
background-color: transparent
|
||||
border: .1rem solid $color-quaternary
|
||||
border-radius: .4rem
|
||||
box-shadow: none
|
||||
box-sizing: inherit // Forced to replace inherit values of the normalize.css
|
||||
height: 3.8rem
|
||||
padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit
|
||||
padding: .6rem 1.0rem .7rem // This vertically centers text on FF, ignored by Webkit
|
||||
width: 100%
|
||||
|
||||
&:focus
|
||||
@ -39,6 +39,10 @@ select
|
||||
&:focus
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23' + str-slice(inspect($color-primary), 2) + '" d="M0,0l6,8l6-8"/></svg>')
|
||||
|
||||
&[multiple]
|
||||
background: none
|
||||
height: auto
|
||||
|
||||
textarea
|
||||
min-height: 6.5rem
|
||||
|
||||
@ -61,7 +65,3 @@ input[type='radio']
|
||||
display: inline-block
|
||||
font-weight: normal
|
||||
margin-left: .5rem
|
||||
|
||||
select[multiple]
|
||||
height: auto
|
||||
background: none
|
||||
|
||||
@ -4,13 +4,15 @@
|
||||
|
||||
table
|
||||
border-spacing: 0
|
||||
display: block
|
||||
overflow-x: auto
|
||||
text-align: left
|
||||
width: 100%
|
||||
|
||||
td,
|
||||
th
|
||||
border-bottom: .1rem solid $color-quinary
|
||||
padding: 1.2rem 1.5rem
|
||||
text-align: left
|
||||
|
||||
&:first-child
|
||||
padding-left: 0
|
||||
@ -18,42 +20,8 @@ th
|
||||
&:last-child
|
||||
padding-right: 0
|
||||
|
||||
@media screen and (max-width: 40.0rem)
|
||||
@media (min-width: 40.0rem)
|
||||
|
||||
table
|
||||
border-spacing: 0
|
||||
display: flex
|
||||
width: 100%
|
||||
|
||||
thead
|
||||
border-right: solid .1rem $color-quinary
|
||||
|
||||
td,
|
||||
th
|
||||
padding-left: 0
|
||||
|
||||
&:first-child
|
||||
padding-left: 0
|
||||
|
||||
&:last-child
|
||||
padding-right: 1.2rem
|
||||
|
||||
tbody
|
||||
display: flex
|
||||
overflow-x: auto
|
||||
white-space: nowrap
|
||||
|
||||
tr
|
||||
border-right: solid .1rem $color-quinary
|
||||
|
||||
&:last-child
|
||||
border-right: none
|
||||
|
||||
td,
|
||||
th
|
||||
display: block
|
||||
|
||||
&:first-child
|
||||
padding-left: 1.2rem
|
||||
|
||||
&:last-child
|
||||
padding-right: 1.2rem
|
||||
display: table
|
||||
overflow-x: initial
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
|
||||
// Sass Modules
|
||||
// Modules
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
@import Color
|
||||
@import Base
|
||||
@import Blockquote
|
||||
@import Button
|
||||
@import Code
|
||||
@import Divider
|
||||
@import Form
|
||||
@import Grid
|
||||
@import Link
|
||||
@import List
|
||||
@import Spacing
|
||||
@import Table
|
||||
@import Typography
|
||||
@import Image
|
||||
@import Utility
|
||||
@import _Color
|
||||
@import _Base
|
||||
@import _Blockquote
|
||||
@import _Button
|
||||
@import _Code
|
||||
@import _Divider
|
||||
@import _Form
|
||||
@import _Grid
|
||||
@import _Link
|
||||
@import _List
|
||||
@import _Spacing
|
||||
@import _Table
|
||||
@import _Typography
|
||||
@import _Image
|
||||
@import _Utility
|
||||
|
||||
680
test/index.html
680
test/index.html
@ -1,42 +1,91 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="CJ Patoilo">
|
||||
<meta name="description" content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="author" content="CJ Patoilo" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code."
|
||||
/>
|
||||
<title>Milligram | A minimalist CSS framework.</title>
|
||||
<link rel="icon" href="https://milligram.io/images/icon.png">
|
||||
<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/5.0.0/normalize.css">
|
||||
<link rel="stylesheet" href="milligram.min.css"><!-- to generate this style run `$ npm start` -->
|
||||
<link rel="stylesheet" href="https://milligram.io/styles/main.css">
|
||||
<link rel="icon" href="https://milligram.io/images/icon.png" />
|
||||
<link rel="stylesheet" href="https://milligram.io/styles/main.css" />
|
||||
<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/8.0.1/normalize.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="milligram.min.css" />
|
||||
<!-- to generate this style run `$ npm start` -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main class="wrapper">
|
||||
|
||||
<section class="container" id="image">
|
||||
<img src="https://milligram.io/images/thumbnail.png" alt="Milligram | A minimalist CSS framework.">
|
||||
<img
|
||||
src="https://milligram.io/images/thumbnail.png"
|
||||
alt="Milligram | A minimalist CSS framework."
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="container" id="typography">
|
||||
<h5 class="title">Typography</h5>
|
||||
<hr>
|
||||
<hr />
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h1>Heading<span class="heading-font-size"> <code><h1></code> 4.6rem (46px)</span></h1>
|
||||
<h2>Heading<span class="heading-font-size"> <code><h2></code> 3.6rem (36px)</span></h2>
|
||||
<h3>Heading<span class="heading-font-size"> <code><h3></code> 2.8rem (28px)</span></h3>
|
||||
<h4>Heading<span class="heading-font-size"> <code><h4></code> 2.2rem (22px)</span></h4>
|
||||
<h5>Heading<span class="heading-font-size"> <code><h5></code> 1.8rem (18px)</span></h5>
|
||||
<h6>Heading<span class="heading-font-size"> <code><h6></code> 1.6rem (16px)</span></h6>
|
||||
<h1>
|
||||
Heading<span class="heading-font-size">
|
||||
<code><h1></code> 4.6rem (46px)</span
|
||||
>
|
||||
</h1>
|
||||
<h2>
|
||||
Heading<span class="heading-font-size">
|
||||
<code><h2></code> 3.6rem (36px)</span
|
||||
>
|
||||
</h2>
|
||||
<h3>
|
||||
Heading<span class="heading-font-size">
|
||||
<code><h3></code> 2.8rem (28px)</span
|
||||
>
|
||||
</h3>
|
||||
<h4>
|
||||
Heading<span class="heading-font-size">
|
||||
<code><h4></code> 2.2rem (22px)</span
|
||||
>
|
||||
</h4>
|
||||
<h5>
|
||||
Heading<span class="heading-font-size">
|
||||
<code><h5></code> 1.8rem (18px)</span
|
||||
>
|
||||
</h5>
|
||||
<h6>
|
||||
Heading<span class="heading-font-size">
|
||||
<code><h6></code> 1.6rem (16px)</span
|
||||
>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.</p>
|
||||
<p>Obcaecati <s>error</s> a, quas fugit hic, <a href="#">accusantium</a> autem <i>necessitatibus praesentium</i> placeat, iusto et <b>soluta expedita</b>! Quisquam repellendus <small>voluptatem</small>, <mark>tempora iste culpa fuga</mark>, <time>on April 29</time>!</p>
|
||||
<p>Quisquam nobis, ad. Iusto, <strong>repudiandae</strong>. Autem ipsa blanditiis, quae, fugit nobis <em>perspiciatis in beatae vitae</em> numquam illo, architecto hic dolor <q>molestiae aliquid</q>.</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.
|
||||
</p>
|
||||
<p>
|
||||
Obcaecati <s>error</s> a, quas fugit hic,
|
||||
<a href="#">accusantium</a> autem
|
||||
<i>necessitatibus praesentium</i> placeat, iusto et
|
||||
<b>soluta expedita</b>! Quisquam repellendus
|
||||
<small>voluptatem</small>, <mark>tempora iste culpa fuga</mark>,
|
||||
<time>on April 29</time>!
|
||||
</p>
|
||||
<p>
|
||||
Quisquam nobis, ad. Iusto, <strong>repudiandae</strong>. Autem
|
||||
ipsa blanditiis, quae, fugit nobis
|
||||
<em>perspiciatis in beatae vitae</em> numquam illo, architecto
|
||||
hic dolor <q>molestiae aliquid</q>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,7 +93,7 @@
|
||||
|
||||
<section class="container" id="blockquotes">
|
||||
<h5 class="title">Blockquotes</h5>
|
||||
<hr>
|
||||
<hr />
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
@ -61,50 +110,134 @@
|
||||
|
||||
<section class="container" id="buttons">
|
||||
<h5 class="title">Buttons</h5>
|
||||
<hr>
|
||||
<hr />
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<a class="button" href="javascript: void(0)">Default Button</a>
|
||||
<a class="button button-outline" href="javascript: void(0)">Outlined Button</a>
|
||||
<a class="button button-clear" href="javascript: void(0)">Clear Button</a>
|
||||
<a class="button" disabled href="javascript: void(0)">Default Button</a>
|
||||
<a class="button button-outline" disabled href="javascript: void(0)">Outlined Button</a>
|
||||
<a class="button button-clear" disabled href="javascript: void(0)">Clear Button</a>
|
||||
<a class="button button-outline" href="javascript: void(0)"
|
||||
>Outlined Button</a
|
||||
>
|
||||
<a class="button button-clear" href="javascript: void(0)"
|
||||
>Clear Button</a
|
||||
>
|
||||
<a class="button" disabled href="javascript: void(0)"
|
||||
>Default Button</a
|
||||
>
|
||||
<a
|
||||
class="button button-outline"
|
||||
disabled
|
||||
href="javascript: void(0)"
|
||||
>Outlined Button</a
|
||||
>
|
||||
<a class="button button-clear" disabled href="javascript: void(0)"
|
||||
>Clear Button</a
|
||||
>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button class="button">Default Button</button>
|
||||
<button class="button button-outline">Outlined Button</button>
|
||||
<button class="button button-clear">Clear Button</button>
|
||||
<button class="button" disabled>Default Button</button>
|
||||
<button class="button button-outline" disabled>Outlined Button</button>
|
||||
<button class="button button-outline" disabled>
|
||||
Outlined Button
|
||||
</button>
|
||||
<button class="button button-clear" disabled>Clear Button</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<input class="button" type="submit" value="Default Button">
|
||||
<input class="button button-outline" type="submit" value="Outlined Button">
|
||||
<input class="button button-clear" type="submit" value="Clear Button">
|
||||
<input class="button" disabled type="submit" value="Default Button">
|
||||
<input class="button button-outline" disabled type="submit" value="Outlined Button">
|
||||
<input class="button button-clear" disabled type="submit" value="Clear Button">
|
||||
<input class="button" type="submit" value="Default Button" />
|
||||
<input
|
||||
class="button button-outline"
|
||||
type="submit"
|
||||
value="Outlined Button"
|
||||
/>
|
||||
<input
|
||||
class="button button-clear"
|
||||
type="submit"
|
||||
value="Clear Button"
|
||||
/>
|
||||
<input
|
||||
class="button"
|
||||
disabled
|
||||
type="submit"
|
||||
value="Default Button"
|
||||
/>
|
||||
<input
|
||||
class="button button-outline"
|
||||
disabled
|
||||
type="submit"
|
||||
value="Outlined Button"
|
||||
/>
|
||||
<input
|
||||
class="button button-clear"
|
||||
disabled
|
||||
type="submit"
|
||||
value="Clear Button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<input class="button" type="reset" value="Default Button">
|
||||
<input class="button button-outline" type="reset" value="Outlined Button">
|
||||
<input class="button button-clear" type="reset" value="Clear Button">
|
||||
<input class="button" disabled type="reset" value="Default Button">
|
||||
<input class="button button-outline" disabled type="reset" value="Outlined Button">
|
||||
<input class="button button-clear" disabled type="reset" value="Clear Button">
|
||||
<input class="button" type="reset" value="Default Button" />
|
||||
<input
|
||||
class="button button-outline"
|
||||
type="reset"
|
||||
value="Outlined Button"
|
||||
/>
|
||||
<input
|
||||
class="button button-clear"
|
||||
type="reset"
|
||||
value="Clear Button"
|
||||
/>
|
||||
<input
|
||||
class="button"
|
||||
disabled
|
||||
type="reset"
|
||||
value="Default Button"
|
||||
/>
|
||||
<input
|
||||
class="button button-outline"
|
||||
disabled
|
||||
type="reset"
|
||||
value="Outlined Button"
|
||||
/>
|
||||
<input
|
||||
class="button button-clear"
|
||||
disabled
|
||||
type="reset"
|
||||
value="Clear Button"
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<input class="button" type="button" value="Default Button">
|
||||
<input class="button button-outline" type="button" value="Outlined Button">
|
||||
<input class="button button-clear" type="button" value="Clear Button">
|
||||
<input class="button" disabled type="button" value="Default Button">
|
||||
<input class="button button-outline" disabled type="button" value="Outlined Button">
|
||||
<input class="button button-clear" disabled type="button" value="Clear Button">
|
||||
<input class="button" type="button" value="Default Button" />
|
||||
<input
|
||||
class="button button-outline"
|
||||
type="button"
|
||||
value="Outlined Button"
|
||||
/>
|
||||
<input
|
||||
class="button button-clear"
|
||||
type="button"
|
||||
value="Clear Button"
|
||||
/>
|
||||
<input
|
||||
class="button"
|
||||
disabled
|
||||
type="button"
|
||||
value="Default Button"
|
||||
/>
|
||||
<input
|
||||
class="button button-outline"
|
||||
disabled
|
||||
type="button"
|
||||
value="Outlined Button"
|
||||
/>
|
||||
<input
|
||||
class="button button-clear"
|
||||
disabled
|
||||
type="button"
|
||||
value="Clear Button"
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="button">Default Button</div>
|
||||
@ -120,14 +253,15 @@
|
||||
|
||||
<section class="container" id="lists">
|
||||
<h5 class="title">Lists</h5>
|
||||
<hr>
|
||||
<hr />
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<ul>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 2</li>
|
||||
<li>Unordered list item 3
|
||||
<li>
|
||||
Unordered list item 3
|
||||
<ul>
|
||||
<li>Unordered list item 3.1</li>
|
||||
<li>Unordered list item 3.2</li>
|
||||
@ -142,7 +276,8 @@
|
||||
<ol>
|
||||
<li>Ordered list item 1</li>
|
||||
<li>Ordered list item 2</li>
|
||||
<li>Ordered list item 3
|
||||
<li>
|
||||
Ordered list item 3
|
||||
<ol>
|
||||
<li>Ordered list item 3.1</li>
|
||||
<li>Ordered list item 3.2</li>
|
||||
@ -171,7 +306,7 @@
|
||||
|
||||
<section class="container" id="forms">
|
||||
<h5 class="title">Forms</h5>
|
||||
<hr>
|
||||
<hr />
|
||||
<div class="example">
|
||||
<form>
|
||||
<fieldset>
|
||||
@ -179,13 +314,25 @@
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<label for="textField">Text field</label>
|
||||
<input type="text" placeholder="Text field" id="textField">
|
||||
<input type="text" placeholder="Text field" id="textField" />
|
||||
<label for="emailField">Email field</label>
|
||||
<input type="email" id="emailField" placeholder="Email field">
|
||||
<input
|
||||
type="email"
|
||||
id="emailField"
|
||||
placeholder="Email field"
|
||||
/>
|
||||
<label for="numberField">Number field</label>
|
||||
<input type="number" id="numberField" placeholder="Number field">
|
||||
<input
|
||||
type="number"
|
||||
id="numberField"
|
||||
placeholder="Number field"
|
||||
/>
|
||||
<label for="passwordField">Password field</label>
|
||||
<input type="password" id="passwordField" placeholder="Password field">
|
||||
<input
|
||||
type="password"
|
||||
id="passwordField"
|
||||
placeholder="Password field"
|
||||
/>
|
||||
<label for="selectField">Select field</label>
|
||||
<select id="selectField">
|
||||
<option value="selectField1">Select field 1</option>
|
||||
@ -194,51 +341,91 @@
|
||||
<option value="selectField4">Select field 4</option>
|
||||
</select>
|
||||
<label for="colorField">Color field</label>
|
||||
<input type="color" id="colorField" placeholder="Your browser doesn't support this field.">
|
||||
<input
|
||||
type="color"
|
||||
id="colorField"
|
||||
placeholder="Your browser doesn't support this field."
|
||||
/>
|
||||
<label for="weekField">Week field</label>
|
||||
<input type="week" id="weekField" placeholder="Your browser doesn't support this field.">
|
||||
<input
|
||||
type="week"
|
||||
id="weekField"
|
||||
placeholder="Your browser doesn't support this field."
|
||||
/>
|
||||
<label for="datetimeField">Datetime field</label>
|
||||
<input type="datetime" id="datetimeField" placeholder="Your browser doesn't support this field.">
|
||||
<input
|
||||
type="datetime"
|
||||
id="datetimeField"
|
||||
placeholder="Your browser doesn't support this field."
|
||||
/>
|
||||
<label for="searchField">Search field</label>
|
||||
<input type="search" id="searchField" placeholder="Search field">
|
||||
<input
|
||||
type="search"
|
||||
id="searchField"
|
||||
placeholder="Search field"
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<label for="telField">Tel field</label>
|
||||
<input type="tel" id="telField" placeholder="Tel field">
|
||||
<input type="tel" id="telField" placeholder="Tel field" />
|
||||
<label for="urlField">URL field</label>
|
||||
<input type="url" id="urlField" placeholder="URL field">
|
||||
<input type="url" id="urlField" placeholder="URL field" />
|
||||
<label for="radioField">Radio field</label>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<input type="radio" id="radioField1" name="radioField">
|
||||
<label class="label-inline" for="radioField1">Radio field 1</label>
|
||||
<input type="radio" id="radioField1" name="radioField" />
|
||||
<label class="label-inline" for="radioField1"
|
||||
>Radio field 1</label
|
||||
>
|
||||
</div>
|
||||
<div class="column">
|
||||
<input type="radio" id="radioField2" name="radioField">
|
||||
<label class="label-inline" for="radioField2">Radio field 2</label>
|
||||
<input type="radio" id="radioField2" name="radioField" />
|
||||
<label class="label-inline" for="radioField2"
|
||||
>Radio field 2</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<label for="radioField">Checkbox field</label>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<input type="checkbox" id="checkboxField1">
|
||||
<label class="label-inline" for="checkboxField1">Checkbox field 1</label>
|
||||
<input type="checkbox" id="checkboxField1" />
|
||||
<label class="label-inline" for="checkboxField1"
|
||||
>Checkbox field 1</label
|
||||
>
|
||||
</div>
|
||||
<div class="column">
|
||||
<input type="checkbox" id="checkboxField2">
|
||||
<label class="label-inline" for="checkboxField2">Checkbox field 2</label>
|
||||
<input type="checkbox" id="checkboxField2" />
|
||||
<label class="label-inline" for="checkboxField2"
|
||||
>Checkbox field 2</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<label for="textareaField">Textarea field</label>
|
||||
<textarea placeholder="Textarea field" id="textareaField"></textarea>
|
||||
<textarea
|
||||
placeholder="Textarea field"
|
||||
id="textareaField"
|
||||
></textarea>
|
||||
<label for="dateField">Date field</label>
|
||||
<input type="date" id="dateField" placeholder="Your browser doesn't support this field.">
|
||||
<input
|
||||
type="date"
|
||||
id="dateField"
|
||||
placeholder="Your browser doesn't support this field."
|
||||
/>
|
||||
<label for="monthField">Month field</label>
|
||||
<input type="month" id="monthField" placeholder="Your browser doesn't support this field.">
|
||||
<input
|
||||
type="month"
|
||||
id="monthField"
|
||||
placeholder="Your browser doesn't support this field."
|
||||
/>
|
||||
<label for="datetimeLocalField">Datetime-Local field</label>
|
||||
<input type="datetime-local" id="datetimeLocalField" placeholder="Your browser doesn't support this field.">
|
||||
<input type="submit">
|
||||
<input type="reset" class="button-clear">
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="datetimeLocalField"
|
||||
placeholder="Your browser doesn't support this field."
|
||||
/>
|
||||
<label for="formButtons">Form buttons</label>
|
||||
<input type="submit" />
|
||||
<input type="reset" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
@ -248,59 +435,60 @@
|
||||
|
||||
<section class="container" id="tables">
|
||||
<h5 class="title">Tables</h5>
|
||||
<hr>
|
||||
<hr />
|
||||
<div class="example">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
<th>Position</th>
|
||||
<th>Height</th>
|
||||
<th>Born</th>
|
||||
<th>Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Kevin Durant</td>
|
||||
<td>27</td>
|
||||
<td>2.06</td>
|
||||
<td> Washington, DC</td>
|
||||
<td>Steve Kerr</td>
|
||||
<td>Coach</td>
|
||||
<td>1,91</td>
|
||||
<td>September 27, 1965</td>
|
||||
<td>Beirut, Lebanon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Stephen Curry</td>
|
||||
<td>27</td>
|
||||
<td>Point Guard</td>
|
||||
<td>1,91</td>
|
||||
<td>March 14, 1988</td>
|
||||
<td>Akron, OH</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Klay Thompson</td>
|
||||
<td>25</td>
|
||||
<td>Small Forward</td>
|
||||
<td>2,01</td>
|
||||
<td>February 8, 1990</td>
|
||||
<td>Los Angeles, CA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Draymond Green</td>
|
||||
<td>26</td>
|
||||
<td>Power Forward</td>
|
||||
<td>2,01</td>
|
||||
<td>March 4, 1990</td>
|
||||
<td>Saginaw, MI</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Andre Iguodala</td>
|
||||
<td>32</td>
|
||||
<td>Small Forward and Shooting Guard</td>
|
||||
<td>1,98</td>
|
||||
<td>January 28, 1984</td>
|
||||
<td>Springfield, IL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anderson Varejão</td>
|
||||
<td>33</td>
|
||||
<td>2,08</td>
|
||||
<td>Colatina, ES</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shaun Livingston</td>
|
||||
<td>30</td>
|
||||
<td>Point Guard and Shooting Guard</td>
|
||||
<td>2,01</td>
|
||||
<td>Peoria, CA</td>
|
||||
<td>September 11, 1985</td>
|
||||
<td>Peoria, IL</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -309,100 +497,166 @@
|
||||
|
||||
<section class="container" id="grids">
|
||||
<h5 class="title">Grids</h5>
|
||||
<hr>
|
||||
<hr />
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="column"><span class="column-demo">100%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-10"><span class="column-demo">10%</span></div>
|
||||
<div class="column column-90"><span class="column-demo">90%</span></div>
|
||||
<div class="column column-10">
|
||||
<span class="column-demo">10%</span>
|
||||
</div>
|
||||
<div class="column column-90">
|
||||
<span class="column-demo">90%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-20"><span class="column-demo">20%</span></div>
|
||||
<div class="column column-80"><span class="column-demo">80%</span></div>
|
||||
<div class="column column-20">
|
||||
<span class="column-demo">20%</span>
|
||||
</div>
|
||||
<div class="column column-80">
|
||||
<span class="column-demo">80%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-75"><span class="column-demo">75%</span></div>
|
||||
<div class="column column-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
<div class="column column-75">
|
||||
<span class="column-demo">75%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-33"><span class="column-demo">33%</span></div>
|
||||
<div class="column column-67"><span class="column-demo">67%</span></div>
|
||||
<div class="column column-33">
|
||||
<span class="column-demo">33%</span>
|
||||
</div>
|
||||
<div class="column column-67">
|
||||
<span class="column-demo">67%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-40"><span class="column-demo">40%</span></div>
|
||||
<div class="column column-60"><span class="column-demo">60%</span></div>
|
||||
<div class="column column-40">
|
||||
<span class="column-demo">40%</span>
|
||||
</div>
|
||||
<div class="column column-60">
|
||||
<span class="column-demo">60%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-50"><span class="column-demo">50%</span></div>
|
||||
<div class="column column-50"><span class="column-demo">50%</span></div>
|
||||
<div class="column column-50">
|
||||
<span class="column-demo">50%</span>
|
||||
</div>
|
||||
<div class="column column-50">
|
||||
<span class="column-demo">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-60"><span class="column-demo">60%</span></div>
|
||||
<div class="column column-40"><span class="column-demo">40%</span></div>
|
||||
<div class="column column-60">
|
||||
<span class="column-demo">60%</span>
|
||||
</div>
|
||||
<div class="column column-40">
|
||||
<span class="column-demo">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-67"><span class="column-demo">67%</span></div>
|
||||
<div class="column column-33"><span class="column-demo">33%</span></div>
|
||||
<div class="column column-67">
|
||||
<span class="column-demo">67%</span>
|
||||
</div>
|
||||
<div class="column column-33">
|
||||
<span class="column-demo">33%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-75"><span class="column-demo">75%</span></div>
|
||||
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-75">
|
||||
<span class="column-demo">75%</span>
|
||||
</div>
|
||||
<div class="column column-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-80"><span class="column-demo">80%</span></div>
|
||||
<div class="column column-20"><span class="column-demo">20%</span></div>
|
||||
<div class="column column-80">
|
||||
<span class="column-demo">80%</span>
|
||||
</div>
|
||||
<div class="column column-20">
|
||||
<span class="column-demo">20%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-90"><span class="column-demo">90%</span></div>
|
||||
<div class="column column-10"><span class="column-demo">10%</span></div>
|
||||
<div class="column column-90">
|
||||
<span class="column-demo">90%</span>
|
||||
</div>
|
||||
<div class="column column-10">
|
||||
<span class="column-demo">10%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column"><span class="column-demo">100%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-90"><span class="column-demo">90%</span></div>
|
||||
<div class="column column-90">
|
||||
<span class="column-demo">90%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">10%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-80"><span class="column-demo">80%</span></div>
|
||||
<div class="column column-80">
|
||||
<span class="column-demo">80%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">20%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-75"><span class="column-demo">75%</span></div>
|
||||
<div class="column column-75">
|
||||
<span class="column-demo">75%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">25%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-67"><span class="column-demo">67%</span></div>
|
||||
<div class="column column-67">
|
||||
<span class="column-demo">67%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">33%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-60"><span class="column-demo">60%</span></div>
|
||||
<div class="column column-60">
|
||||
<span class="column-demo">60%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">40%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-50"><span class="column-demo">50%</span></div>
|
||||
<div class="column column-50">
|
||||
<span class="column-demo">50%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">50%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-40"><span class="column-demo">40%</span></div>
|
||||
<div class="column column-40">
|
||||
<span class="column-demo">40%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">60%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-33"><span class="column-demo">33%</span></div>
|
||||
<div class="column column-33">
|
||||
<span class="column-demo">33%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">67%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">75%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-20"><span class="column-demo">20%</span></div>
|
||||
<div class="column column-20">
|
||||
<span class="column-demo">20%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">80%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-10"><span class="column-demo">10%</span></div>
|
||||
<div class="column column-10">
|
||||
<span class="column-demo">10%</span>
|
||||
</div>
|
||||
<div class="column"><span class="column-demo">90%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -508,51 +762,81 @@
|
||||
<div class="column"><span class="column-demo">8.3%</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-50 column-offset-25"><span class="column-demo">50%</span></div>
|
||||
<div class="column column-50 column-offset-25">
|
||||
<span class="column-demo">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-50 column-offset-50"><span class="column-demo">50%</span></div>
|
||||
<div class="column column-50 column-offset-50">
|
||||
<span class="column-demo">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-25 column-offset-75"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25 column-offset-75">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-25 column-offset-50"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25 column-offset-50">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25 column-offset-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25 column-offset-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
<div class="column column-25 column-offset-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25 column-offset-50"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
<div class="column column-25 column-offset-50">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-50 column-offset-25"><span class="column-demo">50%</span></div>
|
||||
<div class="column column-50 column-offset-25">
|
||||
<span class="column-demo">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-50"><span class="column-demo">50%</span></div>
|
||||
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-50">
|
||||
<span class="column-demo">50%</span>
|
||||
</div>
|
||||
<div class="column column-25 column-offset-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25 column-offset-25"><span class="column-demo">25%</span></div>
|
||||
<div class="column column-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
<div class="column column-25 column-offset-25">
|
||||
<span class="column-demo">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column-75 column-offset-25"><span class="column-demo">75%</span></div>
|
||||
<div class="column column-75 column-offset-25">
|
||||
<span class="column-demo">75%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container" id="codes">
|
||||
<h5 class="title">Codes</h5>
|
||||
<hr>
|
||||
<section class="container" id="code">
|
||||
<h5 class="title">Code</h5>
|
||||
<hr />
|
||||
<div class="example">
|
||||
<pre><code>.milligram {
|
||||
<pre><code>.milligram {
|
||||
color: #9b4dca;
|
||||
}</code></pre>
|
||||
</div>
|
||||
@ -560,43 +844,101 @@
|
||||
|
||||
<section class="container" id="utilities">
|
||||
<h5 class="title">Utilities</h5>
|
||||
<hr>
|
||||
<hr />
|
||||
<div class="example">
|
||||
<div class="clearfix">
|
||||
<img class="float-left" src="http://placehold.it/320/d1d1d1/?text=float+to+left" alt="float to left">
|
||||
<img class="float-right" src="http://placehold.it/320/d1d1d1/?text=float+to+right" alt="float to right">
|
||||
<img
|
||||
class="float-left"
|
||||
src="http://placehold.it/320/d1d1d1/?text=float+to+left"
|
||||
alt="float to left"
|
||||
/>
|
||||
<img
|
||||
class="float-right"
|
||||
src="http://placehold.it/320/d1d1d1/?text=float+to+right"
|
||||
alt="float to right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container" id="examples">
|
||||
<h5 class="title">Examples</h5>
|
||||
<hr>
|
||||
<p>
|
||||
<hr />
|
||||
<ul>
|
||||
<li><a href="https://milligram.io/getting-started.html" title="Getting Started">Getting Started</a></li>
|
||||
<li><a href="https://milligram.io/typography.html" title="Typography">Typography</a></li>
|
||||
<li><a href="https://milligram.io/blockquotes.html" title="Blockquotes">Blockquotes</a></li>
|
||||
<li><a href="https://milligram.io/buttons.html" title="Buttons">Buttons</a></li>
|
||||
<li><a href="https://milligram.io/lists.html" title="Lists">Lists</a></li>
|
||||
<li><a href="https://milligram.io/forms.html" title="Forms">Forms</a></li>
|
||||
<li><a href="https://milligram.io/tables.html" title="Tables">Tables</a></li>
|
||||
<li><a href="https://milligram.io/grids.html" title="Grids">Grids</a></li>
|
||||
<li><a href="https://milligram.io/codes.html" title="Codes">Codes</a></li>
|
||||
<li><a href="https://milligram.io/utilities.html" title="Utilities">Utilities</a></li>
|
||||
<li><a href="https://milligram.io/tips.html" title="Tips">Tips</a></li>
|
||||
<li><a href="https://milligram.io/browser-support.html" title="Browser Support">Browser Support</a></li>
|
||||
<li>
|
||||
<a
|
||||
href="https://milligram.io/getting-started.html"
|
||||
title="Getting Started"
|
||||
>Getting Started</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/typography.html" title="Typography"
|
||||
>Typography</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/blockquotes.html" title="Blockquotes"
|
||||
>Blockquotes</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/buttons.html" title="Buttons"
|
||||
>Buttons</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/lists.html" title="Lists">Lists</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/forms.html" title="Forms">Forms</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/tables.html" title="Tables">Tables</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/grids.html" title="Grids">Grids</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/code.html" title="Code">Code</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/utilities.html" title="Utilities"
|
||||
>Utilities</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://milligram.io/tips.html" title="Tips">Tips</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://milligram.io/browser-support.html"
|
||||
title="Browser Support"
|
||||
>Browser Support</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<section class="container">
|
||||
<p>Designed with ♥ by <a target="blank" href="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>
|
||||
<p>
|
||||
Designed with ♥ by
|
||||
<a
|
||||
target="blank"
|
||||
href="https://twitter.com/cjpatoilo"
|
||||
title="CJ Patoilo"
|
||||
>CJ Patoilo</a
|
||||
>. Licensed under the
|
||||
<a
|
||||
target="blank"
|
||||
href="https://github.com/milligram/milligram#license"
|
||||
title="MIT License"
|
||||
>MIT License</a
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
test/regression/1893383643_Buttons_0_buttonsexample_0_phone.png
Normal file
BIN
test/regression/1893383643_Buttons_0_buttonsexample_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
test/regression/1893383643_Buttons_0_buttonsexample_1_laptop.png
Normal file
BIN
test/regression/1893383643_Buttons_0_buttonsexample_1_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
test/regression/1893383643_Code_0_codeexample_0_phone.png
Normal file
BIN
test/regression/1893383643_Code_0_codeexample_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
test/regression/1893383643_Code_0_codeexample_1_laptop.png
Normal file
BIN
test/regression/1893383643_Code_0_codeexample_1_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
test/regression/1893383643_Forms_0_formsexample_0_phone.png
Normal file
BIN
test/regression/1893383643_Forms_0_formsexample_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
test/regression/1893383643_Forms_0_formsexample_1_laptop.png
Normal file
BIN
test/regression/1893383643_Forms_0_formsexample_1_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
test/regression/1893383643_Grids_0_gridsexample_0_phone.png
Normal file
BIN
test/regression/1893383643_Grids_0_gridsexample_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
BIN
test/regression/1893383643_Grids_0_gridsexample_1_laptop.png
Normal file
BIN
test/regression/1893383643_Grids_0_gridsexample_1_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
BIN
test/regression/1893383643_Lists_0_listsexample_0_phone.png
Normal file
BIN
test/regression/1893383643_Lists_0_listsexample_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
test/regression/1893383643_Lists_0_listsexample_1_laptop.png
Normal file
BIN
test/regression/1893383643_Lists_0_listsexample_1_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
test/regression/1893383643_Tables_0_tablesexample_0_phone.png
Normal file
BIN
test/regression/1893383643_Tables_0_tablesexample_0_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
test/regression/1893383643_Tables_0_tablesexample_1_laptop.png
Normal file
BIN
test/regression/1893383643_Tables_0_tablesexample_1_laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
@ -3,17 +3,15 @@ const npm = require('../../package.json')
|
||||
const bower = require('../../bower.json')
|
||||
const composer = require('../../composer.json')
|
||||
|
||||
const packages = [
|
||||
npm,
|
||||
bower,
|
||||
composer
|
||||
]
|
||||
const packages = [npm, bower, composer]
|
||||
|
||||
test(`Name should be equal "${npm.name}"`, t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
packages.map((compareValue, compareIndex) => {
|
||||
if (compareValue.name.match('/')) compareValue.name = compareValue.name.split('/')[1]
|
||||
if (referenceIndex !== compareIndex) t.is(referenceValue.name, compareValue.name)
|
||||
if (compareValue.name.match('/'))
|
||||
compareValue.name = compareValue.name.split('/')[1]
|
||||
if (referenceIndex !== compareIndex)
|
||||
t.is(referenceValue.name, compareValue.name)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -21,7 +19,8 @@ test(`Name should be equal "${npm.name}"`, t => {
|
||||
test(`Version should be equal to "v${npm.version}"`, t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
packages.map((compareValue, compareIndex) => {
|
||||
if (referenceIndex !== compareIndex) t.is(referenceValue.version, compareValue.version)
|
||||
if (referenceIndex !== compareIndex)
|
||||
t.is(referenceValue.version, compareValue.version)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -29,7 +28,8 @@ test(`Version should be equal to "v${npm.version}"`, t => {
|
||||
test(`Description should be equal to "${npm.description}"`, t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
packages.map((compareValue, compareIndex) => {
|
||||
if (referenceIndex !== compareIndex) t.is(referenceValue.description, compareValue.description)
|
||||
if (referenceIndex !== compareIndex)
|
||||
t.is(referenceValue.description, compareValue.description)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -37,7 +37,8 @@ test(`Description should be equal to "${npm.description}"`, t => {
|
||||
test(`Homepage should be equal to "${npm.homepage}"`, t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
packages.map((compareValue, compareIndex) => {
|
||||
if (referenceIndex !== compareIndex) t.is(referenceValue.homepage, compareValue.homepage)
|
||||
if (referenceIndex !== compareIndex)
|
||||
t.is(referenceValue.homepage, compareValue.homepage)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -45,7 +46,8 @@ test(`Homepage should be equal to "${npm.homepage}"`, t => {
|
||||
test(`Repository should be equal to "${npm.repository}"`, t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
packages.map((compareValue, compareIndex) => {
|
||||
if (referenceIndex !== compareIndex) t.is(referenceValue.repository, compareValue.repository)
|
||||
if (referenceIndex !== compareIndex)
|
||||
t.is(referenceValue.repository, compareValue.repository)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -53,7 +55,8 @@ test(`Repository should be equal to "${npm.repository}"`, t => {
|
||||
test(`License should be equal to "${npm.license}"`, t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
packages.map((compareValue, compareIndex) => {
|
||||
if (referenceIndex !== compareIndex) t.is(referenceValue.license, compareValue.license)
|
||||
if (referenceIndex !== compareIndex)
|
||||
t.is(referenceValue.license, compareValue.license)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -61,7 +64,8 @@ test(`License should be equal to "${npm.license}"`, t => {
|
||||
test(`Author Name should be equal to "${npm.author}"`, t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
packages.map((compareValue, compareIndex) => {
|
||||
if (referenceIndex !== compareIndex) t.is(referenceValue.author, compareValue.author)
|
||||
if (referenceIndex !== compareIndex)
|
||||
t.is(referenceValue.author, compareValue.author)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -69,7 +73,8 @@ test(`Author Name should be equal to "${npm.author}"`, t => {
|
||||
test(`Main File should be equal to "${npm.main}"`, t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
packages.map((compareValue, compareIndex) => {
|
||||
if (referenceIndex !== compareIndex) t.is(referenceValue.main, compareValue.main)
|
||||
if (referenceIndex !== compareIndex)
|
||||
t.is(referenceValue.main, compareValue.main)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -77,7 +82,11 @@ test(`Main File should be equal to "${npm.main}"`, t => {
|
||||
test('Ignore should be equal', t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
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),
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -85,8 +94,11 @@ test('Ignore should be equal', t => {
|
||||
test('Keywords should be equal', t => {
|
||||
packages.map((referenceValue, referenceIndex) => {
|
||||
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