Skip to content

Instantly share code, notes, and snippets.

@oskwazir

oskwazir/index.html

Created May 29, 2015 16:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save oskwazir/d4fba3d7ff5d74f54b7a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save oskwazir/d4fba3d7ff5d74f54b7a to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/xacawi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
/*
* See http://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 http://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>
Raw
jsbin.xacawi.css
/*
* See http://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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment