Skip to content

Instantly share code, notes, and snippets.

@Onepo1ntFive

Onepo1ntFive/adaptive_mobile.css

Last active July 15, 2019 11:47
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Onepo1ntFive/bd3cd5b7b250215619a90528c0c7f488 to your computer and use it in GitHub Desktop.
Download ZIP
css. 12 cols
Raw
adaptive_mobile.css
.b-cols > [class^="cols__col-"] {
width: 100%;
}
.b-cols .cols__col-mobile-1-12 {
width: calc((100% / 12) * 1);
}
.b-cols .cols__col-mobile-2-12 {
width: calc((100% / 12) * 2);
}
.b-cols .cols__col-mobile-3-12 {
width: calc((100% / 12) * 3);
}
.b-cols .cols__col-mobile-4-12 {
width: calc((100% / 12) * 4);
}
.b-cols .cols__col-mobile-5-12 {
width: calc((100% / 12) * 5);
}
.b-cols .cols__col-mobile-6-12 {
width: calc((100% / 12) * 6);
}
.b-cols .cols__col-mobile-7-12 {
width: calc((100% / 12) * 7);
}
.b-cols .cols__col-mobile-8-12 {
width: calc((100% / 12) * 8);
}
.b-cols .cols__col-mobile-9-12 {
width: calc((100% / 12) * 9);
}
.b-cols .cols__col-mobile-10-12 {
width: calc((100% / 12) * 10);
}
.b-cols .cols__col-mobile-11-12 {
width: calc((100% / 12) * 11);
}
.b-cols .cols__col-mobile-12-12 {
width: calc((100% / 12) * 12);
}
Raw
adaptive_tablet.css
.b-cols > [class^="cols__col-"] {
width: 100%;
}
.b-cols .cols__col-tablet-1-12 {
width: calc((100% / 12) * 1);
}
.b-cols .cols__col-tablet-2-12 {
width: calc((100% / 12) * 2);
}
.b-cols .cols__col-tablet-3-12 {
width: calc((100% / 12) * 3);
}
.b-cols .cols__col-tablet-4-12 {
width: calc((100% / 12) * 4);
}
.b-cols .cols__col-tablet-5-12 {
width: calc((100% / 12) * 5);
}
.b-cols .cols__col-tablet-6-12 {
width: calc((100% / 12) * 6);
}
.b-cols .cols__col-tablet-7-12 {
width: calc((100% / 12) * 7);
}
.b-cols .cols__col-tablet-8-12 {
width: calc((100% / 12) * 8);
}
.b-cols .cols__col-tablet-9-12 {
width: calc((100% / 12) * 9);
}
.b-cols .cols__col-tablet-10-12 {
width: calc((100% / 12) * 10);
}
.b-cols .cols__col-tablet-11-12 {
width: calc((100% / 12) * 11);
}
.b-cols .cols__col-tablet-12-12 {
width: calc((100% / 12) * 12);
}
Raw
css. 12 cols
.b-cols {
margin: 0 -10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.b-cols > [class^="cols__col-"] {
padding: 0 10px;
-webkit-flex: 1 auto;
flex: 1 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.b-cols .cols__col-1-12 {
width: calc((100% / 12) * 1);
}
.b-cols .cols__col-2-12 {
width: calc((100% / 12) * 2);
}
.b-cols .cols__col-3-12 {
width: calc((100% / 12) * 3);
}
.b-cols .cols__col-4-12 {
width: calc((100% / 12) * 4);
}
.b-cols .cols__col-5-12 {
width: calc((100% / 12) * 5);
}
.b-cols .cols__col-6-12 {
width: calc((100% / 12) * 6);
}
.b-cols .cols__col-7-12 {
width: calc((100% / 12) * 7);
}
.b-cols .cols__col-8-12 {
width: calc((100% / 12) * 8);
}
.b-cols .cols__col-9-12 {
width: calc((100% / 12) * 9);
}
.b-cols .cols__col-10-12 {
width: calc((100% / 12) * 10);
}
.b-cols .cols__col-11-12 {
width: calc((100% / 12) * 11);
}
.b-cols .cols__col-12-12 {
width: calc((100% / 12) * 12);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment