Jake Paris

Tagged: CSS

Solving the New Bates College Homepage

I just wrote this article for Bates College on how we created the homepage design. Check it out: Solving the New Bates Homepage

Tags —

SASS Mixins

Animations @mixin keyframes($name) { @-ms-keyframes #{$name} { @content } @-o-keyframes #{$name} { @content } @-moz-keyframes #{$name} { @content } @-webkit-keyframes #{$name} { @content } @keyframes #{$name} { @content } } @mixin animation($val) { -ms-animation: $val; -o-animation: $val; -webkit-animation: $val; -moz-animation: $val; animation: $val; } Example @include animation(( delay: .8s, duration: 1.6s, iteration-count: 1, name: fadeFromHilite, […]

Tags —

Perils of Working with a Third Party Application

At my current employer we use a third party application/service called            . Their CSS framework is full of “suck” and where they decide to employ classes (and not) in their HTML is absolutely mystifying. Some places you have heirarchies like: <body id=”MainBody”> <form id=”MainForm”> <div id=”content-wrap”> <div id=”content”> <div class=”body-area”> <div id=”ContentMiddle”> <!–stuff you […]

Tags —

Design + Tech = Win!

It’s not all the time that my experience as a fine artist has a direct impact on my coding. This time it did — I ran into a strange optical illusion in an interface I was building.

Tags —

Breakpoint Helper with SASS/SCSS

When I’m building a new site, I usually spend a fair amount of time showing and hiding things at various breakpoints. This code defines the major breakpoints in use, then prints out a bunch of helper classes to make the showing/hiding easier. First create a sass map of all the breakpoints. $breakpoints: ( small:550px, medium:800px, […]

Javascript Media Query Hack

I’ve seen this somewhere before… HTML <span id=”smScreenIndicator”></span> CSS #smScreenIndicator { float: left; } @media (min-width: 400px) { /* whatever width suits the project */ #smScreenIndicator { float: none; } } JQuery function isMobile() { if ( $(‘#smScreenIndicator’).css(‘float’) == ‘left’ ) return true; else return false; }