CSS3

  • 200612 Dec

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

    by

    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="https://www.css3.info/wp-content/uploads/2009/09/https://www.css3.info/wp-content/uploads/2009/09/some_image.gif" id="first"/>
<img src="https://www.css3.info/wp-content/uploads/2009/09/https://www.css3.info/wp-content/uploads/2009/09/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

Subscribe to our RSS

OUR SPONSORS

Advertise here?
CATEGORIES
FRIENDS
META2
TAG CLOUD

© 2009-2012 WEBFLUX. All Rights Reserved.