Tag Archives: CSS

Better Off FED: RAD CSS

rad-movie-posterIn 1986, the movie RAD was released, and my life was never really the same. I must’ve watched Cru Jones ride Helltrack a thousand times or more and daydreamed about when I’d get my opportunity to to backflip my bike over some bad guys. The thing is, despite my dreams of grandeur, I never went outside and put in the effort to learn how to actually race a BMX bike – let alone how to backflip. As I got older, I started to recognize that as a kid I’d focused on the glory of getting to ride Helltrack when I should’ve been focused on the story that, with enough dedication and time to practice, you can accomplish anything you set your mind to.

Fast forward 28 years to today you’ll find that I’ve spent the last decade or so putting in the time to practice… HTML & CSS that is. Not backflipping a BMX bike. I’m starting to wonder which of the two is actually harder.

About two years ago I started thinking about how I could pass on my knowledge and teach other developers the things I’ve learned from the countless mistakes I’ve made over the years. What I discovered surprised me. It shouldn’t have, but it did. My words, written or spoken, were not as effective as I’d anticipated. I discovered that – the truth is – most of us need to make mistakes and push forward on our own.

Initially, I felt defeated and ineffective at my job. After all, I was the guy that was supposed to be pushing the team forward. And then like a ton of bricks (or maybe just one brick at a time over several months) it hit me: I needed to provide people with a means to practice. I needed to find ways to stretch peoples’ brains and facilitate them in making mistakes so they could grow on their own.

With that I started writing “challenges” that I sent out weekly to my co-workers. In the last few months I’ve seen my coworkers do some crazy things like carve pumpkins with CSS and create patterns using multiple background linear gradients. But most of all, I’ve seen them grow beyond my wildest dreams.

Starting this week, I’d like to start including you in the challenges. Submit your code in the comments below by Friday Feb. 28, and feel free to use codepen.io

As you may have noticed, I’m pretty enamored with the movie RAD. This week’s challenge is to draw a bicycle using CSS and make it appear as if it’s moving. Extra special bonus points if you can animate it to perform a backflip.

Good luck, and may all your BMX racing dreams come true.

Filed under Code Quiz

NerdCast #78: Developer Download – Nuts and Bolts of HTML and Responsive Design

2014.01-Jason-Dicks-Anthony-Lukes-Anthony-TicknorIn this weeks Developer Download segment Andrew Watson brings together a meeting of the minds to discuss technical odds and ends, frameworks, CSS, and other technical front-end developer goodness. We are joined by Jason Dicks, Anthony Lukes, and Anthony Ticknor to get talk about responsive design and some of our tips and tricks.

Host: Andrew Watson

Guests: Senior Front-End Developers Anthony Lukes, Jason Dicks, and Anthony Ticknor.

Listen Now: Running Time: 0:30:50 / Subscribe on iTunes

Filed under NerdCast

Make your WordPress theme SASSy

Sass and WordPress



If you haven’t heard the news, SASS is where it’s at. What’s SASS you ask? SASS is a CSS extension language that’s all the rage these days. It allows you to do things with CSS you never thought possible, saving vast amounts of time and resources on your projects.

SASS allows you to utilize functionality that isn’t currently available in standard CSS, such as:

  • Variables
  • Nesting
  • Mixins
  • Partials
  • Inheritance
  • Logic

SASS is just a pre-processor written in Ruby that will compile down directly to CSS files. This means that it is fully compatible with any project you currently have that utilizes CSS. Best of all, you can still use all of your previous CSS knowledge within SASS! Use the SASS functionality as little or as much as you’d like, you can always go back later and add more to it as you learn more. You just can’t lose!

SASS Examples

I should make something clear, SASS and SCSS are two different things, and some folks do have a preference over one of the other. The trouble with this is the terms often gets used interchangeably, when people talk about SASS they could mean either one of the syntaxes. Although I state SASS throughout this article I don’t want you to get confused as the syntax I tend to work with more often is SCSS. Information on the differences between the two can be found here.

Now that we have that out of the way, I’d like to point out this article is specifically about using SASS with WordPress, so I’m not going to go to in-depth with functionality, but I’d like to show you a couple cool things that you can do: Read more

Filed under Tech Tips

Tech Tips: Style Guides For The Win

Written by: Susan Robertson

