Fork me on GitHub

a simple Sass library by @carlwebdev

Variables

Colors

/* 
 * SASS - VARIABLES - COLORS
 */ 
$c_whatever: #BADA55;

$c_color1: $whatever;

$c_color2: #F00;

$c_error: #FF9494;

$c_white: #fff;
$c_black: #2B292E; /* anthracite */


$c_text: $c_white; // DEFAULT TEXT COLOR
$c_inputs: #999; // TIP - darker than c_placeholders
$c_placeholders: #ccc; // TIP - lighter than c_inputs

Font-Size

/* 
 * SASS - VARIABLES - FONT-SIZES
 */
$fs_xxl: 48px;
$fs_xl: 28px;
$fs_l: 20px;
$fs_m: 16px;
$fs_s: 12px;

Spacing

/*
 * SASS - VARIABLES - LAYOUT - SPACING
 */
$spacing: 24px;
$spacing2: $spacing * 2;
$spacing3: $spacing * 3;
$spacing4: $spacing * 4;
$spacing6: $spacing * 6;
$spacing8: $spacing * 8;
$spacing075: $spacing * 0.75;
$spacing05: $spacing * 0.5;
$spacing025: $spacing * 0.25;
$spacing0125: $spacing * 0.125;

Break-Points

/*
 * SASS - VARIABLES - LAYOUT - BREAK-POINTS 
 */ 
$bp_xl: 1200px;
$bp_l: 1024px;
$bp_m: 800px;
$bp_s: 599px;
$bp_xs: 480px;

Mixins

Responsive layout

/*
 * SASS - MIXINS - LAYOUT - RESPONSIVE
 */
 
@mixin centered { 
  margin-left: auto;
  margin-right: auto;
  }
				
@mixin fullwidth { 
  float: none; 
  width: 100%;
  
  
/*
width: 100% !important; 
clear: both; 
float: none; 
margin-right: 0; 
*/
  
  }

Padding

/* 
 * SASS - MIXINS - LAYOUT - PADDING
 */
 
@mixin paddingh($paddingh) {
  padding-left: $paddingh;
  padding-right: $paddingh;
  }

@mixin paddingv($paddingv) {
  padding-top: $paddingv;
  padding-bottom: $paddingv;
  }

Margin

/* 
 * SASS - MIXINS - LAYOUT - MARGIN
 */   
 
@mixin marginh($marginh) {
  margin-left: $marginh;
  margin-right: $marginh;
  }

@mixin marginv($marginv) {
  margin-top: $marginv;
  margin-bottom: $marginv;
  }
Images
/* 
 * SASS - MIXINS - IMAGES
 */ 
 
@mixin img { 
  width: 100%;
  display: block;
  }
	   
@mixin bg_img {
  background-position: center center;
  background-repeat: no-repeat; 
  background-size: cover;
  }    			
Aspect Ratios
/* 
 * SASS - MIXINS - IMAGES - ASPECT RATIOS
 */ 
 
@mixin ar_square { 
  padding-top: 100%; 
  }
  
@mixin ar_4_3 { 
  padding-top: 75%; 
  }
  
@mixin ar_16_9 { 
  padding-top: 56.25%; 
  }
  
@mixin ar_cinemascope { 
  padding-top: 42.55%; 
  }	   
  
@mixin ar_poster { 
  padding-top: 134.5%; 
  }	
 
@mixin ar_square {padding-top: 100%;} 
@mixin ar_4_3 {padding-top: 75%;} 
@mixin ar_16_9 {padding-top: 56.25%;} 
@mixin ar_cinemascope {padding-top: 42.55%;}	    
@mixin ar_poster {padding-top: 134.5%;}	
            			

Simple shapes

/* 
 * SASS - MIXINS - SIMPLE SHAPES
 */ 
 
@mixin circle($diameter) {
    width: $diameter;
    height: $diameter;
    border-radius:50%;
    }
    
@mixin square($edge) {
    width: $edge;
    height: $edge;
    }  
    
@mixin rectangle($h_edge, $v_edge) {
    width: $h_edge;
    height: $v_edge;
    }        

Colors

@mixin rgba($red,$green,$blue,$opacity) {
  background: rgb($red,$green,$blue); // Fallback
  background: rgba($red,$green,$blue,$opacity);
  }


@mixin rgba($color,$opacity) {
  background: rgb($color); // Fallback
  background: rgba($color,$opacity);
  }

Generic resets

@mixin bg_reset {
  background-color: rgba(0,0,0,0);
  }

@mixin boxshadow_reset {
  @include box-shadow(0 0 0 0 rgba(0, 0, 0, 0.0));
  }
Texts
/* 
 * SASS - MIXINS - TEXT
 */
 
@mixin ellipsis {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;	
  }

/* COMPASS */
@mixin ellipsis {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;	
  }  
  
  
  
  
// source: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
@mixin word-wrap() {
	
	
// -ms-word-break: break-all;

     /* Be VERY careful with this, breaks normal words wh_erever */
     // word-break: break-all;
		 
		 
		 	
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}
  
CSS transforms & animations

/* css transitions and animatiosn, starting a framework system here !!!!!!!!!!!! */

/* CSS3 : TRANSITION */
@mixin rotate {
		-webkit-transition-duration: 0.8s;
		-moz-transition-duration: 0.8s;
		-o-transition-duration: 0.8s;
		transition-duration: 0.8s;
		-webkit-transition-property: -webkit-transform;
		-moz-transition-property: -moz-transform;
		-o-transition-property: -o-transform;
		transition-property: transform;
		
		// @include transition();
		
			&:hover { 
				-webkit-transform:rotate(360deg);
				-moz-transform:rotate(360deg); 
				-o-transform:rotate(360deg);
				} 
				
	} // mixin rotate

Extends

Classes and placeholders

The clearfix hack

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
  }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */				

Vertical centering

simple, with a mixin

@mixin vcenter {
	position: relative;
	top: 50%;
	transform: translateY(-50%);	
	}				

more complex, with class extends, better cross-browser support

.ghostFather { /* must be inisde a parent container with position: relative; */
    position:absolute; top:0; right:0;
    width:100%;
    height:100%;
    text-align:center;
    
    /* The ghost, nudged to maintain perfect centering */
    &:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em; /* Adjusts for spacing */
      }
    
    } // ghost_father
                   
        
.ghostChild {
  width:95%; /* 100% width causes issues in Firefox... */
  display: inline-block;
  vertical-align: middle;
    }