Pure.css Miscellaneous Stuff

I’m exploring Pure.css for responsive design and I am running across things that I’ve never seen before. So I don’t have to look them up again, this post is a collection of them and some general observations about the css.

For some reason the GitHub repository for Pure.css doesn’t contain the actual base CSS. However, you can find it at the Yahoo CDN by removing the -min portion of the minified CSS link.
http://yui.yahooapis.com/pure/0.6.0/pure.css

The first 521 lines are from Normalize.css and some additions from the YUI team that basically clean up browser differences so that the Pure code will work the same on all browsers—even very old ones and obscure ones.

IE Hacks
If you browse through the code, you might notice lots of lines starting with asterisks. e.g.


    display: inline-block;
    *display: inline;

    width: 4.1667%;
    *width: 4.1357%;

Once again, StackOverflow provides an explanation.

It is a syntax error. So in CSS, it makes the property name invalid and stops it being parsed. Thanks to bugs in browsers, it is sometimes ignored.

[Therefore] the second declaration will be applied by IE7 and older (thus overriding the first declaration), while other browsers will ignore it and continue applying the first declaration instead.

While I was looking this up, I also found another IE hack.

\9 is a “CSS hack” specific to Internet Explorer 7, 8, & 9.

This simply means that the one specific line of CSS ending with a \9; in place of the ; is only valid in IE 7, 8, & 9.

width: 500px\9; means that a width of 500 pixels (same result as width: 500px;) will only be applied while using IE 7, 8, & 9.

All other browsers will ignore width: 500px\9; entirely, and therefore not apply width: 500px; to the element at all.

It turns out that \0 can be used for IE 10.

:not

Pseudo-class :not
The :not pseudo-class represents an element that is not represented by its argument.

There aren’t many occasions where this is used in the file. The major one is to give padding, display, and border parameters when the a form is not one of the 14 form types listed in the previous block of css. e.g. .pure-form input:not([type]) {

Attribute Wildcard Selector


.pure-g [class *= "pure-u"] {
    font-family: sans-serif;
}

The *= is an attribute wildcard selector. In the example above, it looks for any child element under .pure-g that has a class that contains pure-u. Since Pure Grids consist of two types of classes: the grid class (pure-g) and within the grid class the unit classes (pure-u or pure-u-*) it basically resets all of the unit classes to use sans-serf as the default.

From the documentation, suppose you want to change the font to a serif font. Use this code:


html, button, input, select, texture, .pure-g [class *= "pure-u"] {
    font-family: Georgia, Times, "Times New Roman", serif;
}

Media Queries
The responsive part of responsive design relies on media queries. In the past, there were only two that you had to worry about—print and screen. With the advent of smartphones and tablets, you need to be able to adapt the content to the screen size in ways that were not necessary before. Media queries can be used to check the width and height of the viewport, the width and height of the device, the device orientation, and the device resolution, and other properties that you might need for your design. A huge list can be found at W3Schools. Pure.css only uses the screen media type along with the screen width expressed in ems to provide styling for five sizes. You refer to the sizes using suffixes on the pure unit styles. No suffix is for screens less than 35.5 ems (568 pixels), -sm is for the next size up, followed by -md. -lg and -xl are for the largest screens.

As with the css for the grid, you can find it at the Yahoo CDN by removing the -min portion of the minified CSS link.
http://yui.yahooapis.com/pure/0.6.0/grids-responsive.css

As they explain on their site. Using ems for media queries is much better for people who set their browser default to a larger size and for users who zoom in to the content.

Font size
Pure uses the default font size for the browser for all of the elements. Combined with the media query above, this means that the font size will scale with the viewport and zoom level so you don’t need to worry about it. If you do want to make the sizes vary from the default, e.g. possibly with captions or super-emphasis, then use percentages to increase the size.

One interesting font definition that I had not seen before is assigning the font size and line height at the some time. This code makes italic 85% of the normal size for the element but keeps the line height at 1 em so that it doesn’t interrupt the flow.


font: italic 85%/1 arial, sans-serif;

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.