When I started my job about 2 months ago I went through [The Nerdery's] standard Front End Developer training. In it we talked a whole bunch about modular CSS and reusable patterns, it was super awesome. But in the course of it we also talked about style guides. At the beginning of each project they’ve been trying to get started on a style guide first. This is done by building out resusable patterns so that it is all in one place when it comes time to do builds of pages, etc. Read more

Filed under Design, Tech Tips

Tech Tuesday: Skinning Flex Components – Part 1: CSS

This will be a three part series on skinning Flex components. For part one I have chosen to dissolve the myth that Flex 3 can’t truly cascade styles. This three part series will start simple and get more complex with each post. You can use this code to mimic descendant selectors, dimensioning and multiple class names within Flex.

Flex can’t do true cascading styles like HTML (for example a black play button)

YES, flex can do cascading styles. It just requires a different approach. A programmatic approach. Don’t worry, I assure you that even a non-programmer can pick this one up.

Lets dive a little deeper. Cascading styles refers to the ability to start with a button, style it into a black button then go a step further and make it a play button. First, create a button and use some CSS to style various properties of that button.
Read more

Filed under Technology

Profiles in Nerdery: Brian Litzinger, artist turned programmer

  • Astrological Sign: I honestly don’t know. Never really looked into it.
  • Time at the Nerdery: Since September 2008.
  • Area of expertise: Front end development mostly (HTML, CSS, JS), but I can knock around PHP pretty well, and recently did my first Rails project. I started off as a designer . . . who knew an Art degree would lead to programming?
  • When people ask you what you do, how do you respond: I make websites. Any details further than that and people kind of nod their heads and pretend they know what I’m talking about, but the “I make websites” usually brings an “oh, cool” response.
  • Favorite kinds of projects to work on: Ones that I can focus on for an extended period of time. I can juggle multiple projects, but its much more fun to have one or two projects that I can devote time to, but if they last for more than 2-3 months I start to burn out.
  • What one thing about The Nerdery surprises people the most when you tell them about it: That I bring my dog to work. Also when I tell people it’s doubled in size in the last year.
  • Seven dream Jeopardy Categories: 1) The IE 6 Box Model; 2) Name that CSS bug!; 3)Definition Lists or Unordered Lists; 4) IE 6 CSS hacks; 5) Bathroom tile removal tools; 6) Ways to annoy my wife; 7) World of Warcraft (pre marital bliss).
  • Favorite Fictional Nerd: Hiro, from Heroes, but he lost his powers recently and kind of sucks at the moment. There was a foreshadowing scene in the first season where he was a ninja and didn’t talk like a nerd, so I’m eagerly awaiting the episode when he becomes a kick ass ninja, but I guess he wouldn’t be a nerd anymore.
  • According to the Wikipedia entry on Nerd, some nerds show a pronounced interest in subjects which others tend to find dull or complex and difficult to comprehend, or overly mature for their age, especially topics related to science, disambiguation, mathematics and technology. Do you know what disambiguation is: That question is too long. Can I pass?

Tech Tuesday: Using anchor tags in ActionScript TextFields

This example is for anyone who needs to use anchor tags in ActionScript TextFields. If you’re using AIR then the best route is to use an HTMLLoader to load in the raw HTML. If an HTMLLoader is not an option you can use this example to create a wrapper class that mimics the anchor tag functionality. Before we get started it is important to note that TextFields have a number of properties, formats, and styles available which all have an effect on the way text is rendered. This example takes advantage of a specific set of properties in order to accurately determine the line number and char location of certain strings. Variables may require some adjustments / tweaks (or may not work at all) if the TextField properties are changed.
Read more

Filed under Technology

Most beautiful Web sites of 2008

CrazyLeaf Designs has named their Most Beautiful Web Sites of 2008. The choose 50 of the best CSS and Flash designs from their Web site showcase. Some of the sites are really pretty, though after a bit they start to seem a little same-y looking. A lot of them seem to have the cartoony look of a Ferry Halim game (beware: clicking that link might get you sucked into beautiful flash games and cause you to lose many hours of your time) look about them.

So here’s a questions for you, what do you think are some of the most beautiful sites on the Web?

Filed under Design

Two on CSS for you

Six Revisions has six questions for Eric Meyer on CSS3. Meyer an author of six books on CSS and a member of A List Apart talks about what he’s most exited about in CSS3 and what designers and developers can do to help with the adoption and development of the spec.

Along the same lines Smashing Magazine puts together a list of 50 Extremely Useful And Powerful CSS Tools.

What do you think is the most powerful CSS tool?

Filed under Technology

Friday Links: On CSS, Information Architects, and MacGyver

Read, Write, Web has a great post about a study that has found casual Internet use is good for kids. If you’re so inclined you can read the report, Living and Learning with New Media.

I really liked the 37signals piece on Defensive Design and anticipating where your customers/clients might slip-up and designing so that when they do slip-up it doesn’t have serious repercussions.

Ad Freak is enamored with Colle + McVoy’s new take on the Minnesota Lottery drawings.

The 90-9-1 Principle is about how users tends to participate in online social communities. The overarching theory is that 90% of the people lurk, 9% will add to something already created, and 1% actually do the creation. Interesting reading. [via]

Three Minds asks what’s next for Information Architects?

Web Controversy of the Week: Moms vs. Motrin. I don’t know about you, but I love this kind of stuff. It fascinates me on so many levels. First of all, I am surprised that people are paying such close attention to Motrin’s Web site. Second, I think this is a lesson in how fast a community can organize, especially when you piss off the moms. Third, it gives anyone who works in or with the media a real-life example of how to deal with a very public backlash against you.

It’s Friday, have a little fun, watch 100 movies spoiled in under five minutes. Warning, there are spoilers. This reminds me of that one Threadless t-shirt (sadly, it’s sold out).

Feeling a little MacGyvery? Try to make your own speakers using a few paper cups and some ear buds.

Speaking of, the Vitamin piece “Tables: The next evolution in CSS Layout” compares Web designers to modern-day MacGyvers.

Okay, I saw this all over the Internet this week, but it took me until like the sixth mention to actually watch the video. It’s a viral marketing video for Guitar Hero featuring a a kid playing “Prisoner of Society” by The Living End on his bike. You have to watch to understand it. It’s pretty cool (even if it is a big ol’ advertisement).

So what were you reading on the Internet this week?

Filed under Links