Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Past Blogs

Sassconf 2013 Notes.

10.29.2013

Here are my takeaway notes from Sassconf 2013 earlier this month, along with a few examples that I hacked together and links to various pieces of awesome. These are the thoughts that happened to stick with me, and may not be cohesive outside of the context of conference.

Here is a playlist of videos from SassConf 2013: https://www.youtube.com/playlist?list=PLXrTmSPkhnXsd_MGL5Y__7IoRemarkRVi.

Cheap Sass Tricks - John W. Long

Sass at GitHub - Ben Bleikamp

It Takes a Village to Raise a Website - Chris Eppstein

Sass: Bridging the Designer/Developer Gap - Bermon Painter

Clean out your junk drawer - Dale Sande

Show Your Work & Share Your Toys - Miriam Suzanne

The Front End Revolution: A Call to Arms - Hampton Catlin

Sweating the Small Stuff - Tim Hettler

Programming? In MY CSS? - Jackie Balzer

Getting Sassy With Foundation 4 - Caleb Winters

Take the Pain out of Sass - Ian Carrico

  1. Install homebrew
  2. Then install rbenv:
    brew install rebenv ruby-build  ## rbenv helps to run multiple versions of R
    echo 'eval "$(rbenv init -)"' >> ~/.bash_profile ## Add something to your bash_profile
  3. brew install rbenv ruby-build ## Install a new version of Ruby
    rbenv rehash ## magic
    rbenv global 2.0.0-p247 ## more magic
  4. .ruby-version file  ## root of all projects, IDs Ruby version. Ex: 1.8.7-p358
  5. bundle install # in a dir to install appropriate gems
    bundle exec compass compile # Use bundler's gem version managed version of Compass compile. bundle exec = managed version of thing

Designing in the Browser - Mason Wendell

The Panel - John Athayde, Elyse Holladay, Rachel Ober and Pam Selle

If you need more links to Twitters, decks, tools and repos, check out the awesome list o' links by Una Kravets or the 2013 Sassconf schedule.

ST Logging Keyboard Commands.

10.19.2013

Here's a hot trick for Sublime Text: do a Ctrl ` to open up Sublime's console, then put sublime.log_commands(True) into the console and hit Enter. Now your console (probably at the bottom of Sublime) will report what functions occurred for your keyboard and mouse actions. This is useful for a couple of reasons:

CSS Magic: Containing floats (clear-fixing) with overflow: auto;.

10.7.2013

Very Tall Image with Kitten Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, unde, minima dolorum vel molestias in quos beatae sequi harum eos ipsam nam debitis. Pariatur debitis enim blanditiis repellat sunt.

A floated element (like the kitten above) is removed from the flow of the document, and thus its parent element (the paragraph above with the border) won't contain it. If only floated children exist within a parent, that parent won't have any height. Since this standard behavior of CSS is sometimes undesirable, it is sometimes necessary to manually contain floated children.

Back in 2007 (when IE7 was newly released), it took a fair amount of effort to get an element to completely surround its floated children. However, today's browser landscape offers a simpler solution:

.parent { overflow: auto; }

That's it. One standard CSS declaration will cause parents to expand to contain their floated children. This works for Internet Explorer 7 and higher; IE6 and lower require several additional lines of CSS.

Last Month

Next Month