Skip to content

Instantly share code, notes, and snippets.

@mtouja

mtouja/grid_bootstrap.html

Created August 28, 2018 19:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mtouja/0e14c288a0141538550b730fb11dba9f to your computer and use it in GitHub Desktop.
Save mtouja/0e14c288a0141538550b730fb11dba9f to your computer and use it in GitHub Desktop.
Download ZIP
Test grilles Bootstrap - oeil de Sauron
Raw
grid_bootstrap.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="grid_style.css">
<title>Gilles Bootsrap</title>
</head>
<body>
<div class="container">
<div class="row no-gutters">
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
</div>
<div class="row no-gutters">
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre orange">
</div>
<div class="col carre jaune">
</div>
<div class="col carre orange">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
</div>
<div class="row no-gutters">
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre orange">
</div>
<div class="col carre jaune">
</div>
<div class="col carre noir">
</div>
<div class="col carre jaune">
</div>
<div class="col carre orange">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
</div>
<div class="row no-gutters">
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre orange">
</div>
<div class="col carre orange">
</div>
<div class="col carre jaune">
</div>
<div class="col carre noir">
</div>
<div class="col carre jaune">
</div>
<div class="col carre orange">
</div>
<div class="col carre orange">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
</div>
<div class="row no-gutters">
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre orange">
</div>
<div class="col carre jaune">
</div>
<div class="col carre noir">
</div>
<div class="col carre jaune">
</div>
<div class="col carre orange">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
</div>
<div class="row no-gutters">
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre orange">
</div>
<div class="col carre jaune">
</div>
<div class="col carre orange">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
</div>
<div class="row no-gutters">
<div class="col carre">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre">
</div>
</div>
<div class="row no-gutters">
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
</div>
<div class="row no-gutters">
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
</div>
<div class="row no-gutters">
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
</div>
<div class="row no-gutters">
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre gris">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
<div class="col carre">
</div>
</div>
</div>
</body>
</html>
Raw
grid_style.css
@media screen and (min-width: 200px) and (max-width: 351px){
.carre {
height: 5px;
}
}
@media screen and (min-width: 352px) and (max-width:767px){
.carre {
height: 32px;
}
}
@media screen and (min-width: 768px) and (max-width:991px){
.carre {
height: 45px;
}
}
@media screen and (min-width: 992px) and (max-width:1199px){
.carre {
height: 65px;
}
}
@media screen and (min-width: 1200px){
.carre {
height: 82px;
}
}
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.gris {
background-color:#333333;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.orange {
background-color: #ff7f2a;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.jaune {
background-color: #ffcc00;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.noir {
background-color: #000000;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment