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

Project Blueprint: SnapFast1.1 Landing Page

Git clone BootStage, and remove .git, run: cd sites && git clone https://github.com/masoninthesis/bootstrap-stage.git SnapFast1.1 && cd SnapFast1.1 && rm -rf .git Open it in Finder, run: open . Drag, drop it into Github app, make an initial commit, and publish the new repo calling it SnapFast1.1 Pull it up in Finder, then drag drop it into Atom … 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: SnapFast.com 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

Launching a Boostrap 4 Official Theme on Github Pages

I would like to keep all of our sites hosted on Digital Ocean if possible, but an article by Charlie Gleason turned me onto the ease of Github pages. We usually like to keep our Phase One: Testing development-time to a minimum, so Github Pages just may be what we’re looking for. Only in the testing … 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

Bourbon Cheat Sheet

Master Cheat Sheet Mixins: Background: SASS: @include background(linear-gradient(red, green) left repeat) CSS: background: -webkit-linear-gradient(red, green) left repeat; background: linear-gradient(red, green) left repeat; Background Image: SASS: @include background-image(url(“/images/a.png”), linear-gradient(white 0, yellow 50%, transparent 50%)) CSS: background-image: url(“/images/a.png”), -webkit-linear-gradient(white 0, yellow 50%, transparent 50%); background-image: url(“/images/a.png”), linear-gradient(to , yellow 50%, transparent 50%); Filter: SASS: @include filter(grayscale(50%)) CSS: -webkit-filter: grayscale(50%); filter: grayscale(50%); Size: SASS: +size(100px) … Continued