mini

Many .box. Inside a .boxes!

mini has been made to simplify the UI process; to reach this goal we used a fractal structure made of container that contains objects or other containers.

To reach this goal mini uses CSS flexboxe as many other CSS frameworks do.

This (the purple one) is a .boxes and it works like a container where you can put many .box. By default this should 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

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 mobile-friendly

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

.box sizes

Every .box must have a .box class.

A typical .boxes-.box structure wuold look like this.

Example

Example:

content.php


                        <div class="boxes">

                          <div class="box box66">

                            <p>Here goes some contents</p>

                          </div>

                          <div class="box box33">

                            <p>Ciao!</p>

                          </div>

                        </div>

This will show something like:

Here goes some contents

Ciao!