CSS3

  • 200612 Dec

    How we’ll lay out websites in 2016 - Part Two

    by Peter Gasston

    Posted in Modules

    In my previous post I don’t think I put enough emphasis on the fact that the Advanced Layout method may never happen; it could be dropped by the W3C, never implemented by the browser makers, or replaced by a better method.

    However, let’s work on the assumption that it does get implemented and take a closer look.

    As well as assigning each element a letter in the display declaration, there are two other characters which can be used: ‘@’ (at) and ‘.’ (dot). I want to explore the dot first.

    Note: We’ll use the four list items from the previous post in this example.

    A dot signifies a blank (whitespace) column in the layout grid. It can be assigned a width (more in a future post). In use, it would look something like this:

    ul {
display: "a.b"
         "ccc"
         "..d";
}

    Which would give us an output like this:

    One Two
    Three
    Four

    The @ symbol is a little harder to understand from the draft, but seems to signify where default content should lie in the rest of the template. In this example, I’m going to use images; let’s say we have the following code:

    <div>
<p>Lorem ipsum dolor sit amet.</p>
<img src="some_image.gif" id="first"/>
<img src="some_image.gif" id="second"/>
</div>

    And we apply styles to it as so:

    div { display: "a@b"; }
img#first { position: a; }
img#second { position: b; }

    The output would be something like this:

    [Image] Lorem ipsum dolor sit amet. [image]

    I’m sure you can begin to see the possibilities.

    You can skip to the end and leave a response.

  • Comments

Leave a Comment

(will not be published)

Subscribe to our RSS

OUR SPONSORS

Advertise here?
PSD to HTML

Hosting by:

CATEGORIES
FRIENDS
Meta
TAG CLOUD

©2008.All Rights Reserved. While using this site, you agree to have read and accepted our terms of use and privacy policy.