12

I am studying a free css template called zerofour found at http://html5up.net/zerofour/, and running across a css coding that I have never seen before. In the HTML, some divs have class such as "4u", but when I check the css files, this is the only text section that has anything with those terms, and it looks like this:

/* Grid */

/* Cells */

    .\31 2u { width: 100% }
    .\31 1u { width: 91.6666666667% }
    .\31 0u { width: 83.3333333333% }
    .\39 u { width: 75% }
    .\38 u { width: 66.6666666667% }
    .\37 u { width: 58.3333333333% }
    .\36 u { width: 50% }
    .\35 u { width: 41.6666666667% }
    .\34 u { width: 33.3333333333% }
    .\33 u { width: 25% }
    .\32 u { width: 16.6666666667% }
    .\31 u { width: 8.3333333333% }
    .\-11u { margin-left: 91.6666666667% }
    .\-10u { margin-left: 83.3333333333% }
    .\-9u { margin-left: 75% }
    .\-8u { margin-left: 66.6666666667% }
    .\-7u { margin-left: 58.3333333333% }
    .\-6u { margin-left: 50% }
    .\-5u { margin-left: 41.6666666667% }
    .\-4u { margin-left: 33.3333333333% }
    .\-3u { margin-left: 25% }
    .\-2u { margin-left: 16.6666666667% }
    .\-1u { margin-left: 8.3333333333% }

When I remove the 4u class using chrome developer, the page is affected. However, when I delete this section from the css file, nothing happens. I am quite stumped in this, and it is really bugging me!

5 Answers5

6

Read this spec: http://www.w3.org/International/questions/qa-escapes#cssescapes. The characters following the back slash represent a unicode code point. The space is required if the next character is allowed as part of the hexadecimal values.

Chandranshu
  • 3,669
  • 3
  • 20
  • 37
4

It looks like something similar to Foundation. I'm new to Html5up as well but that's my guess. How it normally works (in Foundation at least) you have a "row" which is the entire width of your page (normally). Within that row you have columns (or "u" here for some reason), with each column taking up the same % of width. Usually the standard for Foundation is 12 columns/row and I'm guessing its the same here. So basically if you want the first 50% of a row to be a giant div followed by two divs that split the remaining 50% it would look like:

<div class="row">
  <div class="6u">
    Big Div Here.
  </div>

  <div class="3u">
    Small Div Here.
  </div>

  <div class="3u">
    Small Div here (same size as the other small div)>
  </div>
</div>  (This ends the row).

The reason for all this madness being it makes it way easier to make your page responsive (which is one of the main points of Foundation and HTML5Up).

Looking into Foundation's Dev Docs for a more in-depth explanation and additional examples (despite it not necessarily being Foundation) - Here

mario
  • 1,503
  • 4
  • 22
  • 42
3

It's the first time that I see class names like this and I wondered about the meaning. The W3C page says:

In CSS 2.1, a backslash (\) character can indicate one of three types of character escape. Inside a CSS comment, a backslash stands for itself, and if a backslash is immediately followed by the end of the style sheet, it also stands for itself (i.e., a DELIM token). First, inside a string, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline). Outside a string, a backslash followed by a newline stands for itself (i.e., a DELIM followed by a newline).

Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit, linefeed, carriage return, or form feed) can be escaped with a backslash to remove its special meaning. For example, "\"" is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning.

Third, backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that: with a space (or other white space character): \26 B (&B) [...]

Note: Backslash escapes are always considered to be part of an identifier or a string (i.e., \7B is not punctuation, even though { is, and \32 is allowed at the start of a class name, even though 2 is not). The identifier te\st is exactly the same identifier as test.

So as far as I can understand, the \3+number+space part here is used to be able to use numbers only as class names.

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Scorchio
  • 2,763
  • 2
  • 20
  • 28
  • 1
    As the quoted text says, e.g. `\31 ` refers to the Unicode character with code number 31 in hex, i.e. the digit “1”. There is no separate `\3` part (but digits happen to have code numbers from 30 to 39). The notation `\-` refers to the hyphen “-” character, which needs to be escaped in this context; see http://stackoverflow.com/questions/2812072/allowed-characters-for-css-identifiers – Jukka K. Korpela Nov 18 '13 at 09:23
  • @JukkaK.Korpela Thanks for the clarification, Jukka, I've edited my answer to rephrase. – Scorchio Nov 18 '13 at 09:45
1

html5up.net uses a framework called skel to make the layouts responsive.

If your question is "how do I make sense of these classes" rather than "how do these escape sequences work", then the reference you're looking for is at https://github.com/n33/skel/blob/master/docs/skel-layout.md#usage-1.

Monkey Boson
  • 1,250
  • 4
  • 11
  • 21
-2

I think this type of css is used for mobile Compatibility.

stanze
  • 2,456
  • 10
  • 13
  • Those are helper classes for creating grid-based layouts, which are now widely used. They can help a lot, and they're used both on desktop and on mobile. – Scorchio Nov 18 '13 at 08:54