Extremely lightweight, basic flex grid built from a simple mixin
Cattle grid contains not only a very simple (under 20kb) grid as well as a small suite of extra settings I've collected over the years of doing Front End. Unlike most frameworks, this grid is easy to isolate and use on it's own - the rest is just for sheer aesthetics and laziness!
To isolate the grid, navigate to grid.scss and add this to your own project! Simple.
If you wish to use the entire project, the folder structure is very simple.
General contains all files needed to set up a new site, from colours, helpers, form elements and mixins
Site contains files related to the project you're about to build.
I use an autoprefixer on my scss!
$grid-gutter-medium: 30px !default;
$grid-gutter-small: 20px !default;
$global-width: 1200px;
$grid-max-width: $global-width + ($grid-gutter-medium * 2) !default;
$grid-columns: 12 !default;
$breakpoint-small: 767px !default;
$breakpoint-medium: 992px !default;
$breakpoint-large: 1200px !default;
$breakpoint-xlarge: 1440px !default;
@mixin breakpoint($media) {
@media #{$media} {
@content;
}
}
<div class="container">
<div class="row">
<div class="small-12 medium-6 large-3 columns">column</div>
<div class="small-12 medium-6 large-3 columns">column</div>
<div class="small-12 medium-6 large-3 columns">column</div>
<div class="small-12 medium-6 large-3 columns">column</div>
</div>
</div>
These are just tidbits that come in handy when starting out a new build!
$small-space: 5px;
$medium-space: 20px;
$large-space: 40px;
$xlarge-space: 60px;
$hundred: ($large-space + $xlarge-space);
$input-height: $large-space;
$border-radius: 3px;
To be able to align text left, right or centrally within the markup, there are 4 classes available!
To use
<div class="small-text-center medium-text-right large-text-left xlarge-text-center">Align me!</div>
If you use Atom - this handy snippet allows for easy autofill of sizes! Be a faster dev
'.source.css.scss':
'5px':
'prefix': '5px'
'body': '$small-space';
'10px':
'prefix': '10px'
'body': '($small-space * 2)';
'15px':
'prefix': '15px'
'body': '($small-space * 3)';
'20px':
'prefix': '20px'
'body': '$medium-space';
'25px':
'prefix': '25px'
'body': '($small-space * 5)';
'30px':
'prefix': '30px'
'body': '($xlarge-space / 2)';
'40px':
'prefix': '40px'
'body': '$large-space';
'50px':
'prefix': '50px'
'body': '($small-space * 10)';
'60px':
'prefix': '60px'
'body': '$xlarge-space';
$palette: (
primary: #8eb8ba,
primaryText: #fcf8f4,
secondary: #ebc7ba,
secondaryText: #697280,
success: #c9e4bf,
error: #d38a8a,
alert: #d38a8a,
warning: #d29075,
light-grey: #c4c5c5
);
// shorthand
$primary: map-get($palette, primary);
$primaryText: map-get($palette, primaryText);
$secondary: map-get($palette, secondary);
$secondaryText: map-get($palette, secondaryText);
$light: map-get($palette, light-grey);
To use
background-color: $primary;
color: $primaryText;
@mixin button-bg($bg, $txt) {
background: $bg;
border: $bg;
color: $txt;
&:hover,
&:focus {
background:darken($bg,10%);
border:darken($bg, 10%);
transition: all 0.3s ease;
}
}
To use:
@include button-bg(#000000, #ffffff);
@mixin button-hollow($border, $txt) {
background: transparent;
border: 1px solid $border;
color: $txt;
&:hover,
&:focus {
border: 1px solid darken($border, 10%);
transition: all 0.3s ease;
color: darken($txt, 10%);
}
}
To use:
@include button-hollow(#000000, #000000);
@mixin pseudo($display: block, $pos: absolute, $content: ''){
content: $content;
display: $display;
position: $pos;
}
To use:
@include pseudo;
@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
To use:
@include input-placeholder {
color: $grey;
}
@mixin heading {
color: inherit;
font-weight: 500;
font-style: normal;
text-rendering: optimizeLegibility;
margin-top: 0;
margin-bottom: 0.5rem;
line-height: 1.4;
padding: 0;
}
@mixin h1 {
@include heading;
font-size: rem-calc(40);
@include breakpoint($small-only) {
font-size: rem-calc(30);
}
}
To use:
@include h1;
// Rem Calc
@function rem-calc($font-size) {
$rem-size: $font-size / 16;
@return #{$rem-size}rem;
}
To use:
font-size: rem-calc(12)
$z-index: (
modal: 200,
navigation: 100,
footer: 10,
header: 50,
main: 10,
);
@function z-index($key) {
@return map-get($z-index, $key);
}
@mixin z-index($key) {
z-index: z-index($key);
}
To use:
@include z-index(header);
@mixin fade($type) {
@if $type == 'hide' {
visibility: hidden;
opacity: 0;
transition: visibility 1s, opacity 1s;
}
@else if $type == 'show' {
visibility: visible;
opacity: 1;
transition: visibility 1s, opacity 1s;
}
}
To use:
@include fade(hide)
@include fade(show)
// Columns in a flex grid can be aligned horizontal or vertical inside of their parent.
.align-all {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.align-middle {
align-items: center;
}
.align-center {
justify-content: center;
}
// Columns in a flex grid can be aligned horizontal or vertical individually also
.align-self-bottom {
align-self: flex-end;
}
.align-self-middle {
align-self: center;
}
.align-self-top {
align-self: flex-start;
}
// Elements can be absolutely positioned inside of it's relative parent
.horizontal-center {
position: absolute;
left: 50%;
top: auto;
transform: translateX(-50%);
}
.vertical-center {
position: absolute;
left: auto;
top: 50%;
transform: translateY(-50%);
}
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
To use:
@extend .align-all;
@extend .horizontal-center;
@extend .vertical-center;
@extend .absolute-center;
<div class="container">
<div class="row align-all">
<div class="small-12 medium-6 columns align-self-top">column</div>
<div class="small-12 medium-6 columns align-self-middle"> column</div>
<div class="small-12 medium-6 columns align-self-bottom">column</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="box horizontal-center align-all">
horizontal-center
</div>
<div class="box vertical-center align-all">
vertical-center
</div>
<div class="box absolute-center align-all">
absolute-center
</div>
</div>
</div>
</div>
To use:
// Will sit to the top right of the page
// The Drawer will open from the right
<a href="#main-menu" role="button" id="main-menu-toggle" class="menu-toggle"
aria-expanded="false"
aria-controls="main-menu"
aria-label="Open main menu">
<span class="fa fa-bars" aria-hidden="true"></span>
</a>
<nav id="main-menu" role="navigation" class="main-menu" aria-expanded="false" aria-label="Main menu">
<a href="#main-menu-toggle" role="button" id="main-menu-close" class="menu-close"
aria-expanded="false"
aria-controls="main-menu"
aria-label="Close main menu">
<span class="fa fa-close" aria-hidden="true"></span>
</a>
<ul class="drawerMenu">
<li><a href="#>Link</a></li>
</ul>
</nav>
<a href="#main-menu-toggle" class="menuBg" tabindex="-1" aria-hidden="true" hidden></a>
- Ceryni - Initial work - Ceryni173
This project is licensed under the MIT License - see the LICENSE.md file for details
- Inspired by Foundation 6 markup