'.$a.'

<div class="'.$b.'">
'; } ?>

MOSNE

Mosne Flexbox
Respnsive Design Grids Generator


beta version

For Modern Browsers! Yeah!
It uses Flexibility.js and Modernizr.js for IE9, IE10, IE11 support!


Breakpoint sizes

Nesting and nogutter class

	<div class="row">
		<div class="b-col-3-4 d-col-3-4 t-col-1-1 m-col-1-1">
	        <div class="row nogutter">
	                <div class="b-col-1-2 d-col-1-2 t-col-1-1 m-col-1-1">
	                    <div class="box">this</div>
	                </div>   
                    <div class="b-col-1-2 d-col-1-2 t-col-1-1 m-col-1-1">
	                    <div class="box">is a</div>
	                </div>   
	        </div>	    
		</div>
		<div class="b-col-1-4 d-col-1-4 t-col-1-1 m-col-1-1">
		    <div class="box">nested example</div>
		</div>
	</div>

this

<div class="b-col-1-2 d-col-1-2 t-col-1-1 m-col-1-1">

is a

<div class="b-col-1-2 d-col-1-2 t-col-1-1 m-col-1-1">

nested example

<div class="b-col-1-4 d-col-1-4 t-col-1-1 m-col-1-1 align-self-stretch">

Ordering

A

1st on destop, last in mobile
<div class="col-1-3 t-order-2 m-order-3">

B

always second, but 1st on tablet
<div class="col-1-3 t-order-2 m-order-3">

C

last in desktop but 1st on mobile!
<div class="col-1-3 m-order-1 t-order-3">

Shrink to Fit, Auto Expand or Custom Size

Shrink to fit the content

<div class="col-fit">

Auto Expand

<div class="col-auto">

1/3 (size)

<div class="col-1-3">

Align, distribute

    <div class="row align-justify">
		<div class="col-1-4">
		    <div class="box"><h3>align-justify</h3></div>
		</div>
        <div class="col-1-4">
		    <div class="box"><h3>align-justify</h3></div>
		</div>
        <div class="col-1-4">
		    <div class="box"><h3>align-justify</h3></div>
		</div>
    </div>

align-left

align-left

align-left

align-right

align-right

align-right

align-center

align-center

align-center

align-justify

align-justify

align-justify

align-spaced

align-spaced

align-spaced

Vertical align each item

Phasellus viverra nulla ut metus varius laoreet. Phasellus tempus.

<div class="align-self-stretch">

Phasellus viverra nulla ut metus varius laoreet. Phasellus tempus.

<div class="align-self-top">

Phasellus viverra nulla ut metus varius laoreet. Phasellus tempus.

<div class="align-self-bottom">

Maecenas vestibulum mollis diam. Cras sagittis. Phasellus viverra nulla ut metus varius laoreet. Phasellus tempus. Maecenas malesuada. Nunc nulla. Aenean ut eros et nisl sagittis vestibulum. In ut quam vitae odio lacinia tincidunt. Donec id justo. Cras sagittis.

<div class="align-self-middle">

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Etiam rhoncus. Sed libero. Maecenas malesuada. Maecenas vestibulum mollis diam. Cras sagittis. Phasellus viverra nulla ut metus varius laoreet. Phasellus tempus. Maecenas malesuada. Nunc nulla. Aenean ut eros et nisl sagittis vestibulum. In ut quam vitae odio lacinia tincidunt. Donec id justo. Cras sagittis.

<div class="col-1-3">

Vertical align all items

   <div class="row align-items-top">...</div>
   <div class="row align-items-bottom">...</div>
   <div class="row align-items-middle">...</div>
   <div class="row align-items-stretch">...</div>

Phasellus viverra nulla ut metus varius laoreet. Phasellus tempus.

Maecenas vestibulum mollis diam. Cras sagittis. Phasellus viverra nulla ut metus varius laoreet. Phasellus tempus. Maecenas malesuada. Nunc nulla. Aenean ut eros et nisl sagittis vestibulum. In ut quam vitae odio lacinia tincidunt. Donec id justo. Cras sagittis.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Etiam rhoncus. Sed libero. Maecenas malesuada. Maecenas vestibulum mollis diam. Cras sagittis. Phasellus viverra nulla ut metus varius laoreet. Phasellus tempus. Maecenas malesuada. Nunc nulla. Aenean ut eros et nisl sagittis vestibulum. In ut quam vitae odio lacinia tincidunt. Donec id justo. Cras sagittis.

the Grid

$n){ echo '
'; for ($i = 1; $i <= $n; $i++){ echo '

1/'.$n.'

<div class="col-1-'.$n.'">
'; } echo '
'; } } ?>

the offset grid

$n){ if ($n!=1){ echo '
'; echo '

offest 1/'.$n.'

<div class="col-1-'.$n.'-off">
'; echo '
'; }} } ?>
(reset)