-
Notifications
You must be signed in to change notification settings - Fork 114
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #51 from mozdevs/organize
Attempt to organize an initial release
- Loading branch information
Showing
7 changed files
with
197 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| # Changelog & Release Notes | ||
|
|
||
| ## v0.1.0 - unreleased | ||
|
|
||
| - Organize the existing proposed & discussed remedies into three categories: | ||
| - Universally recommended remedies in `remedy.css` | ||
| - Optional remedies worth considering in `reminders.css` | ||
| - Specialized remedies (such as `quotes.css`) in their own files |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| # Contributing to CSS Remedy | ||
|
|
||
| We'd love to have you contribute to this project. | ||
| You can get involved by | ||
| [creating or commenting on an issue](https://github.com/mozdevs/cssremedy/issues). | ||
|
|
||
| This repository is governed by Mozilla's code of conduct and etiquette guidelines. For more details, please read the [Mozilla Community Participation Guidelines](https://www.mozilla.org/en-US/about/governance/policies/participation/). | ||
|
|
||
| ## Pull Reguests | ||
|
|
||
| We're also happy to take pull requests, | ||
| both for fixing bugs/typos | ||
| and submitting new remedies. | ||
| For larger changes, | ||
| it's often best to file an issue for discussion first. | ||
|
|
||
| The code is organized into: | ||
|
|
||
| - A core `remedy.css` that we recommend using broadly across most projects. | ||
| - A secondary `reminders.css` with more opinionated or situational remedies that should be reviewed and considered on a case-by-case basis. | ||
| - Additional specialized remedy files (such as `quotes.css`) that can be used as-needed, but may not be required generally. | ||
|
|
||
| The `process` folder contains related materials: | ||
|
|
||
| - Other resets | ||
| - UA stylesheets from various browsers | ||
| - An html file to test against |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,107 +1,99 @@ | ||
| /* Global Remedies | ||
| ******************/ | ||
|
|
||
| /* Use border-box by default, globally */ | ||
| *, ::before, ::after { box-sizing: border-box; } | ||
|
|
||
| /* This project is under construction. It's not ready for release yet. As of Feb 11, 2019. */ | ||
|
|
||
| /* | ||
| * 1. Consistent line spacing... | ||
| * CSS Inline Layout Module Level 3: https://drafts.csswg.org/css-inline-3/#line-sizing-property | ||
| * 2. Improve spacing of punctuation marks and script changes in CJK languages | ||
| * CSS Text Module Level 4: https://drafts.csswg.org/css-text-4/#text-spacing-property | ||
| */ | ||
| html { | ||
| line-sizing: normal; | ||
| text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric; | ||
| } | ||
|
|
||
| /* Remove the tiny space around the edge of the page */ | ||
| body { margin: 0; } | ||
|
|
||
| *, ::before, ::after { box-sizing: border-box; } /* Switch to border-box for box-sizing. */ | ||
|
|
||
| /* Immediately jump any animation to the end point if the user has set their device to "prefers reduced motion". */ | ||
| /* This could create bad, unintended consequences. Remove as needed, and write your own appropriate code for prefers-reduced-motion. */ | ||
| @media (prefers-reduced-motion: reduce) { | ||
| * { | ||
| animation-duration: 0.001s !important; | ||
| transition-duration: 0.001s !important; | ||
| animation-iteration-count: 1 !important; | ||
| } | ||
| } | ||
| /* Headings | ||
| ***********/ | ||
|
|
||
| body { | ||
| margin: 0; /* Remove the tiny space around the edge of the page */ | ||
| } | ||
| /* Switch to rem units for headings */ | ||
| /* @@@ Initial values are based on existing browser defaults */ | ||
| h1 { font-size: 2rem; } | ||
| h2 { font-size: 1.5rem; } | ||
| h3 { font-size: 1.17rem; } | ||
| h4 { font-size: 1.00rem; } | ||
| h5 { font-size: 0.83rem; } | ||
| h6 { font-size: 0.67rem; } | ||
|
|
||
| /* Switch to using rem units for typography. Fix line-height on headlines. */ | ||
| h1 { | ||
| font-size: 2rem; /* Make all of the H1 tags large, remove nested-shrinking sizes. */ | ||
| margin: 0.67em 0; | ||
| } | ||
| h2 { | ||
| font-size: 1.5rem; | ||
| } | ||
| h3 { | ||
| font-size: 1.17rem; | ||
| } | ||
| h4 { | ||
| font-size: 1.00rem; | ||
| } | ||
| h5 { | ||
| font-size: 0.83rem; | ||
| } | ||
| h6 { | ||
| font-size: 0.67rem; | ||
| } | ||
| /* Keep h1 margins consistent, even when nested */ | ||
| h1 { margin: 0.67em 0; } | ||
|
|
||
| h2, h3, h4, h5, h6{ | ||
| line-height: 1; | ||
| } | ||
|
|
||
| /* Improve readability */ | ||
| p, ul, ol, dl, address { | ||
| line-height: 1.5; | ||
| } | ||
| /* Typography | ||
| *************/ | ||
|
|
||
| /* Overflow by default is bad */ | ||
| pre { white-space: pre-wrap; } | ||
|
|
||
| pre { | ||
| white-space: pre-wrap; /* Overflow by default is bad. */ | ||
| } | ||
| /* Solid, thin horizonatal rules */ | ||
| hr { border: 0.5px solid; } | ||
|
|
||
| hr { | ||
| border: .5px solid; | ||
| } | ||
|
|
||
| /* Embedded Elements | ||
| ********************/ | ||
|
|
||
| /* Are browsers now consistent with margin & padding on lists? | ||
| See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation */ | ||
| nav ul { | ||
| list-style: none; | ||
| } | ||
| /* Add zero-width-space to prevent VoiceOver disable | ||
| See: https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/ */ | ||
| nav li:before { | ||
| content: "\200B"; | ||
| /* | ||
| * 1. Block display is usually what we want | ||
| * 2. Remove strange space-below when inline | ||
| * 3. Responsive by default | ||
| */ | ||
| img, svg, video, canvas, audio, iframe, embed, object { | ||
| display: block; | ||
| vertical-align: middle; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| img, video, canvas, audio, iframe, embed, object { | ||
| display: block; /* Switch display mode to block, since that's what we usually want for images. */ | ||
| vertical-align: middle; /* If you override, and make an image inline, it's likely you'll want middle vertical alignment. */ | ||
| } | ||
| img, video { | ||
| max-width: 100%; /* Make images and video flexible by default. */ | ||
| height: auto; /* Ensure images and video maintain their aspect ratio when max-width comes into play. */ | ||
| } | ||
| img { | ||
| border-style: none; /* Remove the border on images inside links in IE 10 and earlier. */ | ||
| /* | ||
| * Maintain intrinsic aspect ratios when `max-width` is applied | ||
| * (iframe, embed, and object have no intrinsic ratio, set height explicitly) | ||
| */ | ||
| img, svg, video, canvas { | ||
| height: auto; | ||
| } | ||
|
|
||
| /* In English, when styling the <q> element, use curly quotes instead of straight quotes. */ | ||
|
|
||
| /* Code for this is now in the quotes.css file */ | ||
| /* | ||
| * There is no good reason elements default to 300px, | ||
| * and audio files are unlikely to come with a width attribute | ||
| */ | ||
| audio { width: 100%; } | ||
|
|
||
|
|
||
| /* Old Browsers | ||
| ***************/ | ||
|
|
||
| /* Remove the border on images inside links in IE 10 and earlier */ | ||
| img { border-style: none; } | ||
|
|
||
| /* Support upcoming properties that haven't been broadly implemented yet, | ||
| but for which the initial value and legacy behavior is not be the best behavior. | ||
| */ | ||
| /* Hide the overflow in IE 10 and earlier */ | ||
| svg { overflow: hidden; } | ||
|
|
||
| /* Consistent line spacing, which does not unnecessarily grow to accommodate things that would fit anyway */ | ||
| /* From CSS Inline Layout Module Level 3: https://drafts.csswg.org/css-inline-3/#line-sizing-property */ | ||
| :root { | ||
| line-sizing: normal; | ||
| /* Default block display on HTML5 elements */ | ||
| article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { | ||
| display: block; | ||
| } | ||
|
|
||
| /* Improve spacing of punctuation marks and at script changes in CJK languages */ | ||
| /* From CSS Text Module Level 4: https://drafts.csswg.org/css-text-4/#text-spacing-property */ | ||
| :root { | ||
| text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric; | ||
| /* | ||
| * 1. Add the correct box sizing in IE 10 | ||
| * 2. Remove the padding in IE 10 | ||
| */ | ||
| [type='checkbox'], | ||
| [type='radio'] { | ||
| box-sizing: border-box; | ||
| padding: 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /* | ||
| * These are not universally recommended remedies, | ||
| * but they are good to consider, | ||
| * and they might work for you. | ||
| */ | ||
|
|
||
|
|
||
| /* Nav Lists | ||
| ************/ | ||
|
|
||
| /* | ||
| * List styling is not usually desired in navigation, | ||
| * but this also removes list-semantics for screen-readers | ||
| * See: https://github.com/mozdevs/cssremedy/issues/15 | ||
| */ | ||
| nav ul { | ||
| list-style: none; | ||
| } | ||
|
|
||
| /* | ||
| * 1. Add zero-width-space to prevent VoiceOver disable | ||
| * 2. Absolute position ensures no extra space | ||
| * See: https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/ | ||
| */ | ||
| nav li:before { | ||
| content: "\200B"; | ||
| position: absolute; | ||
| } | ||
|
|
||
|
|
||
| /* Reduced Motion | ||
| *****************/ | ||
|
|
||
| /* | ||
| * 1. Immediately jump any animation to the end point | ||
| * 2. Remove transitions & fixed background attachment | ||
| * See: https://github.com/mozdevs/cssremedy/issues/11 | ||
| */ | ||
| @media (prefers-reduced-motion: reduce) { | ||
| *, ::before, ::after { | ||
| animation-delay: -1s !important; | ||
| animation-duration: 1s !important; | ||
| animation-iteration-count: 1 !important; | ||
| background-attachment: initial !important; | ||
| transition-duration: 0s !important; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| /* Line Heights | ||
| ***************/ | ||
|
|
||
| /* | ||
| * The default `normal` line-height is tightly spaced, but takes font-metrics into account. | ||
| * Looser spacing may improve readability, but may cause problems in some scripts. | ||
| * See: https://github.com/mozdevs/cssremedy/issues/7 | ||
| */ | ||
| html { line-height: 1.5; } | ||
| h1, h2, h3, h4, h5, h6 { line-height: 1.25; } | ||
| caption, figcaption, label, legend { line-height: 1.375; } |