├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.css
├── lib
├── background.css
├── border-collapse.css
├── box-sizing.css
├── document-remove-margin-padding.css
└── hidden.css
├── package.json
└── test
├── index.html
└── test.css
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = spaces
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.{md,markdown}]
13 | # Allow
from Markdown
14 | trim_trailing_whitespace = false
15 |
16 | [Makefile]
17 | indent_style = tab
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # 0.5.0 - 2014-12-09
2 |
3 | - Remove need for `.r-Defaults` (cause to much trouble ([ref](https://github.com/cssrecipes/defaults/issues/5)))
4 | - Explode defaults into lib/* so people can just use some pieces
5 |
6 | # 0.4.0 - 2014-11-08
7 |
8 | - Update org prefix to `r`
9 |
10 | # 0.3.0 - 2014-10-16
11 |
12 | - Remove overflow: auto (cause to much trouble with existing css & others libs)
13 |
14 | # 0.2.0 - 2014-07-17
15 |
16 | - * overflow: auto;
17 | - Use html & * inherit for more flexibility
18 | - Minor default background position improvement
19 | - More comments
20 |
21 | # 0.1.0 - 2014-06-18
22 |
23 | Initial release
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Maxime Thirouin
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Defaults
2 |
3 | > Just a few handy default styles for your `` pages
4 |
5 | ## Install
6 |
7 | ```sh
8 | $ npm install cssrecipes-defaults
9 | ```
10 |
11 | ## Usage
12 |
13 | ```css
14 | @import "./node_modules/cssrecipes-defaults/index.css";
15 | ```
16 |
17 | _This library output non scoped CSS (might html, body, etc). Use carefuly._
18 |
19 | ## Credits
20 |
21 | [@DavidBruant's _Better CSS defaults_](https://github.com/DavidBruant/Better-CSS-defaults/)
22 |
23 | ---
24 |
25 | ## Testing
26 |
27 | To generate a build:
28 |
29 | ```sh
30 | $ npm run build
31 | ```
32 |
33 | To generate the testing build.
34 |
35 | ```sh
36 | $ npm run build-test
37 | ```
38 |
39 | Basic visual tests are in `test/index.html`.
40 |
41 | ## Contributing
42 |
43 | Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
44 |
45 | ```sh
46 | $ git clone https://github.com/cssrecipes/defaults.git
47 | $ git checkout -b patch-1
48 | $ npm install
49 | $ npm test
50 | ```
51 |
52 | ## [Changelog](CHANGELOG.md)
53 |
54 | ## [License](LICENSE)
55 |
--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Some defaults are based on inherit
3 | *
4 | * Why inherit ?
5 | * If you have a component and his children not using border-box for example:
6 | *
7 | * Without inherit you might need
8 | * .Component, .Component * { box-sizing: content-box }
9 | *
10 | * With inherit you can just write
11 | * .Component { box-sizing: content-box }
12 | *
13 | * http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
14 | */
15 | @import "lib/background.css";
16 | @import "lib/border-collapse.css";
17 | @import "lib/box-sizing.css";
18 | @import "lib/document-remove-margin-padding.css";
19 | @import "lib/hidden.css";
20 |
--------------------------------------------------------------------------------
/lib/background.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Repeating the background mostly makes sense in the . Otherwise, people
3 | * usually want the image and preferably its center (not the top-right corner)
4 | */
5 | *:not(body) {
6 | background-repeat: no-repeat;
7 | background-position: 50%;
8 | background-size: cover;
9 | }
10 |
--------------------------------------------------------------------------------
/lib/border-collapse.css:
--------------------------------------------------------------------------------
1 | /*
2 | * tables borders like they should be
3 | * applied to * to also works for display: table;
4 | */
5 | html {border-collapse: collapse}
6 | * {border-collapse: inherit}
7 |
--------------------------------------------------------------------------------
/lib/box-sizing.css:
--------------------------------------------------------------------------------
1 | /*
2 | * box model like it should be
3 | *
4 | * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
5 | */
6 | html {box-sizing: border-box}
7 |
8 | *,
9 | *:before,
10 | *:after {
11 | box-sizing: inherit;
12 | }
13 |
--------------------------------------------------------------------------------
/lib/document-remove-margin-padding.css:
--------------------------------------------------------------------------------
1 | /*
2 | * kill document defaults margin & padding. We all do that all the times, right ?
3 | */
4 | html,
5 | body {
6 | margin: 0;
7 | padding: 0;
8 | }
9 |
--------------------------------------------------------------------------------
/lib/hidden.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Makes the hidden attribute works even when an element is styled display: flex
3 | * http://lists.w3.org/Archives/Public/public-whatwg-archive/2014May/0001.html
4 | */
5 | [hidden] {display: none !important}
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cssrecipes-defaults",
3 | "version": "0.5.0",
4 | "description": "Just a few handy default styles for your `` pages",
5 | "keywords": [
6 | "browser",
7 | "style",
8 | "css",
9 | "css-components",
10 | "css-recipes",
11 | "cssrecipes",
12 | "recipes",
13 | "defaults"
14 | ],
15 | "repository": {
16 | "type": "git",
17 | "url": "https://github.com/cssrecipes/defaults.git"
18 | },
19 | "author": "Maxime Thirouin",
20 | "license": "MIT",
21 | "main": "index.css",
22 | "style": "index.css",
23 | "files": [
24 | "CHANGELOG.md",
25 | "LICENSE",
26 | "lib",
27 | "index.css"
28 | ],
29 | "devDependencies": {
30 | "cssnext": "^0.6.0"
31 | },
32 | "scripts": {
33 | "setup": "npm install && mkdir -p build",
34 | "preprocess": "cssnext index.css build/index.css",
35 | "build": "npm run setup && npm run preprocess",
36 | "preprocess-test": "cssnext test/test.css build/test.css",
37 | "build-test": "npm run setup && npm run preprocess-test",
38 | "test": "npm run build-test"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
.todo
6 |
7 |
8 |
9 |
10 |