Old school D3 from simpler times

All examples By author By category About

oskwazir

Full window Github gist

JS Bin // source http://jsbin.com/xacawi

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
/*
* See https://davidwalsh.name/flexbox-dice
* for this flexbox tutorial. I just wrote some code
* to see for myself what was happening.
*/

body{
  background-color:#27242F;
}

[class$='-face']{
  background-color:#fff;
  height:50px;
  width:50px;
  border:4px solid #F0EEE8;
  border-radius:8px;
  padding:10px;
  border-style:outset;
  margin:30px;
}

.pip{
  background-color:#27242F;
  border:1px solid black;
  border-radius:50%;
  width:10px;
  height:10px;
  display:block;
  margin:2px;
}

.first-face{
  /*
  * flexbox stuff
  */
  
  display:flex;
  justify-content:center;
  align-items:center;
}

.second-face{
  
  /*
  * flexbox stuff
  */
  
  display:flex;
  justify-content:space-between;
  
}

.third-face{
  display:flex;
  justify-content:space-between;
}

.second-face .pip:nth-of-type(2){
  align-self:flex-end;
}

.third-face .pip:nth-of-type(2){
  align-self:flex-end;
}

.third-face .column{
  display:flex;
  justify-content:center;
  align-items:center;
}

.fourth-face{
  display:flex;
  justify-content:space-between;
}

.fourth-face .column{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.fifth-face{
  display:flex;
  justify-content:space-between;
}

.fifth-face .column{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.fifth-face .column:nth-of-type(2){
  display:flex;
  justify-content:center;
  align-items:center;
}

.sixth-face{
  display:flex;
  justify-content:space-between;
}

.sixth-face .column{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
</style>
</head>
<body>
<div class="first-face">
  <span class="pip"></span>
</div>

<div class="second-face">
  <span class="pip"></span>
  <span class="pip"></span>
</div>
  
  <div class="third-face">
  <span class="pip"></span>
    <div class="column">
       <span class="pip"></span>
    </div>
  <span class="pip"></span>
</div>
  
<div class="fourth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>

<div class="fifth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
    <div class="column">
       <span class="pip"></span>
    </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
  
  <div class="sixth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>

<script id="jsbin-source-css" type="text/css">/*
* See https://davidwalsh.name/flexbox-dice
* for this flexbox tutorial. I just wrote some code
* to see for myself what was happening.
*/

body{
  background-color:#27242F;
}

[class$='-face']{
  background-color:#fff;
  height:50px;
  width:50px;
  border:4px solid #F0EEE8;
  border-radius:8px;
  padding:10px;
  border-style:outset;
  margin:30px;
}

.pip{
  background-color:#27242F;
  border:1px solid black;
  border-radius:50%;
  width:10px;
  height:10px;
  display:block;
  margin:2px;
}

.first-face{
  /*
  * flexbox stuff
  */
  
  display:flex;
  justify-content:center;
  align-items:center;
}

.second-face{
  
  /*
  * flexbox stuff
  */
  
  display:flex;
  justify-content:space-between;
  
}

.third-face{
  display:flex;
  justify-content:space-between;
}

.second-face .pip:nth-of-type(2){
  align-self:flex-end;
}

.third-face .pip:nth-of-type(2){
  align-self:flex-end;
}

.third-face .column{
  display:flex;
  justify-content:center;
  align-items:center;
}

.fourth-face{
  display:flex;
  justify-content:space-between;
}

.fourth-face .column{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.fifth-face{
  display:flex;
  justify-content:space-between;
}

.fifth-face .column{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.fifth-face .column:nth-of-type(2){
  display:flex;
  justify-content:center;
  align-items:center;
}

.sixth-face{
  display:flex;
  justify-content:space-between;
}

.sixth-face .column{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}</script>
</body>
</html>