Ilmastoveivi 2019

60 210

HTML5 Boilerplate homepage | Documentation table of contents

The CSS

HTML5 Boilerplate’s CSS includes:

This starting CSS does not rely on the presence of conditional class names, conditional style sheets, or Modernizr, and it is ready to use no matter what your development preferences happen to be.

Normalize.css

In order to make browsers render all elements more consistently and in line with modern standards, we include Normalize.css — a modern, HTML5-ready alternative to CSS resets.

As opposed to CSS resets, Normalize.css:

For more information about Normalize.css, please refer to its project page, as well as this blog post.

Useful defaults

Several base styles are included that build upon Normalize.css. These styles:

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

Common helpers

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.

.visuallyhidden

The visuallyhidden class can be added to any element that you want to hide visually, while still have its content accessible to screen readers.

See also:

N.B. The visuallyhidden class can be an accessibility issue for users using high contrast modes.

Use JavaScript to detect when images are disabled and remove the CSS visually hidden display state of the text alternative. Use JavaScript to detect when Windows high contrast mode is enabled and remove the CSS visually hidden display state of the text alternative.

.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.

N.B. Try to stay away from, and don’t use the classes specified above for keyword stuffing as you will harm your site’s ranking!

.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.

Media Queries

HTML5 Boilerplate makes it easy for you to get started with a mobile first and responsive web design approach to development. But it’s worth remembering that there are no silver bullets.

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)).

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:

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.

1

2

3

Blogi

Lapset ja nuoret ovat edelleen yksin, viimeisin lakko sen taas osoitti.

10.10.2019

Ilmastoveivi2019. Nollasta sataan muutamassa kuukaudessa. Tavalliset skidit ja jangsterit selvittivät, mitä ilmastonmuutokselle pitää tehdä EU-tasolla, miten se pitää tehdä, mistä pitää nyt ihan oikeasti alkaa puhumaan, ehdotti miten toimitaan, sai sille tuen ympäri kansaa ja maata, vei asiansa läpi korkeimpaan maata johtavaan paperiin, ojensi kätensä: kattokaa, me tehtiin absoluuttisesti kaikki mitä voitiin.

Vetoomus vai lihattomuus?

31.05.2019

Ilmastokeskustelussa käydään usein debatteja siitä, tulisiko meidän keskittyä poliittisiin toimiin vai henkilökohtaisiin ilmastotekoihin. Onneksi meidän ei tarvitse valita vain toista, sillä molempia lähestymistapoja tarvitaan, ja ne tukevat toisiaan.