main.css
A repository for the development of the HTML5 Boilerplate CSS file, style.css
.
Historically, the file shipped with HTML5 Boilerplate was called main.css
, hence the name of this project. It's since been renamed to style.css
. Just in case you were confused.
This project includes both the whole main.css
file as well as component files used to generate main.css
. This way you can either pull in the whole file, as we do in HTML5 Boilerplate (renaming it to style.css
) or you can pull in the individual files as needed.
Quick start
Choose one of the following options:
- Download as part of the latest stable release of HTML5 Boilerplate from html5boilerplate.com.
- Clone the git repo —
git clone https://github.com/h5bp/main.css.git
- and checkout the tagged release you'd like to use. - Install with npm:
npm install main.css
and pull in what you need from the resultingnode_modules/main.css/dist
folder - Install with yarn:
yarn add main.css
and pull in what you need from the resultingnode_modules/main.css/dist
folder
Features
The project contains the following files, which combine to create the different sections of main.css.
_base.css
Several base styles are included. These styles:
- provide basic typography settings that improve text readability
- protect against unwanted
text-shadow
during text highlighting - tweak the default alignment of some elements (e.g.:
img
,video
,fieldset
,textarea
)
_helpers.css
Along with the base styles, we also provide some commonly used helper classes.
.hidden
The hidden
class can be added to any element that you want to hide visually and from screen readers. It could be an element that will be populated and displayed later, or an element you will hide with JavaScript.
.visually-hidden
The visually-hidden
class can be added to any element that you want to hide visually, while still have its content accessible to screen readers.
.invisible
The invisible
class can be added to any element that you want to hide visually and from screen readers, but without affecting the layout.
As opposed to the hidden
class that effectively removes the element from the layout, the invisible
class will simply make the element invisible while keeping it in the flow and not affecting the positioning of the surrounding content.
.clearfix
The clearfix
class can be added to any element to ensure that it always fully contains its floated children.
Over the years there have been many variants of the clearfix hack, but currently, we use the micro clearfix.
_mqs.css
We include placeholder media queries to help you build up your mobile styles for wider viewports and high-resolution displays. It's recommended that you adapt these media queries based on the content of your site rather than mirroring the fixed dimensions of specific devices.
If you do not want to take the mobile first approach, you can simply edit or remove these placeholder media queries. One possibility would be to work from wide viewports down, and use max-width
media queries instead (e.g.: @media only screen and (max-width: 480px)
).
_print.css
Lastly, we provide some useful print styles that will optimize the printing process, as well as make the printed pages easier to read.
At printing time, these styles will:
-
strip all background colors, change the font color to black, and remove the
text-shadow
— done in order to help save printer ink and speed up the printing process -
underline and expand links to include the URL — done in order to allow users to know where to refer to
(exceptions to this are: the links that are fragment identifiers, or use thejavascript:
pseudo protocol) -
expand abbreviations to include the full description — done in order to allow users to know what the abbreviations stands for
-
provide instructions on how browsers should break the content into pages and on orphans/widows, namely, we instruct supporting browsers that they should:
- prevent block quotations, preformatted text, images and table rows from being split onto two different pages
- ensure that headings never appear on a different page than the text they are associated with
- ensure that orphans and widows do not appear on printed pages
The print styles are included along with the other css
to avoid the additional HTTP request. Also, they should always be included last, so that the other styles can be overwritten.
Browser support
We use the following browserlist configuration:
" browserslist": [
"> 0.5%",
"last 2 versions",
"Firefox ESR",
"not dead",
"IE 11"
],
That configuration translates to this full list of browsers.
Contributing
Anyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the guidelines:
License
The code is available under the MIT license.
Ship v3.0.0
This Issue is to track progress of releasing main.css v3.0.0 🚢
Release Notes
sr-only' class to
visually-hidden` #109 (this is a breaking change so that's why version is bumped to v3)thead
rule #101::selection
#93Todo List
Build script to check and report of any Stylelint issues
I'm submitting a ...
It'd be good if the Gulp build script automatically checked and either fix or report/warn of any Stylelint issues.
Add blank lines in print css and fix block comments.
css files leave a blank line in between every block. But in
_print.css
this is not the case, which makes is less readable. The block comments in this file have extra whitespace at the beginning of consecutive lines which has been removed.Fix print links for table section
fix #19
Types of changes
Checklist:
This pull request doesn't have any tests.
Break main.css into multiple files
This PR breaks main.css into multiple files, adds a build steps that concats them for regular distribution and also copies the the component files to
dist
so that they can be ingested individually into a project.(forgot the WIP label)
feat: SCSS
Types of changes
Checklist:
relevant to: https://github.com/h5bp/html5-boilerplate/issues/2274 https://github.com/h5bp/html5-boilerplate/pull/2282
.sr-only used on inputs causes huge problems in some scrolling setups
The current
sr-only
utility class usesposition: absolute
with no coordinates as the main method to remove and stop element from affecting layout.This doesn't play well with some scrolling setups combined with browsers new "feature" of scrolling to elements it thinks user is interacting with.
The problem is isolated and explained here (affects Chrome): https://output.jsbin.com/tamuvac
The fix would be to instead use:
property alphabetization
Types of changes
Checklist:
Generate a list of the original contributors to main.css/style.css
19 for this version and... 9 here and... 19 here
Idea: Change 'master' to 'main' as default branch name
The default branch name for new repos in GitHub is now
main
. Many companies and major open source projects like Microsoft, IBM, Twitter, Red Hat, MySQL, the Linux kernel, and OpenBSD have changed their default branch to main.I think it'd be good to change our default branch to
main
too.It's a particularly fitting name for this repo. :-)
It's easy to do and only takes a few minutes.
Ship v2.1.0
This Issue is to track progress of releasing main.css v2.1.0 🚢
Release Notes
.npmignore
(#54 )_print.css
(#52 ).browserupgrade
class (#51 )Todo List
CHANGELOG.md
macOS - VoiceOver / Chrome announcing visually hidden text out of order
I'm submitting a ...
Steps to reproduce
Expected Results
The visually hidden text using HTML5 boilerplate's
.visuallyhidden {}
will be announced in the order that it is within the markup.Actual Results
The order of the text is not announced does not match the markup order. Visually hidden text is announced before visible text copy.
Potential fix
After some testing, I've found that using
position: relative;
anddisplay: inline-block;
appears to solve this. e.g.SR Tested (works in)
Browsers tested (works - hides text in)
Video screencast of experience
I'd love to get some thoughts on this and I'd be happy to create a PR if everyone is into it :)