├── .gitignore
├── package.json
├── CHANGELOG.md
├── process
├── Other_resets
│ ├── 2011_reset.css
│ ├── 2004_undohtml.css
│ ├── 2010_html5doctorreset.css
│ ├── 2012_normalize.css
│ ├── 2017_reboot.scss
│ └── 2015_sanitize.css
├── test
│ ├── styleswitcher.js
│ └── test.html
├── UA_stylesheets
│ ├── _combined
│ │ ├── headlines.css
│ │ └── lists.css
│ ├── firefox.css
│ └── chrome.css
├── draft_description.md
└── exploring
│ └── forms.html
├── css
├── reminders.css
├── remedy.css
└── quotes.css
├── CONTRIBUTING.md
├── README.md
└── LICENSE
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | docs/
3 | node_modules/
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cssremedy",
3 | "version": "0.1.0-beta.2",
4 | "description": "Start your project with a remedy for the technical debt of CSS",
5 | "repository": "mozdevs/cssremedy",
6 | "author": "Mozilla Developer Relations",
7 | "license": "MPL-2.0",
8 | "homepage": "https://github.com/mozdevs/cssremedy/",
9 | "bugs": "https://github.com/mozdevs/cssremedy/issues",
10 | "keywords": [
11 | "css",
12 | "reset",
13 | "default"
14 | ],
15 | "files": [
16 | "css/*.css"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog & Release Notes
2 |
3 | ## UNRELEASED
4 |
5 | - [Remedy] New: Proper display handling for `picture` and `source` elements
6 | - [Remedy] New: Add basic `[hidden]` remedy
7 | to fix unintentional `display` overrides
8 | - [Remedy] Fix: Audio without `[controls]` remains hidden by default
9 |
10 | ## v0.1.0-beta.2 - 9/18/2019
11 |
12 | - [Reminder] Fix: Comment out reminders,
13 | so that authors have to explicitly opt-in
14 | case-by-case.
15 | - [Docs] Add inline documentation comments
16 | (marked with `@docs`)
17 | using [Doxray](https://github.com/himedlooff/doxray)
18 | and YAML format.
19 | - [NPM] Exclude irrelevant files from npm releases
20 |
21 | ## v0.1.0-beta.1 - 9/12/2019
22 |
23 | This is an incomplete set of remedies,
24 | and still very likely to change -
25 | but we have to start somewhere.
26 |
27 | - Move stylsheets into `css/` directory
28 | - Organize the existing proposed & discussed remedies into three categories:
29 | - Universally recommended remedies in `remedy.css`
30 | - Optional remedies worth considering in `reminders.css`
31 | - Specialized remedies (such as `quotes.css`) in their own files
32 |
--------------------------------------------------------------------------------
/process/Other_resets/2011_reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
--------------------------------------------------------------------------------
/process/Other_resets/2004_undohtml.css:
--------------------------------------------------------------------------------
1 | /* undohtml.css */
2 | /* (CC) 2004 Tantek Celik. Some Rights Reserved. */
3 | /* http://creativecommons.org/licenses/by/2.0 */
4 | /* This style sheet is licensed under a Creative Commons License. */
5 | /* Purpose: undo some of the default styling of common (X)HTML browsers */
6 |
7 | /* link underlines tend to make hypertext less readable,
8 | because underlines obscure the shapes of the lower halves of words */
9 | :link,:visited { text-decoration:none }
10 |
11 | /* no list-markers by default, since lists are used more often for semantics */
12 | ul,ol { list-style:none }
13 |
14 | /* avoid browser default inconsistent heading font-sizes */
15 | /* and pre/code too */
16 | h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
17 |
18 | /* remove the inconsistent (among browsers) default ul,ol padding or margin */
19 | /* the default spacing on headings does not match nor align with
20 | normal interline spacing at all, so let's get rid of it. */
21 | /* zero out the spacing around pre, form, body, html, p, blockquote as well */
22 | /* form elements are oddly inconsistent, and not quite CSS emulatable. */
23 | /* nonetheless strip their margin and padding as well */
24 | ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
25 | { margin:0; padding:0 }
26 |
27 | /* whoever thought blue linked image borders were a good idea? */
28 | a img,:link img,:visited img { border:none }
29 |
30 | /* de-italicize address */
31 | address { font-style:normal }
32 |
33 | /* more varnish stripping as necessary... */
--------------------------------------------------------------------------------
/process/test/styleswitcher.js:
--------------------------------------------------------------------------------
1 | function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
--------------------------------------------------------------------------------
/process/Other_resets/2010_html5doctorreset.css:
--------------------------------------------------------------------------------
1 | /*
2 | html5doctor.com Reset Stylesheet
3 | v1.6.1
4 | Last Updated: 2010-09-17
5 | Author: Richard Clark - http://richclarkdesign.com
6 | Twitter: @rich_clark
7 | */
8 |
9 | html, body, div, span, object, iframe,
10 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11 | abbr, address, cite, code,
12 | del, dfn, em, img, ins, kbd, q, samp,
13 | small, strong, sub, sup, var,
14 | b, i,
15 | dl, dt, dd, ol, ul, li,
16 | fieldset, form, label, legend,
17 | table, caption, tbody, tfoot, thead, tr, th, td,
18 | article, aside, canvas, details, figcaption, figure,
19 | footer, header, hgroup, menu, nav, section, summary,
20 | time, mark, audio, video {
21 | margin:0;
22 | padding:0;
23 | border:0;
24 | outline:0;
25 | font-size:100%;
26 | vertical-align:baseline;
27 | background:transparent;
28 | }
29 |
30 | body {
31 | line-height:1;
32 | }
33 |
34 | article,aside,details,figcaption,figure,
35 | footer,header,hgroup,menu,nav,section {
36 | display:block;
37 | }
38 |
39 | nav ul {
40 | list-style:none;
41 | }
42 |
43 | blockquote, q {
44 | quotes:none;
45 | }
46 |
47 | blockquote:before, blockquote:after,
48 | q:before, q:after {
49 | content:'';
50 | content:none;
51 | }
52 |
53 | a {
54 | margin:0;
55 | padding:0;
56 | font-size:100%;
57 | vertical-align:baseline;
58 | background:transparent;
59 | }
60 |
61 | /* change colours to suit your needs */
62 | ins {
63 | background-color:#ff9;
64 | color:#000;
65 | text-decoration:none;
66 | }
67 |
68 | /* change colours to suit your needs */
69 | mark {
70 | background-color:#ff9;
71 | color:#000;
72 | font-style:italic;
73 | font-weight:bold;
74 | }
75 |
76 | del {
77 | text-decoration: line-through;
78 | }
79 |
80 | abbr[title], dfn[title] {
81 | border-bottom:1px dotted;
82 | cursor:help;
83 | }
84 |
85 | table {
86 | border-collapse:collapse;
87 | border-spacing:0;
88 | }
89 |
90 | /* change border colour to suit your needs */
91 | hr {
92 | display:block;
93 | height:1px;
94 | border:0;
95 | border-top:1px solid #cccccc;
96 | margin:1em 0;
97 | padding:0;
98 | }
99 |
100 | input, select {
101 | vertical-align:middle;
102 | }
--------------------------------------------------------------------------------
/process/UA_stylesheets/_combined/headlines.css:
--------------------------------------------------------------------------------
1 |
2 | /* If you combine the three UA stylesheet styling for headlines, this is what you get */
3 |
4 | h1 {
5 | display: block;
6 | font-size: 2em;
7 | font-weight: bold;
8 | -webkit-margin-before: 0.67__qem;
9 | -webkit-margin-after: 0.67em;
10 | -webkit-margin-start: 0;
11 | -webkit-margin-end: 0;
12 | margin-block-start: .67em;
13 | margin-block-end: .67em;
14 | }
15 | h2 {
16 | display: block;
17 | font-size: 1.5em;
18 | font-weight: bold;
19 | -webkit-margin-before: 0.83__qem;
20 | -webkit-margin-after: 0.83em;
21 | -webkit-margin-start: 0;
22 | -webkit-margin-end: 0; margin-block-start: .83em;
23 | margin-block-end: .83em;
24 | }
25 |
26 | h3 {
27 | display: block;
28 | font-size: 1.17em;
29 | font-weight: bold;
30 | -webkit-margin-before: 1__qem;
31 | -webkit-margin-after: 1em;
32 | -webkit-margin-start: 0;
33 | -webkit-margin-end: 0;
34 | margin-block-start: 1em;
35 | margin-block-end: 1em;
36 | }
37 |
38 | h4 {
39 | display: block;
40 | font-size: 1.00em;
41 | font-weight: bold;
42 | -webkit-margin-before: 1.33__qem;
43 | -webkit-margin-after: 1.33em;
44 | -webkit-margin-start: 0;
45 | -webkit-margin-end: 0;
46 | margin-block-start: 1.33em;
47 | margin-block-end: 1.33em;
48 | }
49 |
50 | h5 {
51 | display: block;
52 | font-size: 0.83em;
53 | font-weight: bold;
54 | -webkit-margin-before: 1.67__qem;
55 | -webkit-margin-after: 1.67em;
56 | -webkit-margin-start: 0;
57 | -webkit-margin-end: 0;
58 | margin-block-start: 1.67em;
59 | margin-block-end: 1.67em;
60 | }
61 |
62 | h6 {
63 | display: block;
64 | font-size: 0.67em;
65 | font-weight: bold;
66 | -webkit-margin-before: 2.33__qem;
67 | -webkit-margin-after: 2.33em;
68 | -webkit-margin-start: 0;
69 | -webkit-margin-end: 0; margin-block-start: 2.33em;
70 | margin-block-end: 2.33em;
71 | }
72 |
73 |
74 | /* In addition, all three engines are mapping the formatting of an H1 to smaller headlines (h2, h3, h4, h5, h6) according to how many levels deep it is inside a sectioning element. Therefore, an h1 that's nested inside three levels of any sectioning element will be formatted like an h3.
75 |
76 |
77 | Normalize squashes this with the following code: */
78 |
79 |
80 |
81 | /**
82 | * Correct the font size and margin on `h1` elements within `section` and
83 | * `article` contexts in Chrome, Firefox, and Safari.
84 | */
85 |
86 | h1 {
87 | font-size: 2em;
88 | margin: 0.67em 0;
89 | }
90 |
91 |
92 | /* ----------------------------------------------------------------------- */
93 |
94 | /* Many resets remove bolding from headlines. Or margins / top margin. Or style them in some way. I think it makes more sense for us to do none of those things. We want to keep to emptiness as much as possible, not provide a base theme. */
95 |
96 |
97 |
98 |
99 |
100 |
--------------------------------------------------------------------------------
/css/reminders.css:
--------------------------------------------------------------------------------
1 | /* @docs
2 | label: Reminders
3 | version: 0.1.0-beta.2
4 |
5 | note: |
6 | All the remedies in this file are commented out by default,
7 | because they could cause harm as general defaults.
8 | These should be used as reminders
9 | to handle common styling issues
10 | in a way that will work for your project and users.
11 | Read, explore, uncomment, and edit as needed.
12 |
13 | category: file
14 | */
15 |
16 |
17 | /* @docs
18 | label: List Style
19 |
20 | note: |
21 | List styling is not usually desired in navigation,
22 | but this also removes list-semantics for screen-readers
23 |
24 | links:
25 | - https://github.com/mozdevs/cssremedy/issues/15
26 |
27 | category: navigation
28 | */
29 | /* nav ul {
30 | list-style: none;
31 | } */
32 |
33 |
34 | /* @docs
35 | label: List Voiceover
36 |
37 | note: |
38 | 1. Add zero-width-space to prevent VoiceOver disable
39 | 2. Absolute position ensures no extra space
40 |
41 | links:
42 | - https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/
43 |
44 | category: navigation
45 | */
46 | /* nav li:before {
47 | content: "\200B";
48 | position: absolute;
49 | } */
50 |
51 |
52 | /* @docs
53 | label: Reduced Motion
54 |
55 | note: |
56 | 1. Immediately jump any animation to the end point
57 | 2. Remove transitions & fixed background attachment
58 |
59 | links:
60 | - https://github.com/mozdevs/cssremedy/issues/11
61 |
62 | category: accessibility
63 | */
64 | /* @media (prefers-reduced-motion: reduce) {
65 | *, ::before, ::after {
66 | animation-delay: -1ms !important;
67 | animation-duration: 1ms !important;
68 | animation-iteration-count: 1 !important;
69 | background-attachment: initial !important;
70 | scroll-behavior: auto !important;
71 | transition-delay: 0s !important;
72 | transition-duration: 0s !important;
73 | }
74 | } */
75 |
76 |
77 | /* @docs
78 | label: Line Heights
79 |
80 | note: |
81 | The default `normal` line-height is tightly spaced,
82 | but takes font-metrics into account,
83 | which is important for many fonts.
84 | Looser spacing may improve readability in latin type,
85 | but may cause problems in some scripts --
86 | from cusrive/fantasy fonts to
87 | [Javanese](https://jsbin.com/bezasax/1/edit?html,css,output),
88 | [Persian](https://jsbin.com/qurecom/edit?html,css,output),
89 | and CJK languages.
90 |
91 | links:
92 | - https://github.com/mozdevs/cssremedy/issues/7
93 | - https://jsbin.com/bezasax/1/edit?html,css,output
94 | - https://jsbin.com/qurecom/edit?html,css,output
95 |
96 | todo: |
97 | - Use `:lang(language-code)` selectors?
98 | - Add typography remedies for other scripts & languages...
99 |
100 | category: typography
101 | */
102 | /* html { line-height: 1.5; }
103 | h1, h2, h3, h4, h5, h6 { line-height: 1.25; }
104 | caption, figcaption, label, legend { line-height: 1.375; } */
105 |
--------------------------------------------------------------------------------
/process/UA_stylesheets/_combined/lists.css:
--------------------------------------------------------------------------------
1 |
2 | /* If you combine the three UA stylesheet styling for headlines, this is what you get */
3 |
4 |
5 |
6 | /*
7 | IN PROGRESS.
8 | MESSY.
9 | STILL FIGURING OUT.
10 | */
11 |
12 |
13 |
14 | /* Normalize now has nothing about lists. It used to create interop between whether ul or li created an indentation, with either padding or margin.
15 |
16 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
17 |
18 | */
19 |
20 |
21 |
22 | /* Firefox */
23 | ul, menu, dir {
24 | display: block;
25 | list-style-type: disc;
26 | margin-block-start: 1em;
27 | margin-block-end: 1em;
28 | padding-inline-start: 40px;
29 | }
30 |
31 | /* Chrome and Safari */
32 | ul, menu, dir {
33 | display: block;
34 | list-style-type: disc;
35 | -webkit-margin-before: 1__qem;
36 | -webkit-margin-after: 1em;
37 | -webkit-margin-start: 0;
38 | -webkit-margin-end: 0;
39 | -webkit-padding-start: 40px
40 | }
41 |
42 |
43 | /* Firefox */
44 | menu[type="context"] {
45 | display: none !important;
46 | }
47 |
48 |
49 |
50 | /* Firefox */
51 | ol {
52 | display: block;
53 | list-style-type: decimal;
54 | margin-block-start: 1em;
55 | margin-block-end: 1em;
56 | padding-inline-start: 40px;
57 | }
58 | /* Chrome and Safari */
59 | ol {
60 | display: block;
61 | list-style-type: decimal;
62 | -webkit-margin-before: 1__qem;
63 | -webkit-margin-after: 1em;
64 | -webkit-margin-start: 0;
65 | -webkit-margin-end: 0;
66 | -webkit-padding-start: 40px
67 | }
68 |
69 |
70 |
71 |
72 | /* Firefox */
73 | li {
74 | display: list-item;
75 | text-align: match-parent;
76 | }
77 | /* Chrome and Safari */
78 | li {
79 | display: list-item;
80 | text-align: -webkit-match-parent;
81 | }
82 |
83 |
84 |
85 |
86 |
87 | /* Firefox */
88 |
89 | /* nested lists have no top/bottom margins */
90 | :-moz-any(ul, ol, dir, menu, dl) ul,
91 | :-moz-any(ul, ol, dir, menu, dl) ol,
92 | :-moz-any(ul, ol, dir, menu, dl) dir,
93 | :-moz-any(ul, ol, dir, menu, dl) menu,
94 | :-moz-any(ul, ol, dir, menu, dl) dl {
95 | margin-block-start: 0;
96 | margin-block-end: 0;
97 | }
98 |
99 | /* 2 deep unordered lists use a circle */
100 | :-moz-any(ol, ul, menu, dir) ul,
101 | :-moz-any(ol, ul, menu, dir) menu,
102 | :-moz-any(ol, ul, menu, dir) dir {
103 | list-style-type: circle;
104 | }
105 |
106 | /* 3 deep (or more) unordered lists use a square */
107 | :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
108 | :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
109 | :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
110 | list-style-type: square;
111 | }
112 |
113 |
114 |
115 | /* Chrome and Safari */
116 |
117 | ul ul, ol ul {
118 | list-style-type: circle
119 | }
120 | ol ol ul, ol ul ul, ul ol ul, ul ul ul {
121 | list-style-type: square
122 | }
123 | /* Chrome and Safari */
124 | dd {
125 | display: block;
126 | -webkit-margin-start: 40px
127 | }
128 | dl {
129 | display: block;
130 | -webkit-margin-before: 1__qem;
131 | -webkit-margin-after: 1em;
132 | -webkit-margin-start: 0;
133 | -webkit-margin-end: 0;
134 | }
135 | dt {
136 | display: block
137 | }
138 | ol ul, ul ol, ul ul, ol ol {
139 | -webkit-margin-before: 0;
140 | -webkit-margin-after: 0
141 | }
142 |
143 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to CSS Remedy
2 |
3 | We'd love to have you contribute to this project.
4 | You can get involved by
5 | [creating or commenting on an issue](https://github.com/mozdevs/cssremedy/issues).
6 |
7 | This repository is governed by Mozilla's
8 | code of conduct and etiquette guidelines.
9 | For more details, please read the
10 | [Mozilla Community Participation Guidelines](https://www.mozilla.org/en-US/about/governance/policies/participation/).
11 |
12 | ## Pull Requests
13 |
14 | We're also happy to take pull requests,
15 | both for fixing bugs/typos
16 | and submitting new remedies.
17 | For larger changes,
18 | it's often best to file an issue for discussion first.
19 |
20 | ### Organization
21 |
22 | The code is organized into:
23 |
24 | - A core `remedy.css`
25 | that we recommend using broadly across most projects.
26 | - A secondary `reminders.css`
27 | with more opinionated or potentially dangerous remedies
28 | that should be reviewed and considered on a case-by-case basis.
29 | All reminders are commented out by default.
30 | - Additional specialized remedy files
31 | (such as `quotes.css`) that can be used as-needed,
32 | but may not be useful generally.
33 |
34 | The `process` folder contains related materials:
35 |
36 | - Other resets
37 | - UA stylesheets from various browsers
38 | - An html file to test against
39 |
40 | ### Documentation
41 |
42 | We're using code comments with
43 | [Doxray](https://github.com/himedlooff/doxray)
44 | to automatically generate our online documentation.
45 | Comments start with `/* @docs`,
46 | and use [YAML](https://learnxinyminutes.com/docs/yaml/) structure,
47 | and [Markdown](https://commonmark.org/help/)
48 | for notes.
49 | It looks like this:
50 |
51 | ```css
52 | /* @docs
53 | label: Name The Remedy (required)
54 |
55 | note: |
56 | Indented markdown note can include
57 | any [links](http://mozilla.org/) and
58 | *other* `markdown` **syntax** (recommended).
59 |
60 | The vertical bar `|` at the start of the note block
61 | allows the note to span multiple lines.
62 |
63 | links:
64 | - https://example.com/any-relevant-links-including-github-discussion/
65 | - https://example.com/links-are-recommended
66 |
67 | todo: |
68 | Add a `markdown` block
69 | with todo items releated to this remedy.
70 |
71 | - You can add lists in the markdown,
72 | but this is not the same as the `links` YAML list...
73 | - (optional)
74 |
75 | category: create groups (required)
76 | */
77 | ```
78 |
79 | Every file should start with a file-level
80 | comment that describes the purpose
81 | and contents of that file:
82 |
83 | ```css
84 | /* @docs
85 | label: Name The File (required)
86 | version: 3.0.1-beta.1 (required)
87 |
88 | note: |
89 | Describe the purpose & contents of the file (recommended).
90 |
91 | category: file (!important)
92 | ```
93 |
94 | Adding `category: file` marks it as a file-level comment.
95 | We also include a `version` number on every file,
96 | since CSS documents are likely to be coppied and pasted
97 | out-of-context.
98 |
99 | ## Release Checklist
100 |
101 | - Update inline documentation comments as needed
102 | - Update `CHANGELOG.md` with bugfixes, new remedies, and breaking changes
103 | - Update version using [SemVer](https://semver.org/), and record in:
104 | - `package.json`
105 | - `CHANGELOG.md`
106 | - CSS file-level comments
107 | - If possible, run RemeDocs locally to test documentation build
108 | - Merge changes into the `master` branch
109 | - Create a release on GitHub
110 | - Publish release on NPM
111 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Remedy
2 |
3 | Start your project with a remedy for the technical debt of CSS.
4 |
5 | _This project is just getting started. It's too early to distribute it as part of other frameworks. Feel free to read the files and take inspiration, but do know we have a ways to go before it's really "ready to use"._
6 |
7 |
8 | ## Contribute
9 |
10 | We'd love to have you contribute to this project.
11 | See the [contributing guidelines](CONTRIBUTING.md) for more detail.
12 |
13 |
14 | ## What Is This?
15 |
16 | For years, base or reset stylesheets have helped web developers get started faster.
17 |
18 | Early resets eliminated all visual styling, putting the burden of defining styles for every element on the webmaster. This made sense when there weren't as many elements or properties, and when each browser did something very different than the others. By zeroing everything out, you start from a blank page. There were many reset stylesheets that took this approach. Eric Meyer's became the most popular.
19 |
20 | More recently, Normalize and similar projects took a different approach. Rather than removing all styling, they set out to create sensible defaults and eliminate browser bugs. Use one of these and you get a consistent base across all browsers.
21 |
22 | CSS Remedy takes a slightly different approach. These days, browsers are far more consistent in how they render CSS. But there are limitations on how far browsers can improve their User Agent Stylesheet. The defaults for the web have to be consistent with the past. Many desirable changes would break millions of existing websites.
23 |
24 | You, however, don't have to stay in the past. You can override the UA styles with more modern ideas of how CSS should work by default. Introducing CSS Remedy.
25 |
26 | > *‘Because that’s what Mosaic did’* is exactly the kind of reasoning CSS Remedy is trying to leave behind.
27 | >
28 | > ---Eric Meyer
29 |
30 | ## Guiding Ideas
31 |
32 | CSS Remedy sets CSS properties or values to what they would be if the CSSWG were creating the CSS today, from scratch, and didn't have to worry about backwards compatibility.
33 |
34 | We provide:
35 | - A core `remedy.css` that we recommend using broadly across most projects.
36 | - A secondary `reminders.css` with more opinionated or situational remedies that should be reviewed and considered on a case-by-case basis.
37 | - Additional specialized remedy files (such as `quotes.css`) that can be used as-needed, but may not be required generally.
38 |
39 | The current set of features can be extended along those lines, with opportunities for light-weight form-styling and other useful defaults. This is a living project, and we're excited to see where it goes!
40 |
41 | ## Browser Support
42 |
43 | We will actively support modern browsers, IE 11 and up. For older browsers:
44 |
45 | - We will add proven fixes when they are light-weight and non-invasive. We're not trying to ensure full interoperability, but we do want to help encourage reasonable fallbacks.
46 | - We won't "support" older browsers with any sense of urgency, priority, or completeness.
47 | - We're not trying to polyfill new CSS features like grid, or recreate the full html5 "shiv"
48 |
49 | ## Inspiration and History
50 |
51 | * [How browsers are supposed to render things](https://html.spec.whatwg.org/multipage/rendering.html)
52 | * [Requests on Twitter](https://twitter.com/jensimmons/status/1082396940237750272)
53 | * [Incomplete List of Mistakes in the Design of CSS](https://wiki.csswg.org/ideas/mistakes)
54 | * [Reboot, created by the Bootstrap team, 2017](https://getbootstrap.com/docs/4.0/content/reboot)
55 | * [Web Typography, a book by Richard Rutter, 2017](http://book.webtypography.net)
56 | * [Sanitize, created by Jonathan Neal](https://csstools.github.io/sanitize.css)
57 | * [Formalize, created by Nathan Smith](https://formalize.me)
58 | * [Normalize, created by Nicolas Gallagher and Jonathan Neal, 2011-2019](https://necolas.github.io/normalize.css)
59 | * [HTML5 Reset Stylesheet, by Richard Clark, 2010](https://html5doctor.com/html-5-reset-stylesheet)
60 | * [CSS Reset, created by Eric Meyer, 2007-2011](https://meyerweb.com/eric/tools/css/reset)
61 | * [Tantek’s CSS Reset: UndoHTML, 2004](https://tantek.com/log/2004/undohtml.css)
62 | * [A look at CSS Resets in 2018, article by Ire Aderinokun](https://bitsofco.de/a-look-at-css-resets-in-2018)
63 | * [A Roundup of CSS Resets, from before 2007 (there were many)](https://perishablepress.com/a-killer-collection-of-global-css-reset-styles)
64 | * [The origin story of `body { margin: 8px; }` by Miriam Suzanne, 2022](https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/)
65 |
--------------------------------------------------------------------------------
/css/remedy.css:
--------------------------------------------------------------------------------
1 | /* @docs
2 | label: Core Remedies
3 | version: 0.1.0-beta.2
4 |
5 | note: |
6 | These remedies are recommended
7 | as a starter for any project.
8 |
9 | category: file
10 | */
11 |
12 |
13 | /* @docs
14 | label: Box Sizing
15 |
16 | note: |
17 | Use border-box by default, globally.
18 |
19 | category: global
20 | */
21 | *, ::before, ::after { box-sizing: border-box; }
22 |
23 |
24 | /* @docs
25 | label: Line Sizing
26 |
27 | note: |
28 | Consistent line-spacing,
29 | even when inline elements have different line-heights.
30 |
31 | links:
32 | - https://drafts.csswg.org/css-inline-3/#line-sizing-property
33 |
34 | category: global
35 | */
36 | html { line-sizing: normal; }
37 |
38 |
39 | /* @docs
40 | label: Body Margins
41 |
42 | note: |
43 | Remove the tiny space around the edge of the page.
44 |
45 | category: global
46 | */
47 | body { margin: 0; }
48 |
49 |
50 | /* @docs
51 | label: Hidden Attribute
52 |
53 | note: |
54 | Maintain `hidden` behaviour when overriding `display` values.
55 |
56 | category: global
57 | */
58 | [hidden] { display: none; }
59 |
60 |
61 | /* @docs
62 | label: Heading Sizes
63 |
64 | note: |
65 | Switch to rem units for headings
66 |
67 | category: typography
68 | */
69 | h1 { font-size: 2rem; }
70 | h2 { font-size: 1.5rem; }
71 | h3 { font-size: 1.17rem; }
72 | h4 { font-size: 1.00rem; }
73 | h5 { font-size: 0.83rem; }
74 | h6 { font-size: 0.67rem; }
75 |
76 |
77 | /* @docs
78 | label: H1 Margins
79 |
80 | note: |
81 | Keep h1 margins consistent, even when nested.
82 |
83 | category: typography
84 | */
85 | h1 { margin: 0.67em 0; }
86 |
87 |
88 | /* @docs
89 | label: Pre Wrapping
90 |
91 | note: |
92 | Overflow by default is bad...
93 |
94 | category: typography
95 | */
96 | pre { white-space: pre-wrap; }
97 |
98 |
99 | /* @docs
100 | label: Horizontal Rule
101 |
102 | note: |
103 | 1. Solid, thin horizontal rules
104 | 2. Remove Firefox `color: gray`
105 | 3. Remove default `1px` height, and common `overflow: hidden`
106 |
107 | category: typography
108 | */
109 | hr {
110 | border-style: solid;
111 | border-width: 1px 0 0;
112 | color: inherit;
113 | height: 0;
114 | overflow: visible;
115 | }
116 |
117 |
118 | /* @docs
119 | label: Responsive Embeds
120 |
121 | note: |
122 | 1. Block display is usually what we want
123 | 2. The `vertical-align` removes strange space-below in case authors overwrite the display value
124 | 3. Responsive by default
125 | 4. Audio without `[controls]` remains hidden by default
126 |
127 | category: embedded elements
128 | */
129 | img, svg, video, canvas, audio, iframe, embed, object {
130 | display: block;
131 | vertical-align: middle;
132 | max-width: 100%;
133 | }
134 | audio:not([controls]) { display:none; }
135 |
136 |
137 | /* @docs
138 | label: Responsive Images
139 |
140 | note: |
141 | These new elements display inline by default,
142 | but that's not the expected behavior for either one.
143 | This can interfere with proper layout and aspect-ratio handling.
144 |
145 | 1. Remove the unnecessary wrapping `picture`, while maintaining contents
146 | 2. Source elements have nothing to display, so we hide them entirely
147 |
148 | category: embedded elements
149 | */
150 | picture { display: contents; }
151 | source { display: none; }
152 |
153 |
154 | /* @docs
155 | label: Aspect Ratios
156 |
157 | note: |
158 | Maintain intrinsic aspect ratios when `max-width` is applied.
159 | `iframe`, `embed`, and `object` are also embedded,
160 | but have no intrinsic ratio,
161 | so their `height` needs to be set explicitly.
162 |
163 | category: embedded elements
164 | */
165 | img, svg, video, canvas {
166 | height: auto;
167 | }
168 |
169 |
170 | /* @docs
171 | label: Audio Width
172 |
173 | note: |
174 | There is no good reason elements default to 300px,
175 | and audio files are unlikely to come with a width attribute.
176 |
177 | category: embedded elements
178 | */
179 | audio { width: 100%; }
180 |
181 | /* @docs
182 | label: Image Borders
183 |
184 | note: |
185 | Remove the border on images inside links in IE 10 and earlier.
186 |
187 | category: legacy browsers
188 | */
189 | img { border-style: none; }
190 |
191 |
192 | /* @docs
193 | label: SVG Overflow
194 |
195 | note: |
196 | Hide the overflow in IE 10 and earlier.
197 |
198 | category: legacy browsers
199 | */
200 | svg { overflow: hidden; }
201 |
202 |
203 | /* @docs
204 | label: HTML5 Elements
205 |
206 | note: |
207 | Default block display on HTML5 elements.
208 | For oldIE to apply this styling one needs to add some JS as well (i.e. `document.createElement("main")`)
209 |
210 | links:
211 | - https://www.sitepoint.com/html5-older-browsers-and-the-shiv/
212 |
213 | category: legacy browsers
214 | */
215 | article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
216 | display: block;
217 | }
218 |
219 |
220 | /* @docs
221 | label: Checkbox & Radio Inputs
222 |
223 | note: |
224 | 1. Add the correct box sizing in IE 10
225 | 2. Remove the padding in IE 10
226 |
227 | category: legacy browsers
228 | */
229 | [type='checkbox'],
230 | [type='radio'] {
231 | box-sizing: border-box;
232 | padding: 0;
233 | }
234 |
--------------------------------------------------------------------------------
/process/draft_description.md:
--------------------------------------------------------------------------------
1 | ## What does it do?
2 |
3 | * Preserves useful defaults, unlike many CSS resets.
4 | * Normalizes styles for a wide range of elements.
5 | * Corrects bugs and common browser inconsistencies.
6 | * Improves usability with subtle modifications.
7 | * Explains what code does using detailed comments.
8 |
9 | ## Context
10 |
11 | For years, people have started their custom CSS by building on top of a starter file. Eric Meyer's CSS Reset
12 | bit of history / Normalize....
13 |
14 | CSS FOOBAR is not attempting to reset all styling to zero. And it's not specifically about making all browser behave the same. The purpose of FOOBAR is simple — to pay off as much technical debt of the evoluation of CSS as possible.
15 |
16 | The first CSS specification was [published in 1996](https://en.wikipedia.org/wiki/Cascading_Style_Sheets#History).
17 | our ideas of how to write good specs has changed
18 | we've learned a lot, and have gotten much better at it
19 | there are a lot of things we might do differently now, if we'd known back then what we know now. In fact, the CSS Working Group keeps [a running list](https://wiki.csswg.org/ideas/mistakes) of things to change, in case anyone invents a time machine.
20 |
21 | Why don't browser makers just make these changes? Well, it would break the web.
22 |
23 | For example, it's clear now that `box-sizing` should default to `border-box`. But if the browsers suddenly started applying `box-sizing: border-box;` to websites, millions of websites would have browkn layouts overnight. We can't make such changes. But you don't have to live in the past. You can apply many of the more modern ideas to your website, through the use of this starter file.
24 |
25 | Changes to the design of CSS itself are limited by the requirement that all new CSS standards [maintain backwards compatibility](https://www.w3.org/People/Bos/DesignGuide/compatibility.html).
26 |
27 | ## Design Principles
28 |
29 | This project sets out to:
30 |
31 | 1. Bring your CSS up to the latest possibilities.
32 |
33 | 2. Remain unopinionated.
34 |
35 | The CSS Working Group doesn't encourage projects to use a certain naming convention for CSS, or way of organizing code. That remains completely up to each team to decide. What's 'best' really depends on the situation. This project also stays away from evangelizing such opinions. Use whatever naming conventions, code structure, content management system, build process, framework, etc that is best for you. Perhaps this starter code will be included inside of such a tool. It's designed to work with any of them.
36 |
37 | 3. Respect browser default styling.
38 |
39 | Unlike CSS Reset, this project is not attempting to remove all default styling. Many developers prefer to remove all margins, all padding, make all headlines be normal text size. It feels good, perhaps, to wipe the slate clean and start from nothing. The downside of that approach is that then you are responsible for styling everything. If all default styling is removed from `pre` and definition lists, then you must remember to create custom styling for such elements, even if you aren't using them often.
40 |
41 | This project takes a different approach. Rather than placing the burden on the Author (the web developer) to remember to style _everything_, we are going to do what the user agent stylesheet does. This project respects a lot of the default UA styling, overriding what we think we can improve, leaving the rest. Read through the code of our project, and see if you agree. You can alwas fork or override this project as you build your own.
42 |
43 | 4. Provide consistent form control styling.
44 |
45 | The W3C Working Groups have long held that the styling of forms, form controls, scrollbars, etc are the job of each unique browser, to handle as the browser maker wishes. Many people believe that things like dropdown select lists are part of the computer operating system or browser software, and not part of a website. Compare how iOS handles a number input keyboard vs a Linux desktop browser, and you can see how this philsophy makes sense.
46 |
47 | Conversly, most stakeholders running web projects believe that the forms for a website should reflect the branding for that site. Especially on projects where great efforst have been made to design a brand carefully and apply it consistently across a wide range of materials -- the people running those projects insist the select dropdowns are styled to match the site. Having some kind of unstyled operating-system based form control feels unfinished and inconsistent. Attempting to style form controls is one of the more painful parts of any project.
48 |
49 | Normalize approaches this problem by applying styling to any such thing that can be styled, and creating a consistent look, no matter the browser. While the Normalize style likely does not match your brand, it does give you an easy place to rewrite or override such code, instead of being left to hunt down how / whether or not you can in fact style some part of a form or form control.
50 |
51 | We are taking the same approach as Normalize. We'll apply a consistent style to forms and form controls, where possible. Giving you a helpful start at customzing such elements for your project.
52 |
53 | 5. Allow websites to not look the same in every browser.
54 |
55 | Websites don't have to look the same in every browser. In fact, no matter what they do, they never will. The intention of this project is not to iron out every difference. We are letting many of those differences stay.
56 |
--------------------------------------------------------------------------------
/process/exploring/forms.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | HTML5 Test Page
9 |
10 |
11 |
12 |
13 |
Form elements
14 |
143 |
144 |
145 |
162 |
163 |
164 |
165 |
166 |
--------------------------------------------------------------------------------
/process/Other_resets/2012_normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-bottom: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: bolder;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | bottom: -0.25em;
135 | }
136 |
137 | sup {
138 | top: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input { /* 1 */
178 | overflow: visible;
179 | }
180 |
181 | /**
182 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 | * 1. Remove the inheritance of text transform in Firefox.
184 | */
185 |
186 | button,
187 | select { /* 1 */
188 | text-transform: none;
189 | }
190 |
191 | /**
192 | * Correct the inability to style clickable types in iOS and Safari.
193 | */
194 |
195 | button,
196 | [type="button"],
197 | [type="reset"],
198 | [type="submit"] {
199 | -webkit-appearance: button;
200 | }
201 |
202 | /**
203 | * Remove the inner border and padding in Firefox.
204 | */
205 |
206 | button::-moz-focus-inner,
207 | [type="button"]::-moz-focus-inner,
208 | [type="reset"]::-moz-focus-inner,
209 | [type="submit"]::-moz-focus-inner {
210 | border-style: none;
211 | padding: 0;
212 | }
213 |
214 | /**
215 | * Restore the focus styles unset by the previous rule.
216 | */
217 |
218 | button:-moz-focusring,
219 | [type="button"]:-moz-focusring,
220 | [type="reset"]:-moz-focusring,
221 | [type="submit"]:-moz-focusring {
222 | outline: 1px dotted ButtonText;
223 | }
224 |
225 | /**
226 | * Correct the padding in Firefox.
227 | */
228 |
229 | fieldset {
230 | padding: 0.35em 0.75em 0.625em;
231 | }
232 |
233 | /**
234 | * 1. Correct the text wrapping in Edge and IE.
235 | * 2. Correct the color inheritance from `fieldset` elements in IE.
236 | * 3. Remove the padding so developers are not caught out when they zero out
237 | * `fieldset` elements in all browsers.
238 | */
239 |
240 | legend {
241 | box-sizing: border-box; /* 1 */
242 | color: inherit; /* 2 */
243 | display: table; /* 1 */
244 | max-width: 100%; /* 1 */
245 | padding: 0; /* 3 */
246 | white-space: normal; /* 1 */
247 | }
248 |
249 | /**
250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 | */
252 |
253 | progress {
254 | vertical-align: baseline;
255 | }
256 |
257 | /**
258 | * Remove the default vertical scrollbar in IE 10+.
259 | */
260 |
261 | textarea {
262 | overflow: auto;
263 | }
264 |
265 | /**
266 | * 1. Add the correct box sizing in IE 10.
267 | * 2. Remove the padding in IE 10.
268 | */
269 |
270 | [type="checkbox"],
271 | [type="radio"] {
272 | box-sizing: border-box; /* 1 */
273 | padding: 0; /* 2 */
274 | }
275 |
276 | /**
277 | * Correct the cursor style of increment and decrement buttons in Chrome.
278 | */
279 |
280 | [type="number"]::-webkit-inner-spin-button,
281 | [type="number"]::-webkit-outer-spin-button {
282 | height: auto;
283 | }
284 |
285 | /**
286 | * 1. Correct the odd appearance in Chrome and Safari.
287 | * 2. Correct the outline style in Safari.
288 | */
289 |
290 | [type="search"] {
291 | -webkit-appearance: textfield; /* 1 */
292 | outline-offset: -2px; /* 2 */
293 | }
294 |
295 | /**
296 | * Remove the inner padding in Chrome and Safari on macOS.
297 | */
298 |
299 | [type="search"]::-webkit-search-decoration {
300 | -webkit-appearance: none;
301 | }
302 |
303 | /**
304 | * 1. Correct the inability to style clickable types in iOS and Safari.
305 | * 2. Change font properties to `inherit` in Safari.
306 | */
307 |
308 | ::-webkit-file-upload-button {
309 | -webkit-appearance: button; /* 1 */
310 | font: inherit; /* 2 */
311 | }
312 |
313 | /* Interactive
314 | ========================================================================== */
315 |
316 | /*
317 | * Add the correct display in Edge, IE 10+, and Firefox.
318 | */
319 |
320 | details {
321 | display: block;
322 | }
323 |
324 | /*
325 | * Add the correct display in all browsers.
326 | */
327 |
328 | summary {
329 | display: list-item;
330 | }
331 |
332 | /* Misc
333 | ========================================================================== */
334 |
335 | /**
336 | * Add the correct display in IE 10+.
337 | */
338 |
339 | template {
340 | display: none;
341 | }
342 |
343 | /**
344 | * Add the correct display in IE 10.
345 | */
346 |
347 | [hidden] {
348 | display: none;
349 | }
--------------------------------------------------------------------------------
/process/Other_resets/2017_reboot.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
2 |
3 | // Reboot
4 | //
5 | // Normalization of HTML elements, manually forked from Normalize.css to remove
6 | // styles targeting irrelevant browsers while applying new styles.
7 | //
8 | // Normalize is licensed MIT. https://github.com/necolas/normalize.css
9 |
10 |
11 | // Document
12 | //
13 | // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
14 | // 2. Change the default font family in all browsers.
15 | // 3. Correct the line height in all browsers.
16 | // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
17 | // 5. Change the default tap highlight to be completely transparent in iOS.
18 |
19 | *,
20 | *::before,
21 | *::after {
22 | box-sizing: border-box; // 1
23 | }
24 |
25 | html {
26 | font-family: sans-serif; // 2
27 | line-height: 1.15; // 3
28 | -webkit-text-size-adjust: 100%; // 4
29 | -webkit-tap-highlight-color: rgba($black, 0); // 5
30 | }
31 |
32 | // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
33 | // TODO: remove in v5
34 | // stylelint-disable-next-line selector-list-comma-newline-after
35 | article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
36 | display: block;
37 | }
38 |
39 | // Body
40 | //
41 | // 1. Remove the margin in all browsers.
42 | // 2. As a best practice, apply a default `background-color`.
43 | // 3. Set an explicit initial text-align value so that we can later use
44 | // the `inherit` value on things like `
` elements.
45 |
46 | body {
47 | margin: 0; // 1
48 | font-family: $font-family-base;
49 | font-size: $font-size-base;
50 | font-weight: $font-weight-base;
51 | line-height: $line-height-base;
52 | color: $body-color;
53 | text-align: left; // 3
54 | background-color: $body-bg; // 2
55 | }
56 |
57 | // Suppress the focus outline on elements that cannot be accessed via keyboard.
58 | // This prevents an unwanted focus outline from appearing around elements that
59 | // might still respond to pointer events.
60 | //
61 | // Credit: https://github.com/suitcss/base
62 | [tabindex="-1"]:focus {
63 | outline: 0 !important;
64 | }
65 |
66 |
67 | // Content grouping
68 | //
69 | // 1. Add the correct box sizing in Firefox.
70 | // 2. Show the overflow in Edge and IE.
71 |
72 | hr {
73 | box-sizing: content-box; // 1
74 | height: 0; // 1
75 | overflow: visible; // 2
76 | }
77 |
78 |
79 | //
80 | // Typography
81 | //
82 |
83 | // Remove top margins from headings
84 | //
85 | // By default, `
`-`
` all receive top and bottom margins. We nuke the top
86 | // margin for easier control within type scales as it avoids margin collapsing.
87 | // stylelint-disable-next-line selector-list-comma-newline-after
88 | h1, h2, h3, h4, h5, h6 {
89 | margin-top: 0;
90 | margin-bottom: $headings-margin-bottom;
91 | }
92 |
93 | // Reset margins on paragraphs
94 | //
95 | // Similarly, the top margin on `
`s get reset. However, we also reset the
96 | // bottom margin to use `rem` units instead of `em`.
97 | p {
98 | margin-top: 0;
99 | margin-bottom: $paragraph-margin-bottom;
100 | }
101 |
102 | // Abbreviations
103 | //
104 | // 1. Duplicate behavior to the data-* attribute for our tooltip plugin
105 | // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
106 | // 3. Add explicit cursor to indicate changed behavior.
107 | // 4. Remove the bottom border in Firefox 39-.
108 | // 5. Prevent the text-decoration to be skipped.
109 |
110 | abbr[title],
111 | abbr[data-original-title] { // 1
112 | text-decoration: underline; // 2
113 | text-decoration: underline dotted; // 2
114 | cursor: help; // 3
115 | border-bottom: 0; // 4
116 | text-decoration-skip-ink: none; // 5
117 | }
118 |
119 | address {
120 | margin-bottom: 1rem;
121 | font-style: normal;
122 | line-height: inherit;
123 | }
124 |
125 | ol,
126 | ul,
127 | dl {
128 | margin-top: 0;
129 | margin-bottom: 1rem;
130 | }
131 |
132 | ol ol,
133 | ul ul,
134 | ol ul,
135 | ul ol {
136 | margin-bottom: 0;
137 | }
138 |
139 | dt {
140 | font-weight: $dt-font-weight;
141 | }
142 |
143 | dd {
144 | margin-bottom: .5rem;
145 | margin-left: 0; // Undo browser default
146 | }
147 |
148 | blockquote {
149 | margin: 0 0 1rem;
150 | }
151 |
152 | b,
153 | strong {
154 | font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
155 | }
156 |
157 | small {
158 | font-size: 80%; // Add the correct font size in all browsers
159 | }
160 |
161 | //
162 | // Prevent `sub` and `sup` elements from affecting the line height in
163 | // all browsers.
164 | //
165 |
166 | sub,
167 | sup {
168 | position: relative;
169 | font-size: 75%;
170 | line-height: 0;
171 | vertical-align: baseline;
172 | }
173 |
174 | sub { bottom: -.25em; }
175 | sup { top: -.5em; }
176 |
177 |
178 | //
179 | // Links
180 | //
181 |
182 | a {
183 | color: $link-color;
184 | text-decoration: $link-decoration;
185 | background-color: transparent; // Remove the gray background on active links in IE 10.
186 |
187 | @include hover {
188 | color: $link-hover-color;
189 | text-decoration: $link-hover-decoration;
190 | }
191 | }
192 |
193 | // And undo these styles for placeholder links/named anchors (without href)
194 | // which have not been made explicitly keyboard-focusable (without tabindex).
195 | // It would be more straightforward to just use a[href] in previous block, but that
196 | // causes specificity issues in many other styles that are too complex to fix.
197 | // See https://github.com/twbs/bootstrap/issues/19402
198 |
199 | a:not([href]):not([tabindex]) {
200 | color: inherit;
201 | text-decoration: none;
202 |
203 | @include hover-focus {
204 | color: inherit;
205 | text-decoration: none;
206 | }
207 |
208 | &:focus {
209 | outline: 0;
210 | }
211 | }
212 |
213 |
214 | //
215 | // Code
216 | //
217 |
218 | pre,
219 | code,
220 | kbd,
221 | samp {
222 | font-family: $font-family-monospace;
223 | font-size: 1em; // Correct the odd `em` font sizing in all browsers.
224 | }
225 |
226 | pre {
227 | // Remove browser default top margin
228 | margin-top: 0;
229 | // Reset browser default of `1em` to use `rem`s
230 | margin-bottom: 1rem;
231 | // Don't allow content to break outside
232 | overflow: auto;
233 | }
234 |
235 |
236 | //
237 | // Figures
238 | //
239 |
240 | figure {
241 | // Apply a consistent margin strategy (matches our type styles).
242 | margin: 0 0 1rem;
243 | }
244 |
245 |
246 | //
247 | // Images and content
248 | //
249 |
250 | img {
251 | vertical-align: middle;
252 | border-style: none; // Remove the border on images inside links in IE 10-.
253 | }
254 |
255 | svg {
256 | // Workaround for the SVG overflow bug in IE10/11 is still required.
257 | // See https://github.com/twbs/bootstrap/issues/26878
258 | overflow: hidden;
259 | vertical-align: middle;
260 | }
261 |
262 |
263 | //
264 | // Tables
265 | //
266 |
267 | table {
268 | border-collapse: collapse; // Prevent double borders
269 | }
270 |
271 | caption {
272 | padding-top: $table-cell-padding;
273 | padding-bottom: $table-cell-padding;
274 | color: $table-caption-color;
275 | text-align: left;
276 | caption-side: bottom;
277 | }
278 |
279 | th {
280 | // Matches default `
` alignment by inheriting from the ``, or the
281 | // closest parent with a set `text-align`.
282 | text-align: inherit;
283 | }
284 |
285 |
286 | //
287 | // Forms
288 | //
289 |
290 | label {
291 | // Allow labels to use `margin` for spacing.
292 | display: inline-block;
293 | margin-bottom: $label-margin-bottom;
294 | }
295 |
296 | // Remove the default `border-radius` that macOS Chrome adds.
297 | //
298 | // Details at https://github.com/twbs/bootstrap/issues/24093
299 | button {
300 | border-radius: 0;
301 | }
302 |
303 | // Work around a Firefox/IE bug where the transparent `button` background
304 | // results in a loss of the default `button` focus styles.
305 | //
306 | // Credit: https://github.com/suitcss/base/
307 | button:focus {
308 | outline: 1px dotted;
309 | outline: 5px auto -webkit-focus-ring-color;
310 | }
311 |
312 | input,
313 | button,
314 | select,
315 | optgroup,
316 | textarea {
317 | margin: 0; // Remove the margin in Firefox and Safari
318 | font-family: inherit;
319 | font-size: inherit;
320 | line-height: inherit;
321 | }
322 |
323 | button,
324 | input {
325 | overflow: visible; // Show the overflow in Edge
326 | }
327 |
328 | button,
329 | select {
330 | text-transform: none; // Remove the inheritance of text transform in Firefox
331 | }
332 |
333 | // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
334 | // controls in Android 4.
335 | // 2. Correct the inability to style clickable types in iOS and Safari.
336 | button,
337 | [type="button"], // 1
338 | [type="reset"],
339 | [type="submit"] {
340 | -webkit-appearance: button; // 2
341 | }
342 |
343 | // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
344 | button::-moz-focus-inner,
345 | [type="button"]::-moz-focus-inner,
346 | [type="reset"]::-moz-focus-inner,
347 | [type="submit"]::-moz-focus-inner {
348 | padding: 0;
349 | border-style: none;
350 | }
351 |
352 | input[type="radio"],
353 | input[type="checkbox"] {
354 | box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
355 | padding: 0; // 2. Remove the padding in IE 10-
356 | }
357 |
358 |
359 | input[type="date"],
360 | input[type="time"],
361 | input[type="datetime-local"],
362 | input[type="month"] {
363 | // Remove the default appearance of temporal inputs to avoid a Mobile Safari
364 | // bug where setting a custom line-height prevents text from being vertically
365 | // centered within the input.
366 | // See https://bugs.webkit.org/show_bug.cgi?id=139848
367 | // and https://github.com/twbs/bootstrap/issues/11266
368 | -webkit-appearance: listbox;
369 | }
370 |
371 | textarea {
372 | overflow: auto; // Remove the default vertical scrollbar in IE.
373 | // Textareas should really only resize vertically so they don't break their (horizontal) containers.
374 | resize: vertical;
375 | }
376 |
377 | fieldset {
378 | // Browsers set a default `min-width: min-content;` on fieldsets,
379 | // unlike e.g. `
`s, which have `min-width: 0;` by default.
380 | // So we reset that to ensure fieldsets behave more like a standard block element.
381 | // See https://github.com/twbs/bootstrap/issues/12359
382 | // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
383 | min-width: 0;
384 | // Reset the default outline behavior of fieldsets so they don't affect page layout.
385 | padding: 0;
386 | margin: 0;
387 | border: 0;
388 | }
389 |
390 | // 1. Correct the text wrapping in Edge and IE.
391 | // 2. Correct the color inheritance from `fieldset` elements in IE.
392 | legend {
393 | display: block;
394 | width: 100%;
395 | max-width: 100%; // 1
396 | padding: 0;
397 | margin-bottom: .5rem;
398 | font-size: 1.5rem;
399 | line-height: inherit;
400 | color: inherit; // 2
401 | white-space: normal; // 1
402 | }
403 |
404 | progress {
405 | vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
406 | }
407 |
408 | // Correct the cursor style of increment and decrement buttons in Chrome.
409 | [type="number"]::-webkit-inner-spin-button,
410 | [type="number"]::-webkit-outer-spin-button {
411 | height: auto;
412 | }
413 |
414 | [type="search"] {
415 | // This overrides the extra rounded corners on search inputs in iOS so that our
416 | // `.form-control` class can properly style them. Note that this cannot simply
417 | // be added to `.form-control` as it's not specific enough. For details, see
418 | // https://github.com/twbs/bootstrap/issues/11586.
419 | outline-offset: -2px; // 2. Correct the outline style in Safari.
420 | -webkit-appearance: none;
421 | }
422 |
423 | //
424 | // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
425 | //
426 |
427 | [type="search"]::-webkit-search-decoration {
428 | -webkit-appearance: none;
429 | }
430 |
431 | //
432 | // 1. Correct the inability to style clickable types in iOS and Safari.
433 | // 2. Change font properties to `inherit` in Safari.
434 | //
435 |
436 | ::-webkit-file-upload-button {
437 | font: inherit; // 2
438 | -webkit-appearance: button; // 1
439 | }
440 |
441 | //
442 | // Correct element displays
443 | //
444 |
445 | output {
446 | display: inline-block;
447 | }
448 |
449 | summary {
450 | display: list-item; // Add the correct display in all browsers
451 | cursor: pointer;
452 | }
453 |
454 | template {
455 | display: none; // Add the correct display in IE
456 | }
457 |
458 | // Always hide an element with the `hidden` HTML attribute (from PureCSS).
459 | // Needed for proper display in IE 10-.
460 | [hidden] {
461 | display: none !important;
462 | }
463 |
--------------------------------------------------------------------------------
/process/Other_resets/2015_sanitize.css:
--------------------------------------------------------------------------------
1 | /*! sanitize.css v8.0.0 | CC0 License | github.com/csstools/sanitize.css */
2 |
3 | /* Document
4 | * ========================================================================== */
5 |
6 | /**
7 | * 1. Remove repeating backgrounds in all browsers (opinionated).
8 | * 2. Add border box sizing in all browsers (opinionated).
9 | */
10 |
11 | *,
12 | ::before,
13 | ::after {
14 | background-repeat: no-repeat; /* 1 */
15 | box-sizing: border-box; /* 2 */
16 | }
17 |
18 | /**
19 | * 1. Add text decoration inheritance in all browsers (opinionated).
20 | * 2. Add vertical alignment inheritance in all browsers (opinionated).
21 | */
22 |
23 | ::before,
24 | ::after {
25 | text-decoration: inherit; /* 1 */
26 | vertical-align: inherit; /* 2 */
27 | }
28 |
29 | /**
30 | * 1. Use the default cursor in all browsers (opinionated).
31 | * 2. Use the default user interface font in all browsers (opinionated).
32 | * 3. Correct the line height in all browsers.
33 | * 4. Use a 4-space tab width in all browsers (opinionated).
34 | * 5. Prevent adjustments of font size after orientation changes in
35 | * IE on Windows Phone and in iOS.
36 | * 6. Breaks words to prevent overflow in all browsers (opinionated).
37 | */
38 |
39 | html {
40 | cursor: default; /* 1 */
41 | font-family:
42 | system-ui,
43 | /* macOS 10.11-10.12 */ -apple-system,
44 | /* Windows 6+ */ Segoe UI,
45 | /* Android 4+ */ Roboto,
46 | /* Ubuntu 10.10+ */ Ubuntu,
47 | /* Gnome 3+ */ Cantarell,
48 | /* KDE Plasma 5+ */ Noto Sans,
49 | /* fallback */ sans-serif,
50 | /* macOS emoji */ "Apple Color Emoji",
51 | /* Windows emoji */ "Segoe UI Emoji",
52 | /* Windows emoji */ "Segoe UI Symbol",
53 | /* Linux emoji */ "Noto Color Emoji"; /* 2 */
54 |
55 | line-height: 1.15; /* 3 */
56 | -moz-tab-size: 4; /* 4 */
57 | tab-size: 4; /* 4 */
58 | -ms-text-size-adjust: 100%; /* 5 */
59 | -webkit-text-size-adjust: 100%; /* 5 */
60 | word-break: break-word; /* 6 */
61 | }
62 |
63 | /* Sections
64 | * ========================================================================== */
65 |
66 | /**
67 | * Remove the margin in all browsers (opinionated).
68 | */
69 |
70 | body {
71 | margin: 0;
72 | }
73 |
74 | /**
75 | * Correct the font size and margin on `h1` elements within `section` and
76 | * `article` contexts in Chrome, Firefox, and Safari.
77 | */
78 |
79 | h1 {
80 | font-size: 2em;
81 | margin: 0.67em 0;
82 | }
83 |
84 | /* Grouping content
85 | * ========================================================================== */
86 |
87 | /**
88 | * 1. Add the correct sizing in Firefox.
89 | * 2. Show the overflow in Edge and IE.
90 | */
91 |
92 | hr {
93 | height: 0; /* 1 */
94 | overflow: visible; /* 2 */
95 | }
96 |
97 | /**
98 | * Add the correct display in IE.
99 | */
100 |
101 | main {
102 | display: block;
103 | }
104 |
105 | /**
106 | * Remove the list style on navigation lists in all browsers (opinionated).
107 | */
108 |
109 | nav ol,
110 | nav ul {
111 | list-style: none;
112 | }
113 |
114 | /**
115 | * 1. Use the default monospace user interface font
116 | * in all browsers (opinionated).
117 | * 2. Correct the odd `em` font sizing in all browsers.
118 | */
119 |
120 | pre {
121 | font-family:
122 | /* macOS 10.10+ */ Menlo,
123 | /* Windows 6+ */ Consolas,
124 | /* Android 4+ */ Roboto Mono,
125 | /* Ubuntu 10.10+ */ Ubuntu Monospace,
126 | /* KDE Plasma 5+ */ Noto Mono,
127 | /* KDE Plasma 4+ */ Oxygen Mono,
128 | /* Linux/OpenOffice fallback */ Liberation Mono,
129 | /* fallback */ monospace; /* 1 */
130 |
131 | font-size: 1em; /* 2 */
132 | }
133 |
134 | /* Text-level semantics
135 | * ========================================================================== */
136 |
137 | /**
138 | * Remove the gray background on active links in IE 10.
139 | */
140 |
141 | a {
142 | background-color: transparent;
143 | }
144 |
145 | /**
146 | * Add the correct text decoration in Edge, IE, Opera, and Safari.
147 | */
148 |
149 | abbr[title] {
150 | text-decoration: underline;
151 | text-decoration: underline dotted;
152 | }
153 |
154 | /**
155 | * Add the correct font weight in Chrome, Edge, and Safari.
156 | */
157 |
158 | b,
159 | strong {
160 | font-weight: bolder;
161 | }
162 |
163 | /**
164 | * 1. Use the default monospace user interface font
165 | * in all browsers (opinionated).
166 | * 2. Correct the odd `em` font sizing in all browsers.
167 | */
168 |
169 | code,
170 | kbd,
171 | samp {
172 | font-family:
173 | /* macOS 10.10+ */ Menlo,
174 | /* Windows 6+ */ Consolas,
175 | /* Android 4+ */ Roboto Mono,
176 | /* Ubuntu 10.10+ */ Ubuntu Monospace,
177 | /* KDE Plasma 5+ */ Noto Mono,
178 | /* KDE Plasma 4+ */ Oxygen Mono,
179 | /* Linux/OpenOffice fallback */ Liberation Mono,
180 | /* fallback */ monospace; /* 1 */
181 |
182 | font-size: 1em; /* 2 */
183 | }
184 |
185 | /**
186 | * Add the correct font size in all browsers.
187 | */
188 |
189 | small {
190 | font-size: 80%;
191 | }
192 |
193 | /*
194 | * Remove the text shadow on text selections in Firefox 61- (opinionated).
195 | * 1. Restore the coloring undone by defining the text shadow
196 | * in all browsers (opinionated).
197 | */
198 |
199 | ::-moz-selection {
200 | background-color: #b3d4fc; /* 1 */
201 | color: #000; /* 1 */
202 | text-shadow: none;
203 | }
204 |
205 | ::selection {
206 | background-color: #b3d4fc; /* 1 */
207 | color: #000; /* 1 */
208 | text-shadow: none;
209 | }
210 |
211 | /* Embedded content
212 | * ========================================================================== */
213 |
214 | /*
215 | * Change the alignment on media elements in all browers (opinionated).
216 | */
217 |
218 | audio,
219 | canvas,
220 | iframe,
221 | img,
222 | svg,
223 | video {
224 | vertical-align: middle;
225 | }
226 |
227 | /**
228 | * Add the correct display in IE 9-.
229 | */
230 |
231 | audio,
232 | video {
233 | display: inline-block;
234 | }
235 |
236 | /**
237 | * Add the correct display in iOS 4-7.
238 | */
239 |
240 | audio:not([controls]) {
241 | display: none;
242 | height: 0;
243 | }
244 |
245 | /**
246 | * Remove the border on images inside links in IE 10-.
247 | */
248 |
249 | img {
250 | border-style: none;
251 | }
252 |
253 | /**
254 | * Change the fill color to match the text color in all browsers (opinionated).
255 | */
256 |
257 | svg:not([fill]) {
258 | fill: currentColor;
259 | }
260 |
261 | /**
262 | * Hide the overflow in IE.
263 | */
264 |
265 | svg:not(:root) {
266 | overflow: hidden;
267 | }
268 |
269 | /* Tabular data
270 | * ========================================================================== */
271 |
272 | /**
273 | * Collapse border spacing in all browsers (opinionated).
274 | */
275 |
276 | table {
277 | border-collapse: collapse;
278 | }
279 |
280 | /* Forms
281 | * ========================================================================== */
282 |
283 | /**
284 | * Inherit styling in all browsers (opinionated).
285 | */
286 |
287 | button,
288 | input,
289 | select,
290 | textarea {
291 | font-family: inherit;
292 | font-size: inherit;
293 | line-height: inherit;
294 | }
295 |
296 | /**
297 | * Remove the margin in Safari.
298 | */
299 |
300 | button,
301 | input,
302 | select {
303 | margin: 0;
304 | }
305 |
306 | /**
307 | * 1. Show the overflow in IE.
308 | * 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
309 | */
310 |
311 | button {
312 | overflow: visible; /* 1 */
313 | text-transform: none; /* 2 */
314 | }
315 |
316 | /**
317 | * Correct the inability to style clickable types in iOS and Safari.
318 | */
319 |
320 | button,
321 | [type="button"],
322 | [type="reset"],
323 | [type="submit"] {
324 | -webkit-appearance: button;
325 | }
326 |
327 | /**
328 | * Correct the padding in Firefox.
329 | */
330 |
331 | fieldset {
332 | padding: 0.35em 0.75em 0.625em;
333 | }
334 |
335 | /**
336 | * Show the overflow in Edge and IE.
337 | */
338 |
339 | input {
340 | overflow: visible;
341 | }
342 |
343 | /**
344 | * 1. Correct the text wrapping in Edge and IE.
345 | * 2. Correct the color inheritance from `fieldset` elements in IE.
346 | */
347 |
348 | legend {
349 | color: inherit; /* 2 */
350 | display: table; /* 1 */
351 | max-width: 100%; /* 1 */
352 | white-space: normal; /* 1 */
353 | }
354 |
355 | /**
356 | * 1. Add the correct display in Edge and IE.
357 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
358 | */
359 |
360 | progress {
361 | display: inline-block; /* 1 */
362 | vertical-align: baseline; /* 2 */
363 | }
364 |
365 | /**
366 | * Remove the inheritance of text transform in Firefox.
367 | */
368 |
369 | select {
370 | text-transform: none;
371 | }
372 |
373 | /**
374 | * 1. Remove the margin in Firefox and Safari.
375 | * 2. Remove the default vertical scrollbar in IE.
376 | * 3. Change the resize direction on textareas in all browsers (opinionated).
377 | */
378 |
379 | textarea {
380 | margin: 0; /* 1 */
381 | overflow: auto; /* 2 */
382 | resize: vertical; /* 3 */
383 | }
384 |
385 | /**
386 | * Remove the padding in IE 10-.
387 | */
388 |
389 | [type="checkbox"],
390 | [type="radio"] {
391 | padding: 0;
392 | }
393 |
394 | /**
395 | * 1. Correct the odd appearance in Chrome and Safari.
396 | * 2. Correct the outline style in Safari.
397 | */
398 |
399 | [type="search"] {
400 | -webkit-appearance: textfield; /* 1 */
401 | outline-offset: -2px; /* 2 */
402 | }
403 |
404 | /**
405 | * Correct the cursor style of increment and decrement buttons in Safari.
406 | */
407 |
408 | ::-webkit-inner-spin-button,
409 | ::-webkit-outer-spin-button {
410 | height: auto;
411 | }
412 |
413 | /**
414 | * Correct the text style of placeholders in Chrome, Edge, and Safari.
415 | */
416 |
417 | ::-webkit-input-placeholder {
418 | color: inherit;
419 | opacity: 0.54;
420 | }
421 |
422 | /**
423 | * Remove the inner padding in Chrome and Safari on macOS.
424 | */
425 |
426 | ::-webkit-search-decoration {
427 | -webkit-appearance: none;
428 | }
429 |
430 | /**
431 | * 1. Correct the inability to style clickable types in iOS and Safari.
432 | * 2. Change font properties to `inherit` in Safari.
433 | */
434 |
435 | ::-webkit-file-upload-button {
436 | -webkit-appearance: button; /* 1 */
437 | font: inherit; /* 2 */
438 | }
439 |
440 | /**
441 | * Remove the inner border and padding of focus outlines in Firefox.
442 | */
443 |
444 | ::-moz-focus-inner {
445 | border-style: none;
446 | padding: 0;
447 | }
448 |
449 | /**
450 | * Restore the focus outline styles unset by the previous rule in Firefox.
451 | */
452 |
453 | :-moz-focusring {
454 | outline: 1px dotted ButtonText;
455 | }
456 |
457 | /* Interactive
458 | * ========================================================================== */
459 |
460 | /*
461 | * Add the correct display in Edge and IE.
462 | */
463 |
464 | details {
465 | display: block;
466 | }
467 |
468 | /*
469 | * Add the correct styles in Edge, IE, and Safari.
470 | */
471 |
472 | dialog {
473 | background-color: white;
474 | border: solid;
475 | color: black;
476 | display: block;
477 | height: -moz-fit-content;
478 | height: -webkit-fit-content;
479 | height: fit-content;
480 | left: 0;
481 | margin: auto;
482 | padding: 1em;
483 | position: absolute;
484 | right: 0;
485 | width: -moz-fit-content;
486 | width: -webkit-fit-content;
487 | width: fit-content;
488 | }
489 |
490 | dialog:not([open]) {
491 | display: none;
492 | }
493 |
494 | /*
495 | * Add the correct display in all browsers.
496 | */
497 |
498 | summary {
499 | display: list-item;
500 | }
501 |
502 | /* Scripting
503 | * ========================================================================== */
504 |
505 | /**
506 | * Add the correct display in IE 9-.
507 | */
508 |
509 | canvas {
510 | display: inline-block;
511 | }
512 |
513 | /**
514 | * Add the correct display in IE.
515 | */
516 |
517 | template {
518 | display: none;
519 | }
520 |
521 | /* User interaction
522 | * ========================================================================== */
523 |
524 | /*
525 | * 1. Remove the tapping delay in IE 10.
526 | * 2. Remove the tapping delay on clickable elements
527 | in all browsers (opinionated).
528 | */
529 |
530 | a,
531 | area,
532 | button,
533 | input,
534 | label,
535 | select,
536 | summary,
537 | textarea,
538 | [tabindex] {
539 | -ms-touch-action: manipulation; /* 1 */
540 | touch-action: manipulation; /* 2 */
541 | }
542 |
543 | /**
544 | * Add the correct display in IE 10-.
545 | */
546 |
547 | [hidden] {
548 | display: none;
549 | }
550 |
551 | /* Accessibility
552 | * ========================================================================== */
553 |
554 | /**
555 | * Change the cursor on busy elements in all browsers (opinionated).
556 | */
557 |
558 | [aria-busy="true"] {
559 | cursor: progress;
560 | }
561 |
562 | /*
563 | * Change the cursor on control elements in all browsers (opinionated).
564 | */
565 |
566 | [aria-controls] {
567 | cursor: pointer;
568 | }
569 |
570 | /*
571 | * Change the cursor on disabled, not-editable, or otherwise
572 | * inoperable elements in all browsers (opinionated).
573 | */
574 |
575 | [aria-disabled="true"],
576 | [disabled] {
577 | cursor: not-allowed;
578 | }
579 |
580 | /*
581 | * Change the display on visually hidden accessible elements
582 | * in all browsers (opinionated).
583 | */
584 |
585 | [aria-hidden="false"][hidden]:not(:focus) {
586 | clip: rect(0, 0, 0, 0);
587 | display: inherit;
588 | position: absolute;
589 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Mozilla Public License Version 2.0
2 | ==================================
3 |
4 | 1. Definitions
5 | --------------
6 |
7 | 1.1. "Contributor"
8 | means each individual or legal entity that creates, contributes to
9 | the creation of, or owns Covered Software.
10 |
11 | 1.2. "Contributor Version"
12 | means the combination of the Contributions of others (if any) used
13 | by a Contributor and that particular Contributor's Contribution.
14 |
15 | 1.3. "Contribution"
16 | means Covered Software of a particular Contributor.
17 |
18 | 1.4. "Covered Software"
19 | means Source Code Form to which the initial Contributor has attached
20 | the notice in Exhibit A, the Executable Form of such Source Code
21 | Form, and Modifications of such Source Code Form, in each case
22 | including portions thereof.
23 |
24 | 1.5. "Incompatible With Secondary Licenses"
25 | means
26 |
27 | (a) that the initial Contributor has attached the notice described
28 | in Exhibit B to the Covered Software; or
29 |
30 | (b) that the Covered Software was made available under the terms of
31 | version 1.1 or earlier of the License, but not also under the
32 | terms of a Secondary License.
33 |
34 | 1.6. "Executable Form"
35 | means any form of the work other than Source Code Form.
36 |
37 | 1.7. "Larger Work"
38 | means a work that combines Covered Software with other material, in
39 | a separate file or files, that is not Covered Software.
40 |
41 | 1.8. "License"
42 | means this document.
43 |
44 | 1.9. "Licensable"
45 | means having the right to grant, to the maximum extent possible,
46 | whether at the time of the initial grant or subsequently, any and
47 | all of the rights conveyed by this License.
48 |
49 | 1.10. "Modifications"
50 | means any of the following:
51 |
52 | (a) any file in Source Code Form that results from an addition to,
53 | deletion from, or modification of the contents of Covered
54 | Software; or
55 |
56 | (b) any new file in Source Code Form that contains any Covered
57 | Software.
58 |
59 | 1.11. "Patent Claims" of a Contributor
60 | means any patent claim(s), including without limitation, method,
61 | process, and apparatus claims, in any patent Licensable by such
62 | Contributor that would be infringed, but for the grant of the
63 | License, by the making, using, selling, offering for sale, having
64 | made, import, or transfer of either its Contributions or its
65 | Contributor Version.
66 |
67 | 1.12. "Secondary License"
68 | means either the GNU General Public License, Version 2.0, the GNU
69 | Lesser General Public License, Version 2.1, the GNU Affero General
70 | Public License, Version 3.0, or any later versions of those
71 | licenses.
72 |
73 | 1.13. "Source Code Form"
74 | means the form of the work preferred for making modifications.
75 |
76 | 1.14. "You" (or "Your")
77 | means an individual or a legal entity exercising rights under this
78 | License. For legal entities, "You" includes any entity that
79 | controls, is controlled by, or is under common control with You. For
80 | purposes of this definition, "control" means (a) the power, direct
81 | or indirect, to cause the direction or management of such entity,
82 | whether by contract or otherwise, or (b) ownership of more than
83 | fifty percent (50%) of the outstanding shares or beneficial
84 | ownership of such entity.
85 |
86 | 2. License Grants and Conditions
87 | --------------------------------
88 |
89 | 2.1. Grants
90 |
91 | Each Contributor hereby grants You a world-wide, royalty-free,
92 | non-exclusive license:
93 |
94 | (a) under intellectual property rights (other than patent or trademark)
95 | Licensable by such Contributor to use, reproduce, make available,
96 | modify, display, perform, distribute, and otherwise exploit its
97 | Contributions, either on an unmodified basis, with Modifications, or
98 | as part of a Larger Work; and
99 |
100 | (b) under Patent Claims of such Contributor to make, use, sell, offer
101 | for sale, have made, import, and otherwise transfer either its
102 | Contributions or its Contributor Version.
103 |
104 | 2.2. Effective Date
105 |
106 | The licenses granted in Section 2.1 with respect to any Contribution
107 | become effective for each Contribution on the date the Contributor first
108 | distributes such Contribution.
109 |
110 | 2.3. Limitations on Grant Scope
111 |
112 | The licenses granted in this Section 2 are the only rights granted under
113 | this License. No additional rights or licenses will be implied from the
114 | distribution or licensing of Covered Software under this License.
115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a
116 | Contributor:
117 |
118 | (a) for any code that a Contributor has removed from Covered Software;
119 | or
120 |
121 | (b) for infringements caused by: (i) Your and any other third party's
122 | modifications of Covered Software, or (ii) the combination of its
123 | Contributions with other software (except as part of its Contributor
124 | Version); or
125 |
126 | (c) under Patent Claims infringed by Covered Software in the absence of
127 | its Contributions.
128 |
129 | This License does not grant any rights in the trademarks, service marks,
130 | or logos of any Contributor (except as may be necessary to comply with
131 | the notice requirements in Section 3.4).
132 |
133 | 2.4. Subsequent Licenses
134 |
135 | No Contributor makes additional grants as a result of Your choice to
136 | distribute the Covered Software under a subsequent version of this
137 | License (see Section 10.2) or under the terms of a Secondary License (if
138 | permitted under the terms of Section 3.3).
139 |
140 | 2.5. Representation
141 |
142 | Each Contributor represents that the Contributor believes its
143 | Contributions are its original creation(s) or it has sufficient rights
144 | to grant the rights to its Contributions conveyed by this License.
145 |
146 | 2.6. Fair Use
147 |
148 | This License is not intended to limit any rights You have under
149 | applicable copyright doctrines of fair use, fair dealing, or other
150 | equivalents.
151 |
152 | 2.7. Conditions
153 |
154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
155 | in Section 2.1.
156 |
157 | 3. Responsibilities
158 | -------------------
159 |
160 | 3.1. Distribution of Source Form
161 |
162 | All distribution of Covered Software in Source Code Form, including any
163 | Modifications that You create or to which You contribute, must be under
164 | the terms of this License. You must inform recipients that the Source
165 | Code Form of the Covered Software is governed by the terms of this
166 | License, and how they can obtain a copy of this License. You may not
167 | attempt to alter or restrict the recipients' rights in the Source Code
168 | Form.
169 |
170 | 3.2. Distribution of Executable Form
171 |
172 | If You distribute Covered Software in Executable Form then:
173 |
174 | (a) such Covered Software must also be made available in Source Code
175 | Form, as described in Section 3.1, and You must inform recipients of
176 | the Executable Form how they can obtain a copy of such Source Code
177 | Form by reasonable means in a timely manner, at a charge no more
178 | than the cost of distribution to the recipient; and
179 |
180 | (b) You may distribute such Executable Form under the terms of this
181 | License, or sublicense it under different terms, provided that the
182 | license for the Executable Form does not attempt to limit or alter
183 | the recipients' rights in the Source Code Form under this License.
184 |
185 | 3.3. Distribution of a Larger Work
186 |
187 | You may create and distribute a Larger Work under terms of Your choice,
188 | provided that You also comply with the requirements of this License for
189 | the Covered Software. If the Larger Work is a combination of Covered
190 | Software with a work governed by one or more Secondary Licenses, and the
191 | Covered Software is not Incompatible With Secondary Licenses, this
192 | License permits You to additionally distribute such Covered Software
193 | under the terms of such Secondary License(s), so that the recipient of
194 | the Larger Work may, at their option, further distribute the Covered
195 | Software under the terms of either this License or such Secondary
196 | License(s).
197 |
198 | 3.4. Notices
199 |
200 | You may not remove or alter the substance of any license notices
201 | (including copyright notices, patent notices, disclaimers of warranty,
202 | or limitations of liability) contained within the Source Code Form of
203 | the Covered Software, except that You may alter any license notices to
204 | the extent required to remedy known factual inaccuracies.
205 |
206 | 3.5. Application of Additional Terms
207 |
208 | You may choose to offer, and to charge a fee for, warranty, support,
209 | indemnity or liability obligations to one or more recipients of Covered
210 | Software. However, You may do so only on Your own behalf, and not on
211 | behalf of any Contributor. You must make it absolutely clear that any
212 | such warranty, support, indemnity, or liability obligation is offered by
213 | You alone, and You hereby agree to indemnify every Contributor for any
214 | liability incurred by such Contributor as a result of warranty, support,
215 | indemnity or liability terms You offer. You may include additional
216 | disclaimers of warranty and limitations of liability specific to any
217 | jurisdiction.
218 |
219 | 4. Inability to Comply Due to Statute or Regulation
220 | ---------------------------------------------------
221 |
222 | If it is impossible for You to comply with any of the terms of this
223 | License with respect to some or all of the Covered Software due to
224 | statute, judicial order, or regulation then You must: (a) comply with
225 | the terms of this License to the maximum extent possible; and (b)
226 | describe the limitations and the code they affect. Such description must
227 | be placed in a text file included with all distributions of the Covered
228 | Software under this License. Except to the extent prohibited by statute
229 | or regulation, such description must be sufficiently detailed for a
230 | recipient of ordinary skill to be able to understand it.
231 |
232 | 5. Termination
233 | --------------
234 |
235 | 5.1. The rights granted under this License will terminate automatically
236 | if You fail to comply with any of its terms. However, if You become
237 | compliant, then the rights granted under this License from a particular
238 | Contributor are reinstated (a) provisionally, unless and until such
239 | Contributor explicitly and finally terminates Your grants, and (b) on an
240 | ongoing basis, if such Contributor fails to notify You of the
241 | non-compliance by some reasonable means prior to 60 days after You have
242 | come back into compliance. Moreover, Your grants from a particular
243 | Contributor are reinstated on an ongoing basis if such Contributor
244 | notifies You of the non-compliance by some reasonable means, this is the
245 | first time You have received notice of non-compliance with this License
246 | from such Contributor, and You become compliant prior to 30 days after
247 | Your receipt of the notice.
248 |
249 | 5.2. If You initiate litigation against any entity by asserting a patent
250 | infringement claim (excluding declaratory judgment actions,
251 | counter-claims, and cross-claims) alleging that a Contributor Version
252 | directly or indirectly infringes any patent, then the rights granted to
253 | You by any and all Contributors for the Covered Software under Section
254 | 2.1 of this License shall terminate.
255 |
256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all
257 | end user license agreements (excluding distributors and resellers) which
258 | have been validly granted by You or Your distributors under this License
259 | prior to termination shall survive termination.
260 |
261 | ************************************************************************
262 | * *
263 | * 6. Disclaimer of Warranty *
264 | * ------------------------- *
265 | * *
266 | * Covered Software is provided under this License on an "as is" *
267 | * basis, without warranty of any kind, either expressed, implied, or *
268 | * statutory, including, without limitation, warranties that the *
269 | * Covered Software is free of defects, merchantable, fit for a *
270 | * particular purpose or non-infringing. The entire risk as to the *
271 | * quality and performance of the Covered Software is with You. *
272 | * Should any Covered Software prove defective in any respect, You *
273 | * (not any Contributor) assume the cost of any necessary servicing, *
274 | * repair, or correction. This disclaimer of warranty constitutes an *
275 | * essential part of this License. No use of any Covered Software is *
276 | * authorized under this License except under this disclaimer. *
277 | * *
278 | ************************************************************************
279 |
280 | ************************************************************************
281 | * *
282 | * 7. Limitation of Liability *
283 | * -------------------------- *
284 | * *
285 | * Under no circumstances and under no legal theory, whether tort *
286 | * (including negligence), contract, or otherwise, shall any *
287 | * Contributor, or anyone who distributes Covered Software as *
288 | * permitted above, be liable to You for any direct, indirect, *
289 | * special, incidental, or consequential damages of any character *
290 | * including, without limitation, damages for lost profits, loss of *
291 | * goodwill, work stoppage, computer failure or malfunction, or any *
292 | * and all other commercial damages or losses, even if such party *
293 | * shall have been informed of the possibility of such damages. This *
294 | * limitation of liability shall not apply to liability for death or *
295 | * personal injury resulting from such party's negligence to the *
296 | * extent applicable law prohibits such limitation. Some *
297 | * jurisdictions do not allow the exclusion or limitation of *
298 | * incidental or consequential damages, so this exclusion and *
299 | * limitation may not apply to You. *
300 | * *
301 | ************************************************************************
302 |
303 | 8. Litigation
304 | -------------
305 |
306 | Any litigation relating to this License may be brought only in the
307 | courts of a jurisdiction where the defendant maintains its principal
308 | place of business and such litigation shall be governed by laws of that
309 | jurisdiction, without reference to its conflict-of-law provisions.
310 | Nothing in this Section shall prevent a party's ability to bring
311 | cross-claims or counter-claims.
312 |
313 | 9. Miscellaneous
314 | ----------------
315 |
316 | This License represents the complete agreement concerning the subject
317 | matter hereof. If any provision of this License is held to be
318 | unenforceable, such provision shall be reformed only to the extent
319 | necessary to make it enforceable. Any law or regulation which provides
320 | that the language of a contract shall be construed against the drafter
321 | shall not be used to construe this License against a Contributor.
322 |
323 | 10. Versions of the License
324 | ---------------------------
325 |
326 | 10.1. New Versions
327 |
328 | Mozilla Foundation is the license steward. Except as provided in Section
329 | 10.3, no one other than the license steward has the right to modify or
330 | publish new versions of this License. Each version will be given a
331 | distinguishing version number.
332 |
333 | 10.2. Effect of New Versions
334 |
335 | You may distribute the Covered Software under the terms of the version
336 | of the License under which You originally received the Covered Software,
337 | or under the terms of any subsequent version published by the license
338 | steward.
339 |
340 | 10.3. Modified Versions
341 |
342 | If you create software not governed by this License, and you want to
343 | create a new license for such software, you may create and use a
344 | modified version of this License if you rename the license and remove
345 | any references to the name of the license steward (except to note that
346 | such modified license differs from this License).
347 |
348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary
349 | Licenses
350 |
351 | If You choose to distribute Source Code Form that is Incompatible With
352 | Secondary Licenses under the terms of this version of the License, the
353 | notice described in Exhibit B of this License must be attached.
354 |
355 | Exhibit A - Source Code Form License Notice
356 | -------------------------------------------
357 |
358 | This Source Code Form is subject to the terms of the Mozilla Public
359 | License, v. 2.0. If a copy of the MPL was not distributed with this
360 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
361 |
362 | If it is not possible or desirable to put the notice in a particular
363 | file, then You may include the notice in a location (such as a LICENSE
364 | file in a relevant directory) where a recipient would be likely to look
365 | for such a notice.
366 |
367 | You may add additional accurate notices of copyright ownership.
368 |
369 | Exhibit B - "Incompatible With Secondary Licenses" Notice
370 | ---------------------------------------------------------
371 |
372 | This Source Code Form is "Incompatible With Secondary Licenses", as
373 | defined by the Mozilla Public License, v. 2.0.
374 |
--------------------------------------------------------------------------------
/process/test/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | HTML5 Test Page
16 |
17 |
18 |
19 |
20 |
HTML5 Test Page
21 |
This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.
22 |
23 |
66 |
67 |
68 |
Text
69 |
70 |
71 |
Headings
72 |
73 |
74 |
Heading 1
75 |
Heading 2
76 |
Heading 3
77 |
Heading 4
78 |
Heading 5
79 |
Heading 6
80 |
81 |
82 |
83 |
84 |
Paragraphs
85 |
86 |
A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
87 |
88 |
89 |
90 |
91 |
Blockquotes
92 |
93 |
94 |
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
95 |
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Sample output:This is sample output from a computer program.
192 |
Pre-formatted text
193 |
P R E F O R M A T T E D T E X T
194 | ! " # $ % & ' ( ) * + , - . /
195 | 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
196 | @ A B C D E F G H I J K L M N O
197 | P Q R S T U V W X Y Z [ \ ] ^ _
198 | ` a b c d e f g h i j k l m n o
199 | p q r s t u v w x y z { | } ~
