Skip to content

Instantly share code, notes, and snippets.

@nicolaslazartekaqui
Last active February 21, 2017 21:55
Show Gist options
  • Save nicolaslazartekaqui/0c51d28042a38240f2978679f81ca386 to your computer and use it in GitHub Desktop.
Save nicolaslazartekaqui/0c51d28042a38240f2978679f81ca386 to your computer and use it in GitHub Desktop.
CSS cheats
.container {
margin-right: auto;
margin-left: auto;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
@include clearfix();
@include media-breakpoint(xl) {
max-width: $container-max-width;
@at-root #{&}--fluid {
max-width: none;
}
}
}
.g {
@include make-grid;
}
@include make-grid-columns;
@include make-grid-columns-breakpoints;
// media queries helper
@mixin media-breakpoint($name) {
@media (min-width: map-get($grid-breakpoints, $name)) {
@content;
}
}
@mixin media-breakpoint-down($name) {
@media (max-width: map-get($grid-breakpoints, $name) - 0.1) {
@content;
}
}
// rem helper
@function rem($px) {
@if (unitless($px)) {
$px: $px * 1px;
}
@return #{$px/$font-size-root}rem;
}
// clearfix helper
@mixin clearfix {
&:before,
&:after {
content: ' ';
display: table;
}
&:after {
clear: both;
}
}
// grid builder
@mixin make-grid($gutter: $grid-gutter-width) {
display: flex;
flex-wrap: wrap;
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
}
@mixin make-column($gutter: $grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
word-break: break-word;
min-width: 0;
}
@mixin make-grid-columns {
@for $i from 1 through $grid-columns {
.g__col-#{$i} {
@include make-column;
flex: 0 0 percentage($i / $grid-columns);
}
}
}
@mixin make-grid-columns-breakpoints {
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint($breakpoint) {
@for $i from 1 through $grid-columns {
.g__col--#{$breakpoint}-#{$i} {
flex: 0 0 percentage($i / $grid-columns);
}
}
}
}
}
html {
font-size: $font-size-root;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*,
*:before,
*:after {
box-sizing: inherit;
}
*:focus {
outline: none;
}
body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height;
color: $body-color;
background-color: $body-bg;
}
a {
color: $link-color;
text-decoration: none;
&:hover,
&:focus {
color: $link-hover-color;
text-decoration: none;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: .5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 400;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
}
figure {
margin: 0 0 1rem;
}
img {
vertical-align: middle;
}
[role="button"] {
cursor: pointer;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
input,
button,
select,
textarea {
margin: 0;
line-height: inherit;
border-radius: 0;
}
textarea {
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: .5rem;
line-height: inherit;
}
input {
word-break: initial;
}
$font-size-root: 16px;
$font-size-base: .875rem; // 14px
$font-family-base: 'Open Sans', sans-serif;
$line-height: 1.5;
$grid-breakpoints: (
// Small screen / phone
sm: 34rem,
// Medium screen / tablet -- designed
md: 48rem,
// Large screen / desktop
lg: 62rem,
// Extra large screen / wide desktop -- designed
xl: 75rem
);
$grid-columns: 12;
$grid-gutter-width: 1.875rem;
$container-max-width: 73.125rem;
$black-text: #424242;
$blue: #1fa9e0;
$blue-hover: #169dd2;
$body-bg: #FFF;
$body-color: $black-text;
$link-color: $blue;
$link-hover-color: $blue-hover;
<!--container with max width -->
<div class="container">
<div class="g">
<div class="g__col-12 g__col--md-6">
</div>
<div class="g__col-12 g__col--md-6">
</div>
</div>
</div>
<!-- container fluid -->
<div class="container container--fluid">
<div class="g">
<div class="g__col-6">
</div>
<div class="g__col-6">
</div>
</div>
</div>
@import 'variables';
@import 'mixins';
@import 'reset';
@import 'grid';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment