spac3unit

$solutions-null: (
  gutters: 0
);

@include with-layout($solutions-null) {
  .solutions__item{
    @include gallery(4 of 12);
  }
}

spac3unit

                                          /* Desktop First */
                                          
                                          
/* Large screens ----------- */
/*some CSS*/

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {...}

/* iPads (landscape) ----------- */

spac3unit

@mixin abstlycenter($w,$h){
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -($w*0.5);
	margin-top: -($h*0.5);
}

spac3unit

// Depency on Jquery + http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js [Must Include]
 
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
 
function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;
 

spac3unit

function bench(method, args, description) {
  var start, duration,
    max = Number.MIN_VALUE,
    min = Number.MAX_VALUE,
    average = 0;
  for(var i = 0; i< 10; i++) {
    start = Date.now();
    var index = method(args);
    duration = Date.now() - start;
    max = Math.max(max, duration);

spac3unit

<div class="container">
  <div>Hello</div>
</div>

////////* 1st method *////////
.container{ //Body can be used
  display:flex;
  height:100vh;
  align-items: center;
  justify-content: center;

spac3unit

render() {
  return(
    <div>
      <Component1 />
      {this.state.loading
        ? <Loader />
        : <Component2 producst={this.state.products /}>
      }
    </div>
  )

spac3unit

/* 
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle($direction, $size: 6px, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){

spac3unit

%currency {
  position: relative;
  &:before {
    content: '$';
    position: relative;
    left: 0;
  }
}
.USD %currency:before { content: '$'; }
.EUR %currency:before { content: '\20AC'; } // must escape the html entities for each currency symbol

spac3unit

This is a relatively simple media query mixin that uses the beautiful Sass @content directive
and allows me to handle screen sizes inline with the rest of my style. This prevents a lot of
debugging headaches down the road. I set the dimensions of my media variables once, and then never have to deal with them again.


// Breakpoints for each query
$smartphone: 480px;
$tabletPortrait: 767px;
$tabletLandscape: 1024px;
$desktop: 1174px;