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

Play
Filed under NerdCast

Make your WordPress theme SASSy

Sass and WordPress

BUZZ WORD ALERT!

BUZZ WORD ALERT!

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.

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

Solution:
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