#full-page layout

[absolide]

Unlimited Grid Layout. Now with flexbox flavour — Updated

As promised I released the Flex Box Layout Module version of the Unlimited Grid Layout Boilerplate.

I would wanted to build a version compatible with old and actual Flexbox model's syntax but it was not possible to make a correct version with the syntax of 2009.

Anyway, I agree with Chris Coyier when he say: "Despite more support, it's not smart to be using the older syntax". So I decided to release only the new syntax version hoping that browser vendors realease soon a version which supporting the specification.

As in the, now named, inline-block version, look at the demos is the best way to learn about this technique. Warning: Chrome 21 or Opera 12.10 browsers required .

Unlimited Grid Layout Flexbox Demo — Ordered by Columns

Unlimited Grid Layout Flexbox Demo — Ordered by Rows

As you will see in the css, which is fully commented, this version in much more simpler than the inline-block one.

Only two properties are involved in this version and both are on the container responsible of stacking pages horizontally.

They are: display: flex; and flex-flow: row nowrap;.

The display: flex; property triggers the Flexbox layout on the container and the flex-flow: row nowrap; place the child elements in a row and prevents them to wrap around.

Without any other declaration the container's width  will be divided equally by all the child elements, as defined in the Flexbox specifications. To override this behavior we have to add the declaration min-width: 100%; to every child element.

Update! To force the boxes to be as wide as the container we have to add the declaration flex: 0 0 100%; to every child element.

The flex declaration is a shorthand for flex-grow, flex-shrink and flex-basis properties.

Setting the flex shorthand to 0 0 100% we stop the flexbox to trying to redistribute free space across elements and force the initial width of every box as 100% of the parent's width.

Thats it! Really, really simple.

The drawback is the inexistent support by current browsers. At the time of writing only Chrome 21+ and Opera starting from v12.10 browsers support the properties needed to achieve the result.

Ok, now we can wait that browser vendors will support soon the new W3C Reccomendation but, meanwhile, if anyone would use this boilerplate in a production project I reccommend the inline-block version.

I hope you can find this boilerplate useful even if it cover just a really particular layout. If you have any suggestions or if you build an working old flexbox syntax version od this code, please, let me know.

Have fun and stay tuned.

[absolide]

Unlimited Grid Layout. Full-page Panning Layouts, The Easy Way

* Updated with the Flexbox version.

During my work as a frontend developer I coded many sites with a full page layout, both before and after the Flash decline.

Coding this type of layout was, every time, one step forward towards a better and more maintainable CSS structure; however, even if every single length was expressed as a relative and flexible unit, we need to know the number of pages.

For example: if we have an horizontal structure of 6 pages we set the pages’ container width to 600% and every single child page width to 16.66%. But if the number of pages changed to 5 or 7 we have to edit the CSS.

Even if we built the section wider than needed, for example setting the container to 1000% and the single pages to 10%, we can’t be sure that the number of pages never changed to a higher value.

With this problem in mind I’ve searched a solution to compose a full-page grid layout that doesn’t need to know how many pages compose the site; so if I need to add or remove pages at runtime the structure adapts itself to contain the new content.

The result is my new Unlimited Grid Layout Boilerplate; a brand new application of simple basic CSS rules that allow developers to build flexible full-page sites with the flexibility to add or remove pages, or even entire sections, without breaking the layout. The current version, the 1.0a, uses two simple declarations to achieve the task.

white-space: nowrap; on the container of the horizontal structure, and display: inline-block; on the inner pages.

These two declarations prevent child pages to wrap. Now we have an horizontal flow which generates a native scrolling and that can continue to infinite. If we don’t need the scrollbars we can simply remove them with an overflow: hidden; declaration and control the panning with javascript.

Considering that a demo is worth more than 1000 words let’s see two implementations of this boilerplate: but before, let me say just two words (so eventually the words will be 1002) about this proper demo.

The demo runs slow on webkit browsers because of an issue with background-size property; try the demo on Firefox or (strange but true) in Internet Explorer to have the best experience; anyway, the background-size declaration is just for eye candy and the layout complexity may vary in the real world.

In Internet Explorer the control panel in the upper right corner does not work because the lack of support of querySelector API; so if you look at the demo in IE you can see only a 3x3 grid. Sorry about this but it’s a demo and I didn’t want include any external library like jQuery.

The demo uses text-shadow and multiple backgrounds properties only for presentation purpose, so I’ve build the demo on graceful degradation concepts: in IE you can’t see any shadow on text and in IE 8 or less you can’t even see any background image or background colour but you can still explore the functionality of the boilerplate with the base grid; even in IE 7.

The CSS is fully commented so you can take a look directly at the code to discover the tricks. The CSS is separated in tree parts; only the first part, the structure, is really important for our scopes; the second part, the eye candy, is for the beauty side of the demo; and the last one, the demo logic, it’s only to dress the control panel and the credits.

This boilerplate works well in Safari Mobile and Chrome Mobile (tested on iPhone and iPad with iOS6) but in the (current) demo you will not see the numbers in background like in the desktop browsers because the background-attachment: fixed; doesn't works as expected. If you test the boilerplate on other mobile browsers or devices, please, let me know the results.

Ok, now it’s demo time! Let’s see two implementations, one ordering pages in columns and one ordering pages in rows.

Unlimited Grid Layout Demo — Ordered by Columns

Unlimited Grid Layout Demo — Ordered by Rows

Do you like it? I hope you do. Feel free to experiment with the code and use it in production if you feel comfortable with it. If anyone makes a website or a webapp based on this boilerplate, please, let me know; I will appreciate.

Just one thing. The “a” in the version number (1.0a) means that there will be also a “b” version that achieve the same result using not the inline-block display property but the, less supported at now, flexible box layout model. This second demo will not be more complex than that one, but the changes in the flexbox and the lack of a solid support from browsers mades me delay this version.

Have fun, stay tuned and let me know