Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
More Flexbox Testing
.wrapper
.container
h1 Quick FlexBox Grid
.row
.col
.module.white
h3 Header
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, distinctio voluptatum sed voluptatem earum, temporibus, sit consectetur consequatur necessitatibus, esse provident!
.row
-for i in(1..5)
.col.col-1-5.square
.module.red
span 1/5
.row
.col.col-2-3
.module.blue
h3 Balanced Gutters
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed deserunt, ullam dolores perferendis.
.col.col-1-3
.module.blue
h3 Modules Adjust To Content
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quasi a aperiam quas doloremque architecto?
.row
.col.col-2-3
.module.white
h4 So Little CSS
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed deserunt, ullam dolores perferendis odio ducimus laudantium placeat dicta eos impedit voluptates ab doloribus nobis porro sapiente. Expedita delectus enim, impedit?
.col.col-1-3
.module.white.align-self-flex-center
blockquote Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed deserunt, ullam dolores perferendis odio ducimus laudantium placeat dicta eos impedit voluptates ab doloribus nobis porro sapiente. Expedita delectus enim, impedit?
.row
-for i in(1..5)
.col.col-1-5.square
.module.red
span 1/5
@import "compass/css3";
*{
@include box-sizing(border-box);
}
@mixin aspect-ratio-box($height) {
position: relative;
box-sizing: border-box;
&:before {
content: "";
display: block;
padding-top: $height; /* aspect */
}
}
@mixin ratio-box-content{
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
$gutters: 0.5em;
body {
min-height: 100%;
max-width: 100%;
background: white;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
padding-bottom: $gutters*2;
}
.wrapper {
padding-top: $gutters*3;
width: 100%;
max-width: 100%;
}
.container{
min-height: 150px;
padding-left: $gutters *2;
padding-right: $gutters *2;
padding-top: $gutters;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
padding-bottom: $gutters*2;
}
.row{
@include display-flex(flex);
display: -webkit-box;
-ms-flex-direction: row;
@include flex-direction(row);
@include flex-wrap(wrap);
margin-left: -$gutters;
margin-right: -$gutters;
}
.col {
@include display-flex(flex);
min-height: 40px;
padding-right: $gutters;
padding-left: $gutters;
margin-top: $gutters *2;
}
.module {
width: 100%;
padding: 15px;
img{
width: 100%;
}
}
.flex-2 {
@include flex(2 0 50%);
}
.flex-3 {
@include flex(2.5 0 70%);
}
.col-1-1 {
@include flex(1 0 100%);
}
.col-1-2{
@include flex(1 0 calc(50% - 1em));
}
.col-1-3{
@include flex(1 0 calc(33.33% - 1em));
}
.col-1-4{
@include flex(1 0 25%);
}
.col-1-5{
@include flex(1 0 calc(20% - 1em));
}
.col-2-3{
@include flex(1 0 calc(66.66% - 1em));
}
@media screen and (max-width: 750px) {
.col {
@include flex(1 0 90%);
}
.col-1-5{
@include flex(1 0 calc(50% - 1em));
}
}
.square {
@include aspect-ratio-box(100%);
.module{
position: relative;
span{
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
@include translateY(-50%);
}
}
}
.align-self-flex-start {
align-self: flex-start;
}
.align-self-flex-end {
align-self: flex-end;
}
.align-self-flex-center {
align-self: center;
}
.align-self-flex-baseline {
align-self: baseline;
}
.white {
background: #eee;
color: #3d3d3d;
}
.blue {
background: DodgerBlue;
color: rgba(white,0.9);
}
.red {
background: tomato;
color: rgba(white,0.9);
}
.black {
background: #3d3d3d;
color: rgba(white,0.9);
}
@import "compass/typography";
@mixin font($font, $style: normal, $weight: normal) {
font-family: $font;
font-style: $style;
font-weight: $weight;
}
@include establish-baseline;
$base-font-size: 16px;
$base-line-height: 24px;
//fonts
$default-sans-font:'Helvetica', sans-serif;
$serif-font:'Roboto Slab', serif;
$default-font-color: rgba(black, 0.8);
h1 {
font-weight: 700;
@include adjust-font-size-to(42px);
@include rhythm(0, 0, 0, 1, 42px);
@include trailing-border(1px, 1, 42px, solid);
}
.bigass {
@include font($serif-font,normal, 100);
@include adjust-font-size-to(96px);
@include adjust-leading-to(1.5, 36px);
@include rhythm(0, 0, 0, 2, 96px);
}
h3 {
@include font($serif-font, normal, 700);
@include adjust-font-size-to($base-font-size);
@include rhythm(0, 0, 0, 0, $base-font-size);
}
h4 {
font-weight: 700;
text-transform: uppercase;
letter-spacing: .125em;
@include adjust-font-size-to($base-font-size);
@include rhythm(0, 1, 0, 1, $base-font-size);
@include trailing-border(1px, 1, $base-font-size, solid);
}
p {
@include font($serif-font);
@include adjust-font-size-to($base-font-size);
@include rhythm(0, 0, 0, 1, $base-font-size);
}
p.meta {
font-style:italic;
font-weight: 400;
@include adjust-font-size-to(12px, 2/3);
margin-bottom: 2.1em;
}
blockquote {
border-left: 5px solid rgba(black, 0.3);
padding-left: 16px;
@include font($serif-font);
font-style: italic;
@include adjust-font-size-to($base-font-size * 1.2);
@include rhythm(0, 0, 0, 1, $base-font-size * 1.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment