Many .box. Inside a .boxes !
mini has been made to simplify the UI process.
the structure has made by container that contains objects or other containers.
mini uses CSS flexboxes as many other CSS frameworks do.
This is a .boxes and it works like a container where you can put many .box. By default this could be an invisible component.
I'm a 33% .box
me either!
Hey! Me too!
I'm a 50% .box
I'm a 25% .box
12.5% .box
12.5% .box
10% .box
10% .box
I'm a 20% .box
I'm a 60% .box
I'm a 70% .box
I'm a 30% .box
In this way you can create almost any kind of structure
And, obviously, suuuuuuuper responsive
Whooooa, I'm a header!
This is a title for my content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec nisi consequat, cursus neque a, tristique nisi. Mauris euismod, nisi ut dapibus facilisis, justo magna ultricies lorem, eget mattis odio velit et augue. Suspendisse sed lectus dapibus, elementum nunc id, ultricies quam.
Suspendisse molestie diam eros, nec condimentum sapien vestibulum quis. Fusce sed congue nisi, sit amet pellentesque tellus. Quisque fringilla ex a eros rutrum, at iaculis tellus finibus. Maecenas a nisi vitae justo suscipit hendrerit. Class aptent taciti sociosqu ad litora torquent.
Oh, a sidebar!
With any kind of banners and contents and links...
And... a footer!
Part 1
Part 2
Part 3
This mockup-a-like thing has been made in a couple of minutes.
Technically speaking
Actually it's quite easy to understand and to use. You just need to know some CSS classes.
You always have to put .box (one or many), inside a .boxes.
And, maybe, some .box, inside a .boxes, inside a .box!
You can find the sizes of the .box in the following list
- 10% .box-10
- 12.5% .box-12.5
- 16.666666% .box-16
- 20% .box-20
- 25% .box-25
- 30% .box-30
- 33.333333% .box-33
- 40% .box-40
- 50% .box-50
- 60% .box-60
- 66.666666% .box-66
- 70% .box-70
- 75% .box-75
- 80% .box-80
- 100% .box-100
Example:
content.php
<div class="boxes">
<div class="box box-66">
<p>Here goes some contents</p>
</div>
<div class="box box-33">
<p>Ciao!</p>
</div>
</div>
This will show something like:
Here goes some contents
Ciao!