├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── app-reset.css
├── index.html
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Tags
6 | *.tags
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 |
13 | # Directory for instrumented libs generated by jscoverage/JSCover
14 | lib-cov
15 |
16 | # Coverage directory used by tools like istanbul
17 | coverage
18 |
19 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
20 | .grunt
21 |
22 | # node-waf configuration
23 | .lock-wscript
24 |
25 | # Compiled binary addons (http://nodejs.org/api/addons.html)
26 | build/Release
27 |
28 | # Dependency directory
29 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
30 | node_modules
31 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 | All notable changes to this project will be documented in this file.
3 | This project adheres to [Semantic Versioning](http://semver.org/).
4 |
5 | ## [2.0.0] 23.11.22
6 | ### Changes
7 | - most browser proprietary property/values now removed. Browsers have moved on substantially since last version!
8 |
9 | ## [1.0.2] 2016-03-16
10 | ### Fix
11 | - fix for contenteditable user-select
12 | - reverted div, span and a using flexbox by default
13 |
14 | ### Add
15 | - a Change Log (this file)!
16 |
17 | ## [1.0.1] - 2016-02-02
18 | ### Fix
19 | - Adding user-select fix for Safari and iOS
20 |
21 | ## [1.0.0] - 2016-01-25
22 | ### Add
23 | - Initial release of App-Reset containing current essential resets
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Ben Frain
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # app-reset.css
2 | A minimal CSS reset specifically for web applications
3 |
4 | ## Why use app-reset.css?
5 | Every time I make something 'appy' I have to switch off or reset a bunch of user agent styles so that I can use the correct element for the job at hand but style it inline with the project I'm building.
6 |
7 | App-reset is intended specifically for web applications.
8 |
9 | ## Accessibility Notes
10 | These resets target HTML elements that typically receive styling defaults by User Agents that I always need to 'undo'.
11 |
12 | Be aware that some of these resets have a negative impact on the default usability and accessibility of a web page. Therefore, ensure you add an equivalent accessible style back that matches your project aesthetic.
13 |
14 | ## You'll want to run this through Autoprefixer
15 | You'll typically need to run this through Autoprefixer (https://github.com/postcss/autoprefixer) for production.
16 |
17 | ## Grab it via NPM
18 | If you want to install via NPM you can run `npm install app-reset` and it will be available in your node_modules folder. NPM info here: [https://www.npmjs.com/package/app-reset](https://www.npmjs.com/package/app-reset).
19 |
20 | ###
21 | Suggestions? Comment or open an issue or find me at https://twitter.com/benfrain or https://benfrain.com
22 |
--------------------------------------------------------------------------------
/app-reset.css:
--------------------------------------------------------------------------------
1 | /*
2 | # App reset by Ben Frain @benfrain / benfrain.com
3 |
4 | An opinionated set of resets suitable for building web applications.
5 |
6 | Latest: https://github.com/benfrain/app-reset
7 |
8 | # Accessibility Notes
9 | These resets target HTML elements that typically receive styling defaults by User Agents that I always need to 'undo'.
10 |
11 | Be aware that some of these resets have a negative impact on the default usability and accessibility of a web page. Therefore, ensure you add an equivalent accessible style back that matches your project aesthetic.
12 |
13 | If you are targeting old browsers, you may want to run this through Autoprefixer (https://github.com/postcss/autoprefixer) for production.
14 | */
15 |
16 |
17 | :root {
18 | /* Allows height/width animations to auto across document */
19 | interpolate-size: allow-keywords;
20 | /* Opts you into getting the users light/dark mode preference - maybe you don't want that though! */
21 | color-scheme: light dark;
22 | }
23 |
24 | html {
25 | /*Hat tip to @thierrykoblentz for this approach: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
26 | box-sizing: border-box;
27 | --fontStack: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
28 | Tahoma, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans",
29 | sans-serif;
30 | font-family: var(--fontStack);
31 | /* prevents that flash of background on a button in mobile when you tap for too long */
32 | -webkit-tap-highlight-color: transparent;
33 | }
34 |
35 | /*Yes, the universal selector. No, it isn't slow: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/*/
36 | * {
37 | /*This prevents users being able to select text. Stops long presses in iOS bringing up copy/paste UI for example*/
38 | user-select: none;
39 | /* Most devs find border-box easier to reason about. However by inheriting we can mix box-sizing approaches.*/
40 | box-sizing: inherit;
41 | }
42 |
43 | *:before,
44 | *:after {
45 | box-sizing: inherit;
46 | }
47 |
48 | body,
49 | h1,
50 | h2,
51 | h3,
52 | h4,
53 | h5,
54 | h6,
55 | p {
56 | /*We will be adding our own margin to these elements as needed.*/
57 | margin: 0;
58 | /*You'll want to set font-size as needed.*/
59 | font-size: 1rem;
60 | /*No bold for h tags unless you want it*/
61 | font-weight: 400;
62 | }
63 |
64 | a {
65 | text-decoration: none;
66 | color: inherit;
67 | }
68 |
69 | /*No bold for b tags by default*/
70 | b {
71 | font-weight: 400;
72 | }
73 |
74 | /*Prevent these elements having italics by default*/
75 | em,
76 | i {
77 | font-style: normal;
78 | }
79 |
80 | /*IMPORTANT: This removes the focus outline for most browsers. Be aware this is a backwards accessibilty step!*/
81 | a:focus,
82 | button:focus {
83 | outline: 0;
84 | }
85 |
86 | /* The button element tends to get a lot of default styles which we largely undo here. We set text-alignment (usually set to center by UA style sheet) and the font-family to inherit from your own styles instead. */
87 | button {
88 | appearance: none;
89 | background-color: transparent;
90 | border: 0;
91 | padding: 0;
92 | text-align: inherit;
93 | font-family: inherit;
94 | font-weight: inherit;
95 | font-size: inherit;
96 | /* Safari adds margin */
97 | margin: 0;
98 | }
99 |
100 | button:hover {
101 | cursor: pointer;
102 | }
103 |
104 | input,
105 | fieldset {
106 | appearance: none;
107 | border: 0;
108 | padding: 0;
109 | margin: 0;
110 | /*inputs and fieldset defaults to having a min-width equal to its content in Chrome and Firefox (https://code.google.com/p/chromium/issues/detail?id=560762), we may not want that*/
111 | min-width: 0;
112 | /*Reset the font size and family*/
113 | font-size: inherit;
114 | font-family: inherit;
115 | }
116 |
117 | /*This switches the default outline off when an input receives focus (really important for users tabbing through with a keyboard) so ensure you put something decent in for your input focus instead!!*/
118 | input:focus {
119 | outline: 0;
120 | }
121 |
122 | /*Removes the little spinner controls for number type inputs (WebKit browsers/forks only)*/
123 | input[type="number"]::-webkit-inner-spin-button,
124 | input[type="number"]::-webkit-outer-spin-button {
125 | appearance: none;
126 | }
127 |
128 | /*SVG defaults to display: inline which I dislike. Inline-block or inline-flex will render white space on SVG elements in HTML (where you would have defs and symbols) if the container isn't a flex box or the font-size set to 0 to crush the whitespace */
129 | svg {
130 | display: block;
131 | }
132 |
133 | img {
134 | /*Make images behave responsively. Here they will scale up to 100% of their natural size*/
135 | max-width: 100%;
136 | /*Make images display as a block (UA default is usually inline)*/
137 | display: block;
138 | }
139 |
140 | /* Switching on box-sizing: border-box by default; toggle this off if you want more granular control */
141 | body {
142 | box-sizing: border-box;
143 | }
144 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | App Reset
7 |
8 |
9 |
10 |