The Easiest Way to Learn Flexbox CSS

I’ve been meaning to learn Flexbox for a while now. Ever since I’ve seen the word popping up everywhere. But I’m often weary of learning something new, because I know it can trigger an avalanche of learning new tools. I found this game posted on Hacker News today, Flexbox Froggy. I’ve been playing it for … Continued

SVG Animation Workflow

Copy straight from Illustrator into Atom (text editor). Use your text editor to clean up and arrange before dropping it into a Codepen. Tips: If Illustrator’s shapes aren’t copying into raw text, go to Edit > Preferences > File Handling and Clipboard and make sure On Copy Include SVG code is checked Clean up underscores … Continued

Working on Phase1 Bootstrap Site

Open project in command line gulp watch open github open github project in finder open github project in Atom Make customizations and updates to styling/html. When you’re done don’t forget to: Close gulp watch process Commit changes to Github

Project Blueprint: Landing Page

Discovery: Jackalope Media Create Hand Drawn Mockups Create mockup Getting to know BS4Themes_v1.1 Getting to know BS4Themes_v1.2 LearningAboutDeployments_v2.1 BootStage: Setting Up A Bootstrap-4 Official Theme For Deployment   Next time, you should do step 7 before customizing anything in the theme. The only reason I started customizing first was because I didn’t know there was going to be … Continued

Converting PSD to CSS

If you need to gather important style-data from your photoshop layer, you can just right click the layer and Copy CSS. Usually it spits out way too much info, and for those designers who care about making the Typo look good, there’s one thing missing– letter-spacing. The one thing it doesn’t copy is the Tracking, because … Continued

The Jackalope.scss File

I have a lot of custom styles that I would like to be able to quickly add to my Sage themes. Usually I’ll go through my old projects and copy all the code from different LESS files– _variables.less, _global.less, _header.less, _pages.less, etc. This has worked until now, but the copy/paste process is too complex, takes … Continued

Adding Compass to Sage

Referencing this post, I’m going to try Drew’s process. you don’t need ruby at all. First off you just need to install the NPM compass-mixins2 package. npm install compass-mixins –save-dev Then you will need to add an extra line to your gulpfile.js var cssTasks = function(filename) { return lazypipe() .pipe(function() { return $.if(!enabled.failStyleTask, $.plumber()); }) … Continued


LESS and SASS are CSS pre-processors. They make writing CSS less monotonous– thus the play on words. LESS was the first pre-processor I learned, most widely adopted because of it’s integration with Twitter Bootstrap. The first real website I ever coded by myself was built on Bootstrap. I’ve basically always known LESS to be synonymous … Continued

Organizing Your LESS/SASS

Jonathan Snook wrote his book Scalable and Modular Architecture for CSS: A flexible guide to developing sites small and large. It’s a good starting point for CSS architecture, but I’m going to stick with Sage‘s architecture for now. It seems very similar, and I almost feel it would be better for now. I think what’s … Continued