Because fuck Bootstrap
DownloadFlexboxer is a small super-responsive LESS framework based on flexbox.
Because I need a framework and I hate all others, especially Bootstrap.
No, unless you work with me.
To clone files to you local machine, run: git clone https://github.com/Saigesp/Flexboxer.git
To install files from npm, run: npm install flexboxer
Or simply download the last CSS file
To compile LESS files, run: gulp less
To watch LESS files and compilie it when they change, run: gulp watch
To build a minified CSS file, run: gulp build
Pull request are welcome
Flexboxer provides a simply page structure, divided in boxes and wrappers. Boxes are the main section structure, and they split the content in rows. Wrappers are the subvidivers ob boxes, which works ina similar way to columns.
The general page layout looks like:
<body class="wrap wrap--flex wrap--flex__vertical">
<div id="header" class="wrap wrap--header"></div>
<div id="wrapper" class="wrap wrap--frame wrap--frame__vertical"></div>
<div id="footer" class="wrap wrap--footer"></div>
</body>
Inside #wrapper you can declare the box structure:
<div class="flexboxer">
<section class="wrap wrap--content">
// Inside box
</section>
</div>
This will looks like:
There are 2 big types of boxes: frame and content
wrap--frame is preferred for images, forms, videos, iframes, etc.
wrap--content is preferred for texts.
<div class="flexboxer">
<section class="wrap wrap--content">
// Content box
</section>
<section class="wrap wrap--frame">
// Frame box
</section>
</div>
This will looks like:
We need to compress boxs and restructure their content in a similar way to rows and columns, but with flexbox. The following example shows one box divided in two wraps with same width.
<section class="wrap wrap--content wrap--flex">
<div class="wrap wrap--content wrap--content__middle">
// Content 50%
</div>
<div class="wrap wrap--content wrap--content__middle">
// Content 50%
</div>
</section>
This will looks like:
You can combine frames and content also:
And place a divider inside a divider:
Want divide in 3 spaces? No problem, there're wrap--content__third and wrap--frame__third waiting you:
<section class="wrap wrap--content wrap--flex">
<div class="wrap wrap--content wrap--content__third">
// Content 33%
</div>
<div class="wrap wrap--content wrap--content__third">
// Content 33%
</div>
<div class="wrap wrap--content wrap--content__third">
// Content 33%
</div>
</section>
Flexboxer have two special classes to configure a vertical flexbox, which is used in the page layout as well:
<body class="wrap wrap--vertical">
<div id="header" class="wrap wrap--header"></div>
<div id="wrapper" class="wrap wrap--content__full">
// Content
</div>
<div id="footer" class="footer"></div>
</body>
The trick here is wrap--frame__full or wrap--content__full. If there aren't enought content to fill the screen, wrap--frame__full will grow until fill the window (without fuck off others containers):
<section class="wrap wrap--content wrap--vertical">
<div class="wrap wrap--content"> // Content </div>
<div class="wrap wrap--content wrap--content__full"> // Content full </div>
<div class="wrap wrap--frame"> // Content </div>
</section>
Obviusly you can place more than one wrap--content__full:
<section class="wrap wrap--content wrap--vertical">
<div class="wrap wrap--content wrap--content__full"> // Content full </div>
<div class="wrap wrap--frame"> // Frame </div>
<div class="wrap wrap--content wrap--content__full"> // Content full </div>
</section>
Ouh yeah
Yep, there're also a gallery layout FYI, which will be explained here: masonry
<section class="wrap wrap--frame wrap--masonry">
<div class="wrap wrap--content wrap--content__middle"> item </div>
<div class="wrap wrap--content wrap--content__middle"> item </div>
<div class="wrap wrap--content wrap--content__middle"> item </div>
<div class="wrap wrap--content wrap--content__middle"> item </div>
</section>
This will looks like:
See masonry section for more info
This framework works specially well with forms (That's the actually reason for build it)
To stylize a form, yo only need one class, wrap--form:
<section class="wrap wrap--content wrap--form">
<label for="text1">Text label</label>
<input id="text1" type="text" placeholder="Text field">
</section>
This will looks like:
And if we combine these styles with the box structure, we have:
<section class="wrap wrap--content wrap--form">
<div class="wrap wrap--flex">
<div class="wrap wrap--frame wrap--frame__middle">
<label for="text2">Text label 1</label>
</div>
<div class="wrap wrap--frame wrap--frame__middle">
<input id="text2" type="text" placeholder="Text field 1">
</div>
</div>
<div class="wrap wrap--flex">
<div class="wrap wrap--frame wrap--frame__middle">
<label for="text3">Text label 2</label>
</div>
<div class="wrap wrap--frame wrap--frame__middle">
<input id="text3" type="text" placeholder="Text field 2">
</div>
</div>
<div class="wrap wrap--frame wrap--submit">
<button type="submit" value="">Submit</button>
</div>
</section>
Note the wrap--submit class in the last row.
This will looks like:
Checkboxes and radios have a particular structure: <input> + <label> <span>Text</span> </label>
<section class="wrap wrap--content wrap--form">
<h3 class="sep">Checkboxes</h3>
<div class="wrap wrap--flex">
<div class="wrap wrap--frame wrap--frame__middle">
<label for="check1">Checkbox without text</label>
</div>
<div class="wrap wrap--frame wrap--frame__middle wrap--checkbox">
<input type="checkbox" id="check1">
<label for="check1"></label>
</div>
</div>
<div class="wrap wrap--flex">
<div class="wrap wrap--frame wrap--frame__middle">
<span>Checkbox with text</span>
</div>
<div class="wrap wrap--frame wrap--frame__middle wrap--checkbox">
<input type="checkbox" id="check2">
<label for="check2"><span>Text 1</span></label>
<input type="checkbox" id="check3">
<label for="check3"><span>Text 2</span></label>
</div>
</div>
<h3 class="sep">Radio buttons</h3>
<div class="wrap wrap--flex">
<div class="wrap wrap--frame wrap--frame__middle wrap--checkbox">
<span>Radio buttons</span>
</div>
<div class="wrap wrap--frame wrap--frame__middle wrap--checkbox">
<input type="radio" name="radios" id="radio1">
<label for="radio1"><span>Radio 1</span></label>
<input type="radio" name="radios" id="radio2">
<label for="radio2"><span>Radio 2</span></label>
</div>
</div>
</section>
Note the <h3 class="sep"> element as divisor.
This will looks like:
So you want a fucking simple list, right? Here you have:
<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
</ul>
This will looks like:
Beautiful and useless, so lets add our flex structure and some buttons:
<ul class="list">
<li class="item wrap wrap--flex">
<div class="wrap wrap--frame wrap--frame__middle">Item</div>
<div class="wrap wrap--frame wrap--frame__middle wrap--buttons">
<img src="./assets/img/icons/hamburguer.svg" alt="" class="icon">
<img src="./assets/img/icons/close.svg" alt="" class="icon">
</div>
</li>
</ul>
Note the icon class in the images and the wrap--buttons class in their container.
This will looks like:
Maybe your list is huge and you want to make it scrollable:
<ul class="list list--scroll list--scroll__y">
<li class="item wrap wrap--flex">
<div class="wrap wrap--frame wrap--frame__middle">Item</div>
<div class="wrap wrap--frame wrap--frame__middle wrap--buttons">
<img src="./assets/img/icons/hamburguer.svg" alt="" class="icon">
<img src="./assets/img/icons/close.svg" alt="" class="icon">
</div>
</li>
</ul>
Yep, there're also list--scroll__x.
This will looks like: