mirror of
https://github.com/Karaka-Management/Developer-Guide.git
synced 2026-01-12 04:48:41 +00:00
2.3 KiB
2.3 KiB
Layout
The following layout allows you to define and structure content based on screen/browser window resoltion. Internally this implementation uses flexbox.
Examples
Available sizes are xs-*, sm-*, md-*, lg-* with a grid ranging from 1-12. Every prefix (e.g. xs-*) represents a window size when it becomes active. It's also possible to combine them to define a layout for different browser window sizes. This is useful for different devices such as desktop, cellphone, tablet.
xs-extra smallsm-smallmd-mediumlg-large
<div class="row">
<div class="col-xs-12">
<section class="box wf-100"> </section>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-6">
<section class="box wf-100"> </section>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-4">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-4">
<section class="box wf-100"> </section>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-3">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-3">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-3">
<section class="box wf-100"> </section>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-3">
<section class="box wf-100"> </section>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-4">
<section class="box wf-100"> </section>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-3">
<section class="box wf-100"> </section>
</div>
<div class="col-xs-3">
<section class="box wf-100"> </section>
</div>
</div>