ODS Layout example
The ODS Layout is based on Bootstrap 3, you can find the official documentation and examples here
<div class="container">
<h4>KPI Wall</h4>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="box dark">I'm a KPI, 12/12 on mobile, 6/12 on tablet, 3/12 above !</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="box dark">I'm a KPI, 12/12 on mobile, 6/12 on tablet, 3/12 above !</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="box dark">I'm a KPI, 12/12 on mobile, 6/12 on tablet, 3/12 above !</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="box dark">I'm a KPI, 12/12 on mobile, 6/12 on tablet, 3/12 above !</div>
</div>
</div>
<h4>KPI and it's description</h4>
<div class="row">
<div class="col-md-3">
<div class="box dark">I'm a KPI, centered on mobile, 3/12 above !</div>
</div>
<div class="col-md-9">
<div class="box dark">I'm it's description, 12/12 on mobile, 9/12 above !</div>
</div>
</div>
<h4>Adaptive height</h4>
<div class="row">
<div class="col-md-3">
<div class="box dark">I'm a small KPI !</div>
</div>
<div class="col-md-5">
<div class="row full-height">
<div class="col-md-12">
<div class="box dark">
I'm a KPI
</div>
</div>
<div class="col-md-12">
<div class="box dark">
I'm a KPI
</div>
</div>
<div class="col-md-12 no-mb">
<div class="box dark">
I'm a KPI
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="box dark">
I'm a tall KPI with a lot of content !
<br/>
A
</br>
B
</br>
C
</br>
D
</br>
E
</br>
F
</br>
G
</div>
</div>
</div>
</div>/**
* License: MIT License
* Generated on 25 Jun 2021
* Author: Labs from opendatasoft
* Version: 0.3
* Description: ODS Layout over-ride to Flexbox system
*/
.box,.row.full-height{height:100%}.row{display:flex;flex-wrap:wrap}.row>*{margin-bottom:20px;flex-grow:1}.order-0{order:0}@media screen and (min-width:750px){.order-sm-0{order:0}}@media screen and (min-width:970px){.order-md-0{order:0}}@media screen and (min-width:1170px){.order-lg-0{order:0}.order-lg-1{order:1}}.order-1{order:1}@media screen and (min-width:750px){.order-sm-1{order:1}}@media screen and (min-width:970px){.order-md-1{order:1}.order-md-2{order:2}}.order-2{order:2}@media screen and (min-width:750px){.order-sm-2{order:2}}@media screen and (min-width:1170px){.order-lg-2{order:2}.order-lg-3{order:3}}.order-3{order:3}@media screen and (min-width:750px){.order-sm-3{order:3}}@media screen and (min-width:970px){.order-md-3{order:3}.order-md-4{order:4}}.order-4{order:4}@media screen and (min-width:750px){.order-sm-4{order:4}}@media screen and (min-width:1170px){.order-lg-4{order:4}.order-lg-5{order:5}}.order-5{order:5}@media screen and (min-width:750px){.order-sm-5{order:5}}@media screen and (min-width:970px){.order-md-5{order:5}.order-md-6{order:6}}.order-6{order:6}@media screen and (min-width:750px){.order-sm-6{order:6}}@media screen and (min-width:1170px){.order-lg-6{order:6}.order-lg-7{order:7}}.order-7{order:7}@media screen and (min-width:750px){.order-sm-7{order:7}}@media screen and (min-width:970px){.order-md-7{order:7}.order-md-8{order:8}}.order-8{order:8}@media screen and (min-width:750px){.order-sm-8{order:8}}@media screen and (min-width:1170px){.order-lg-8{order:8}.order-lg-9{order:9}}.order-9{order:9}@media screen and (min-width:750px){.order-sm-9{order:9}}@media screen and (min-width:970px){.order-md-9{order:9}.order-md-10{order:10}}.order-10{order:10}@media screen and (min-width:750px){.order-sm-10{order:10}}@media screen and (min-width:1170px){.order-lg-10{order:10}.order-lg-11{order:11}}.order-11{order:11}@media screen and (min-width:750px){.order-sm-11{order:11}}@media screen and (min-width:970px){.order-md-11{order:11}.order-md-12{order:12}}.order-12{order:12}@media screen and (min-width:750px){.order-sm-12{order:12}}@media screen and (min-width:1170px){.order-lg-12{order:12}}@media screen and (max-width:1169px){:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-1,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-10,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-11,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-12,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-2,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-3,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-4,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-5,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-6,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-7,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-8,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-9{width:100%}}@media screen and (max-width:969px){:not([class*=col-sm]):not([class*=col-xs]).col-md-1,:not([class*=col-sm]):not([class*=col-xs]).col-md-10,:not([class*=col-sm]):not([class*=col-xs]).col-md-11,:not([class*=col-sm]):not([class*=col-xs]).col-md-12,:not([class*=col-sm]):not([class*=col-xs]).col-md-2,:not([class*=col-sm]):not([class*=col-xs]).col-md-3,:not([class*=col-sm]):not([class*=col-xs]).col-md-4,:not([class*=col-sm]):not([class*=col-xs]).col-md-5,:not([class*=col-sm]):not([class*=col-xs]).col-md-6,:not([class*=col-sm]):not([class*=col-xs]).col-md-7,:not([class*=col-sm]):not([class*=col-xs]).col-md-8,:not([class*=col-sm]):not([class*=col-xs]).col-md-9{width:100%}}@media screen and (max-width:749px){.row{flex-direction:column}:not([class*=col-xs]).col-sm-1,:not([class*=col-xs]).col-sm-10,:not([class*=col-xs]).col-sm-11,:not([class*=col-xs]).col-sm-12,:not([class*=col-xs]).col-sm-2,:not([class*=col-xs]).col-sm-3,:not([class*=col-xs]).col-sm-4,:not([class*=col-xs]).col-sm-5,:not([class*=col-xs]).col-sm-6,:not([class*=col-xs]).col-sm-7,:not([class*=col-xs]).col-sm-8,:not([class*=col-xs]).col-sm-9{width:100%}}.no-margin-bottom,.no-mb{margin-bottom:0!important}.no-margin-x,.no-mx{margin-left:0!important;margin-right:0!important}
/** Optional design for boxes */
.box {
height: 100%;
/* default style */
padding: 13px 19px;
border-radius: 6px;
border: 1px solid #cbcbcb;
/* Content management */
word-break: break-word;
position: relative;
/* Flex */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box.dark {
background-color: darkslategrey;
color: white;
}