Grid Framework CSS [duplicate]

Question

Grid Framework CSS [duplicate]

Navigation

#1 by (1 votes)

0

I'm new to the CSS Framework branch, my question is the following. Regardless of tool (Bootstrap, Materialize, etc.) how is the process of creating a website using CSS grid? Not the operation of the grid itself, but the applicability in practice, the documentation does not talk about it. For example, roughly so (I believe): The programmer made several layouts for various devices, the script identified the device and then presented the appropriate layout. Today we know that is not so, but how to create a layout already thinking about different devices? Does the Framework do this alone? Will he render it all by himself? In the authoring process should I follow the reasoning above (create multiple layouts) and go testing with the specified columns for the device? What is the flow of creation? Sorry if the question was too long and if it was confusing rrss .. Thanks!

css framework bootstrap materialize

asked by anonymous 01.11.2016 / 16:02

1 answer

Open the app with navigation open. How can I do this implementation in my code? Serial port reading on delphi xe8

score 1 · Answer 1

I'll explain using bootstrap as a reference because it's the framework I know best.

It divides any space within an element into 12 columns regardless of the total element size, ie

<body> // eu tenho 12 colunas dentro do body
    <div> // eu tenho 12 colunas dentro da primeira div
        <div> // eu tenho 12 colunas dentro da segunda div
        </div>
    </div>
</body>

The question of responsiveness comes in when we mark how many columns an element has width for a particular screen size.

Column mark col-lg from 1 to 12 for large screens
We have column mark col-md from 1 to 12 for medium screens
Column mark col-sm from 1 to 12 for small screens
Column mark col-xs from 1 to 12 for mobile screens

Example:

<div id="pai">
    <div id="div1" class="col-lg-10 col-md-8 col-sm-6 col-xs-12"></div>
    <div id="div2" class="col-lg-2 col-md-4 col-sm-6 col-xs-12"></div>
</div>

On a large screen, filho1 will occupy 10 columns of pai while filho2 will occupy 2 columns pai .
On a medium screen, filho1 will occupy 8 columns pai while filho2 will occupy 4 columns pai .
On a small screen, filho1 will occupy 6 columns of pai while filho2 will occupy 6 columns pai .
On a mobile screen, filho1 will occupy 12 columns pai while filho2 will occupy 12 columns pai .

And how does he know which column he should apply to the screen size?

It is thanks to a feature called Media query that you can apply certain css to a screen size that you wish.

Example, taken from bootstrap 3 itself without changing anything:

@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }
    .col-sm-12 {
        width: 100%;
    }
    ...
}

Until the screen on which the website is opened does not have the size of at least 768px , which is the size that the bootstrap considers for small screens, col-sm- classes do not respond to not override class styles of mobile screens, the col-xs- . Because the larger the screen, the larger size classes will override the smaller size classes.

Ta, beauty. This does not answer your question if the Framework will do the work of thinking about multiple screens or not.

The answer is no. You still have to think about your layout for multi-screens, the framework will make it easier to move between them without having to redirect your user to various layouts and especially without having to maintain several layout files.

It allows you to adapt the layout to multiple screens without having to rearrange / reorder elements. Just by using the classes you can change position / column elements as you move from one screen to another, you can determine that the X element will not appear for mobile screens while the Y element will only appear on the mobile.

All this using just the grid system classes and utility classes

Remembering that there are cases where using a css framework with grid system will not satisfy your needs completely, so do not feel obligated to use one just because the market uses.

I hope I've been able to shed some light on the advantage of using a grid system.