Post-AWDGCSS Recap

highres_331022772
Standard

awdgThank you for having me tonight, AWDG! Here are all of the links referenced in my slides (and a few extras). If you have any questions, please don’t hesitate to get in touch!

Slides

CSS Preprocessors

Compilers

Links

Demo Project Files

Grab them here: http://hrrsn.me/Tm0k

Et Cetera

For those that asked: my slidedeck uses Reveal.js – http://lab.hakim.se/reveal-js/

Preprocess all the things!

Standard

preprocess

On October 17th, I’ll be giving my first talk in quite some time, and I’ll be covering a topic that I once feared, but have quickly grown to love: CSS Preprocessors.

Writing CSS isn’t inherently difficult, but it could be much more efficient to author. In this talk, I’ll introduce you to the wonderful world of pre-processing with LESS and Sass. We’ll work through a sample project, where you’ll learn how to write your own mixins, use variables, and more. (And fear not, getting started is easier than you ever imagined.)

TransformAthens — October 17, 2013

Update: I’m also going to be giving this talk at the October 22 RefreshAugusta. You can RSVP here: http://www.meetup.com/RefreshAugusta/events/134933502/

User Research Workshop

Standard

Jenn DownsNext weekend, MailChimp’s Jenn Downs will be conducting a half-day user research workshop at TheClubhou.se. I’m really excited to have Jenn back in Augusta so soon after Web Afternoon Augusta.

In this workshop you’ll learn how to design moderated and unmoderated usability tests and user interviews, recruit test participants, interview customers (by asking all the right questions), and analyze and share results that really get noticed and read. You’ll also look into running tests on mobile devices with new usability testing apps and DIY methods.

This event is strictly limited to 20 seats. Admission is free thanks to the kind support of MailChimp, but you must RSVP in order to attend. Lunch will be provided.

RSVP for the User Research Workshop →

Upcoming Conferences

Standard

I’ll be attending at least two web conferences in the next two months. (And possibly a third.) First up: A Web Afternoon in Charlotte, NC on 22 September. Then there’s Converge Florida in Tallahassee, FL on 4-5 October. In both cases, these are events that were successful enough in their home towns – Atlanta & Columbia SC respectively – that they’ve taken their shows on the road.

I like to describe A Web Afternoon as a half-day of awesomeness. (Tickets are only $49 if you snag one before 19 September. Follow @webafternoon on Twitter and there may even be promo codes to make your ticket even cheaper.)

Converge FL is an exceptional two-day conference. The first day is full of workshops. Day 2: awesome speaker after awesome speaker. Speakers include Leslie Jensen-Inman, Chris Coyier, Cameron Moll, Carl Smith, Jina Bolton, J Cornelius… and the list goes on. Tickets are still available for $250.00.

So what am I doing at these conferences? I’ll be live-tweeting from them. If you can’t attend either, follow @webafternoon or @convergese on the day of the events. Closer to each event I’ll share official hashtags and alternate accounts for both just in case I get rate-limited.

An Afternoon in Charlotte

Standard

Web Afternoon

A Web Afternoon is making its way to Charlotte, NC next month. Registration is now open for this mini-event, and if you act fast (before August 25) you can snag a ticket for around $30.

Why go to A Web Afternoon? It’s a half-day of awesomeness. The half-day format won’t kill your weekend or keep you away from work. You’ll see high-quality speakers for less than it’d cost to take a date to the movies.

CSS Preprocessing Resources

preprocess
Standard

This is constantly being updated. Scroll to the bottom of the post to see a log of recent updates.

A few weeks ago, I posted a link to Chris Coyier’s “Get Yourself Pre-Processing in a Few Minutes.” If you haven’t watched it yet, it’s well worth the five minutes of your time. Why should you use a CSS Pre-Processor? For me, it’s simple: it saves time and reduces the effort it takes for me to write lots of complex CSS. Below are some links to help you get started. If you know of any links, applications, etc that ought to be added, let me know!

CSS Pre-Processing Languages

  • Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
  • LESS “extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.”
  • xCSS – an object-oriented CSS Framework
  • Stylus — a dynamic stylesheet language designed influenced by Sass and LESS.

Applications

  • Codekit (Mac) – Use for Less, Sass/SCSS, HAML, Jade, Optimizing Images, etc. (My personal favorite.) $25
  • Prepros (Mac/PC/Chrome Extension) Compiles LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml and Markdown.  Free
  • Koala (Mac/PC/Linux/Ubuntu) — Supports Less, Sass, CoffeeScript and Compass. Free
  • Hammer (Mac) — Built-in support for Sass (with Bourbon), CoffeeScript, HAML & Markdown. $23.99
  • Scout.app (PC/Mac) — Compass and Sass compiler. Free
  • Compass.app (PC/Mac/Linux) — Compass and Sass compiler. $10
  • WinLESS (PC)  — Windows GUI for LESS.js. Free
  • SimpLESS (Mac/PC) — LESS compiler. Free

Frameworks/Mixin Libraries

  • Less
    • Bootstrap — Popular HTML/CSS framework
    • LESS Elements — a collection of useful mixins for LESS
    • LESSHat — a universal mixin library
    • HelpLess — A LESS Library
    • 3L — Lots of Love for LESS, a mixin library
    • Schema — Responsive UI framework
  • Sass
    • Sass Bootstrap — A Sass-based port of the popular Less-based HTML/CSS framework.
    • Foundation 4 —
    • Gravity Framework — HTML5 and CSS3 framework
    • Gumby — CSS Framework
    • Compass — Sass CSS Authoring Framework
    • Bourbon — A Sass Mixin Library
    • Bourbon Neat — a lightweight semantic grid framework for Sass and Bourbon.
    • Susy — Responsive grids for Compass
    • Sassy Buttons — Awesome CSS3 buttons with Compass and Sass
    • Sassaparilla — A quick start template that leverages Sass and Compass. (It’s not a boilerplate or a theme.)

Further Reading

Updates

  • 16 Aug 2013 — Updated the list of applications and reorganized the Frameworks/Mixin Libraries.
  • 03 Oct 2013 — Added Schema to LESS Frameworks/Libraries