A repository for the development of the HTML5 Boilerplate CSS file, main.css

  • By H5BP
  • Last update: Dec 21, 2022
  • Comments: 12

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.

GitHub Super-Linter

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 resulting node_modules/main.css/distfolder
  • Install with yarn: yarn add main.css and pull in what you need from the resulting node_modules/main.css/distfolder

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 the javascript: 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.

Github

https://github.com/h5bp/main.css

Comments(12)

  • 1

    Ship v3.0.0

    This Issue is to track progress of releasing main.css v3.0.0 🚢

    Release Notes

    • Rename sr-only' class tovisually-hidden` #109 (this is a breaking change so that's why version is bumped to v3)
    • Remove print thead rule #101
    • Remove Vendor-prefixed ::selection #93
    • Lots of dev dependency and npm publishing updates

    Todo List

    • [x] Change 'master' to 'main' as default branch name (@roblarsen)
    • [x] Update CHANGELOG.md (@coliff)
    • [x] Publish update GitHub/npm (@roblarsen)
  • 2

    Build script to check and report of any Stylelint issues

    I'm submitting a ...

    • [ ] bug report
    • [x] feature request
    • [ ] other (Please do not submit support requests here (below))

    It'd be good if the Gulp build script automatically checked and either fix or report/warn of any Stylelint issues.

  • 3

    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.

  • 4

    Fix print links for table section

    fix #19

    Types of changes

    • [x] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist:

    • [x] My code follows the code style of this project.
    • [x] My change requires a change to the documentation.
    • [x] I have updated the documentation accordingly.
    • [x] I have read the CONTRIBUTING document.
    • [ ] I have added tests to cover my changes.
    • [ ] All new and existing tests passed.

    This pull request doesn't have any tests.

  • 5

    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)

    • [x] keep LICENSE.txt and remove the extensionless LICENSE
    • [x] there's a jshint config added that should probably be removed if we're using eslint instead
    • [x] exclude package-lock.json from being included (add it to the .gitignore file)
    • [x] I think it makes sense to add autoprefixer to the build process... but we could do this later in a new PR.
    • [x] We need to expand the README - important thing is to mention browser support.(which would make sense to match latest HTML5Boilerplate)
    • [x] remove main.css from root
  • 6

    feat: SCSS

    Types of changes

    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)
    • [x] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist:

    • [x] My code follows the code style of this project.
    • [x] My change requires a change to the documentation.
    • [ ] I have updated the documentation accordingly.
    • [x] I have read the CONTRIBUTING document.
    • [ ] I have added tests to cover my changes.
    • [ ] All new and existing tests passed.

    relevant to: https://github.com/h5bp/html5-boilerplate/issues/2274 https://github.com/h5bp/html5-boilerplate/pull/2282

  • 7

    .sr-only used on inputs causes huge problems in some scrolling setups

    The current sr-only utility class uses position: 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:

    position: fixed;
left: 0;
top: 0;
  • 8

    property alphabetization

    Types of changes

    • [x] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist:

    • [x] My code follows the code style of this project.
    • [ ] My change requires a change to the documentation.
    • [ ] I have updated the documentation accordingly.
    • [x] I have read the CONTRIBUTING document.
    • [ ] I have added tests to cover my changes.
    • [ ] All new and existing tests passed.
  • 9

    Generate a list of the original contributors to main.css/style.css

    • [ ] Tally up all the contributors
    • [ ] Add a contibutors.md file, listing all the original contributors (I will work with whoever picks this up to craft the language in the file.)
    • [ ] 🚀

    19 for this version and... 9 here and... 19 here

  • 10

    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.

  • 11

    Ship v2.1.0

    This Issue is to track progress of releasing main.css v2.1.0 🚢

    Release Notes

    • Updates to stylelint-config-standard and add lint script (#55 )
    • Add .npmignore (#54 )
    • Add [hidden] attribute support (#53 )
    • Update _print.css (#52 )
    • Remove .browserupgrade class (#51 )
    • Update Supported browsers (#58 )

    Todo List

    • Update CHANGELOG.md
    • Publish v2.1.0 on GitHub (@roblarsen )
    • Publish v2.1.0 on NPM (@roblarsen )
  • 12

    macOS - VoiceOver / Chrome announcing visually hidden text out of order

    I'm submitting a ...

    • [x] bug report
    • [ ] feature request
    • [ ] other (Please do not submit support requests here (below))

    Steps to reproduce

    1. Visit https://codepen.io/joe-watkins/pen/OjpqxL with Safari or Chrome and VoiceOver activated.
    2. Tab to each link and listen to how they are announced.

    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; and display: inline-block; appears to solve this. e.g.

    .visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: relative; // different - for reading order in macOS VO
	display: inline-block; // new - for reading order in macOS VO
}

    SR Tested (works in)

    • Win Edge,IE11,FF,Chrome JAWS 18/17
    • Win IE11,FF,Chrome NVDA
    • macOS Seirra Safari,Chrome,FF VoiceOver

    Browsers tested (works - hides text in)

    • Win Edge, IE11, IE10, IE9, IE8, FF 53, Chrome 60
    • macOS Seirra Safari 10.2, Chrome 60, FF 54

    Video screencast of experience

    Everything Is AWESOME

    I'd love to get some thoughts on this and I'd be happy to create a PR if everyone is into it :)

Popular Tag

Related