Flex grid, a flexible grid to make the web flexible

Make the web flexible with the flex grid and break the limits of the 12 columns css styling grid

(Post 1 of the guide)

Intro

It’s a bit I repeat myself that it would be worthwhile to deepen their knowledge of CSS in unconventional directions.
The first starting point has been the need to align in a simple way a text within a container both horizontally and vertically.
A second cue was to see, with the advent of the framework for the construction of webapp, how it was possible to abandon the verticality of the web understood in the sense of the page, readable from top to bottom and from left to right. It was fascinating how it could deviate from the traditional way of reading the web as if it were the page of a book to go to a more object-oriented arranged in space. This has greatly helped the arrival of asynchronous requests and the same object-oriented programming.

With a little imagination you could create a breakaway from the traditional rules of style and you could turn our gaze to the new “views” of the web. It ‘amazing how new knowledge breakouts fantasy. It ‘amazing how you can have the feeling that our imagination sometimes other aspects there is a skill to jump over the fence and go in new directions.

The library

Experimentally I’m creating a library very simple and very straightforward to use CSS techniques that enable new ways of thinking spaces in a web project.
This library is based on the experience for the use of Twitter Bootstrap and awareness of a web which, on the one hand wants to have clear geometric patterns that can be addressed with safety for the construction of facilities that host web content but on the other he wants to be able to wander over the grid to 12 columns or the concept of margin and padding for spacing.

The library CSS flex grid can be downloaded at the following address, all versions are listed and can be integrated in any web project is built like any other style sheet.

FLEX GRID

We start doing a first step in the grid by solving the problem first mentioned in a text aligned centrally both horizontally and vertically.

EXAMPLE

The solution

This is the example and how it has been solved:

Following css classes have been assigned to the external container (the blue one): bcd-f-ctn, bcd-f-line-s, bcd-f-flow-c-to-c.

The prefix ‘bcd-f-‘: will be always present to avoid confusion with pther project css classes .
All the css classes in the flex grid document starts with the prefix bcd-f-.

The class ‘bcd-f-ctn‘: defines a flexible container. It defines a conceptual container and it will define a specific behaviour of the “children”, objects inside the container.
The class ‘bcd-f-line-s‘: defines that all the objects inside the container have to in a single row or in a single column.
The class ‘bcd-f-flow-c-to-c‘: defines all the children objects behaviour moving from the mobile view (less than 768 pixels of devince width) to the desktop view (768 pixels and more), c-to-c says the mobile is in column view and the desktop as well, all the elements will be set ina single column both on mobile and desktop view. If the class would have been bcd-f-flow-c-to-r we would have read that as “column to row” and the meaning would have been that all the elements would have been set on a single column in the mobile view and on a single row in the desktop view.

These classes define the object flexible and the objects inside on a single column.

The internal box (green color) has the following css classes: bcd-f-1, bcd-f-h-center, bcd-f-v-middle.

The class ‘bcd-f-1‘: defines the relationship with the others parallel elements (not present at the moment)in reason of size, in this specific case it wouldn’t be necessary to set this class but we want you to be familiar with this class inside a container.
The class ‘bcd-f-h-center‘: defines that the object will show its content centered (center) horizontally (h) for the hrizontal alignment.
The class ‘bcd-f-v-middle‘: defines that the object will show its content centered (middle) vertically (v) for the vertical alignment.

Conclusion

This is the basic structure for an easy container, a very good way to begin this trip in the flexibility. In the next article we will implement the flex grid with complex structures and group of objects.

Menu
Find out more