Skip to content

Latest commit

 

History

History
executable file
·
99 lines (63 loc) · 3.66 KB

css.md

File metadata and controls

executable file
·
99 lines (63 loc) · 3.66 KB
Raw

Mobile Boilerplate homepage | Documentation table of contents

The CSS

The Mobile Boilerplate starting CSS includes:

  • Normalize.css.
  • Useful Mobile Boilerplate defaults.
  • Common helpers.
  • Placeholder media queries.

This starting CSS does not rely on the presence of conditional classnames, conditional style sheets, or Modernizr. It is ready to use whatever your development preferences happen to be.

Normalize.css

Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains extensive inline documentation. Please refer to the Normalize.css project for more information.

Mobile Boilerplate defaults

This project includes a handful of base styles that build upon Normalize.css. These include:

  • Basic typography setting to provide improved text readability by default.
  • Tweaks to default image alignment, fieldsets, and textareas.

You are free to modify or add to these base styles as your project requires.

Common helpers

.nocallout

Prevent the callout menu appearing in iOS Safari when the user performs tap & hold.

.pressed

An active button class for Mobile Boilerplate's fastButton helper method.

textarea[contenteditable]

A hack for HTML5 contenteditable attribute on mobile

.gifhidden

A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none

.ir

Add the .ir class to any element you are applying image-replacement to. Be sure to include background-image: url(pathtoimage.png); for that specific element so that image replacement can occur.

.hidden

Add the .hidden class to any elements that you want to hide from all presentations, including screen readers. It could be an element that will be populated later with JavaScript or an element you will hide with JavaScript. Do not use this for SEO keyword stuffing. That is just not cool.

.visuallyhidden

Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. You can use this to hide text that is specific to screen readers but that other users should not see. About invisible content, Hiding content for accessibility, HTML5 Boilerplate issue/research.

.invisible

Add the .invisible class to any element you want to hide without affecting layout. When you use display: none an element is effectively removed from the layout. But in some cases you want the element to simply be invisible while remaining in the flow and not affecting the positioning of surrounding content.

.clearfix

Adding .clearfix to an element will ensure that it always fully contains its floated children. There have been many variants of the clearfix hack over the years, and there are other hacks that can also help you to contain floated children, but the HTML5 Boilerplate currently uses the micro clearfix.

Media Queries

The Mobile Boilerplate provides a default placeholder Media Query that can be used to override the primary 'mobile first' styles, providing adjustments for wider viewports (such as tablet devices). It is recommended that you adapt these Media Queries based on the content of your mobile web app, rather than mirroring the fixed dimensions of specific devices.

The mobile boilerplate also provides a second placeholder Media Query to help target high density screens.