Change header color 🎲 🎲

Jake Paris

in Maine, in 2024

Journal entries tagged “CSS”

Using Tailwind CSS in a WordPress Environment

To develop themes and plugins, I use the @wordpress/scripts package to do the build work. It comes with pre-defined webpack configs which work well for creating blocks and working within the requirements of the block editor. This post will assume you have familiarity with setting up your dev environment to make use of @wordpress/scripts. Recently […]

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

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, […]

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 […]

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.

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; }