Skip to content

Instantly share code, notes, and snippets.

View azinasili's full-sized avatar
😎
Learning

Azin Asili azinasili

😎
Learning
View GitHub Profile
@azinasili
azinasili / grid.scss
Last active August 29, 2015 14:04
Dynamic user configurable grid system
// ----
// Sass (v3.4.0.rc.1)
// Create dynamic grids based on user input
// Currently grids max at 8 columns
//
// Example HTML:
// <div class="container max-grid-6">
// <div class="row">
// <div class="column"></div>
// <div class="column span-4"></div>
@azinasili
azinasili / dynamic-text-color.scss
Last active August 15, 2018 15:28
Change text color based on background. Color is a darker/lighter hue of background.
// Grab brightness of color
@function brightness($color) {
@return ((red($color)) + (green($color)) + (blue($color))) / 255 * 100%;
}
// Compare bightness and print new text color
@function text-color($color) {
@if $color == null {
@return null;
}
@azinasili
azinasili / scss-triangle-mixin.scss
Last active May 6, 2016 18:16
Simple mixin to create css triangles
// Mixin to easily create triangles
// $direction accepts up, down, left, right, top-right, top-left, bottom-right, bottom-left
// $size accepts px, em, and rem values
// $color accepts hex, rgb(a), and hsl values
@mixin triangle($direction, $size, $color) {
// Set css triangle borders
// Each triangle direction overrides a border
border: $size solid transparent;
// displays triangle pointing down