Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

9 comments

SMACSS-Press

The following is a guest post by Scott Fennell. Scott saw a recent post here on CSS-Tricks about class names in WordPress and had some of his own ideas about exerting control, rather than leaving things as they are. His idea is to enforce a more SMACSS style philosophy where possible.

Sponsor: Treehouse

Treehouse has been a long time sponsor here on CSS-Tricks. You know them. They do online training for web and mobile design and development. Here's a couple of things that I think are especially cool about Treehouse:

  • There are conference videos in there you won't find anywhere else. I was just poking around and found three videos of me at conferences I was recently at!
  • There are of course tons of courses, but they are very well organized into tracks
19 comments

Exposing Additional Form Fields via Checked Radio Buttons

There is a :checked pseudo class in CSS. I often think of it in connection with the "checkbox hack", in which you use it on a hidden checkbox with the ~ general sibling combinator to do simulate toggling behavior without any JavaScript. It's a hack because now you have these stray form elements on the page that really aren't for a form. Not a huge deal, as I'm sure you can work around it accessibility wise, but there is …

The CodePen Job Board

We just launched it! It's a niche job board (of course) targeted at front end developers and designers.

Not only is it the CodePen Job Board, but it's also the official job board here on CSS-Tricks and on ShopTalk as well.

We hope it's both useful to those of you looking for jobs in this field and companies looking to hire.…

8 comments

What is bookkeeping for a freelance front end developer?

The following is a guest post by my friend Allan Branch. Allan runs Less Accounting, web software for accounting. True story for me: it's only been this last year where I've gotten my stuff together and taken accounting seriously. (With a lot of help, of course, thanks Dee!) The advantages are significant. Not worrying about tax time and owing huge unknown amounts of money. Not scrambling to do everything at the last minute. But my favorite thing is

16 comments

OS Specific Fonts in CSS

I'm not sure what the exact use case was, but Sam Stephenson recently asked me:

@chriscoyier What's the best way to reference the OS X system font in CSS (to get Lucida Grande or Helvetica, as appropriate)?

— Sam Stephenson (@sstephenson) November 20, 2014

15 comments

Back to Basics With WordPress CSS: Understanding the Native Classes

The following is a guest post by Karol K. Karol is writing on behalf of ThemeIsle.com, a WordPress theme seller. He pitched me this post and I was into the idea. I'm the kind of front end developer that likes to do things my way and force whatever tool I'm using into it. There is something to be said for that, but only to a point. Burning hours on a philosophical difference on naming typically isn't worth it.

Sponsor: See how your visitors are really using your website

Hotjar is a new and easy way to truly understand your web and mobile site visitors. Now you can improve your site user experience and conversion rates by using Heatmaps, Session Playback, Proactive Chat, Polls, Funnel Analysis, Polls and Surveys — all in one central interface. Get free early access now!

Hotjar is changing the way small and medium businesses can improve their sites' user experience.

– CreativeBloq

(Advertising on CSS-Tricks)

WOFF2

I just learned that this is a thing. Sergej Müller has a really succinct page explaining what it is (it's an extra-compressed version of WOFF, the font file format) and how to use it.

And speaking of web type, check out Bram Stein's The State of Web Type (beta) for support of the loads of related browser features.…

21 comments

Clipping and Masking in CSS

Both of these things are used to hide some parts of elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes, different technologies involved, the new and the deprecated, and browser support differences.

And sadly there is quite a bit of outdated information out there. Let's see if we can sort it out.…

19 comments

Automating CSS Regression Testing

The following is a guest post by Garris Shipon. We've touched on the four types of CSS testing here before. Regression testing is the hardest. It's the type where you're trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsive designs. Garris built a tool for doing this as he embarked upon a new responsive design for a large scale site. Here, he'll walk you through

4 comments

Watch Dogs

It's Blue Beanie Day! A day celebrating and showing support for web standards. I'm a little biased perhaps, since it's my field, but I believe the web is among the most important things human beings have ever done. For starters, it enables international commerce, it enables connection and collaboration between people who may never have had that opportunity, it can make news more instant and honest, and it's a knowledge base bigger than we can even comprehend. #deepthoughts.

The …

32 comments

What’s So Great About Bower?

The following is a guest post by Dan Sundy from Helios Design Labs. Dan is both going to explain how to use Bower and make a case for doing so, from the perspective of someone who resisted the idea at first.

Creating Animations and Interactions with Physical Models

Ralph Thomas:

Physical models let us easily create rich animations and interactions that feel more natural by conforming to our innate expectations of how things should move and respond.

I think the days of .fadeOut() and .slideDown() are over.…

Sponsor: statico.io – front end optimization made easy

statico.io offers front end optimization as a service for web designers and developers. The service optimizes HTML, CSS, JavaScript, fonts, and images, with simple annotations like <link href="home.less?sio-css-embed=enabled&sio-css-uncss=enabled" rel="stylesheet">. It can also integrate with a CDN to deliver the optimized static assets.

It's free for sites up to 10,000 monthly unique visits. Get started today - no signup required.

What I like about statico is that it's a local stand-alone build tool. You configure it to do what you …

73 comments

Sublime Text for Front End Developers

The following is a guest post by Wes Bos. Wes has been writing about Sublime Text and all the great stuff it brings to code editing for a while now. He has a new book and video package out now: Sublime Text Power User. I met him at a conference recently and saw his talk on Sublime Text. The conference was buzzing about it. Newbie's jaws were dropped and old pro's learned new tricks. Here, Wes is going

Sponsor: Frontend Masters – Expert Web Development Training

Frontend Masters produces quality video training by industry leaders like Kyle Simpson, Douglas Crockford and Estelle Weyl. These are super in-depth courses designed for intermediate and advanced developers.

They have two fantastic workshops coming up:

The State Of Animation 2014

Rachel Nabors:

I met and interviewed dozens of people who use and champion both CSS and JavaScript. After interviewing so many developers, designers and browser representatives, I discovered a technical and human story to be told.…

Perf.Rocks

Find resources that help you build lightning fast websites

by Daniel Guillan…

Performance Budget Metrics

Tim Kadlec groups all the things you could measure in a performance budget into four groups:

  1. Milestone timings (Example: time to visually complete)
  2. SpeedIndex (WebPageTest's well-loved but isolated score)
  3. Quantity based metrics (Example: number of requests)
  4. Rule based metrics (Example: getting a "B" in "Use cookie-free domains")
6 comments

CSS-Tricks Chronicle XX

I thought for this edition of Chronicle I'd focus on some web stuff that I've been enjoying lately. …

CSS Specificity Graph Generator

Spikes are bad, and the general trend should be towards higher specificity later in the stylesheet.

Jonas Ohlsson created a tool around Harry Roberts concept.…

Fun Times with CSS Counters

Some bonafide CSS trickery from Will Boyd, like counted selected items and continuing a count across multiple sections.…

26 comments

Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements

a CSS-Tricks reader wrote to me with a layout question. A variety of elements need to be arranged in a horizontal bar. Some of fixed size, some vary, and one needs to take up the rest of the space. Flexbox is beautifully suited for this, so I explain with that.

New T-Shirts! One Time Printing, Limited Time Only

It's weird. It's whimsical. It's light-hearted. It's soft'er'n'heck. Your mom will squint her eyes at you. It has a laptop with legs holding a floppy disk. It's designed by Jon Burgerman. I love it.

Taking orders for less than two weeks, then we'll print them and ship them out. Plus we'll send you an additional CSS-Tricks t-shirt for free. …

16 comments

Sketchy Avatars with CSS clip-path

The following is a guest post by Ryan Scherf. Ryan found a neat way to give avatars kind of rough, uneven, varied edges. Kinda like they were cut out with scissors by someone who wasn't very good at using scissors. What's nice is it's naturally a progressive enhancement technique and it can be done through just CSS.

Sponsor: Dash – Monitor your Website, Business, & Life

Dash is a website that lets people quickly create real-time dashboards. There are dozens of pre-built widgets for services like Google Analytics, GitHub, Twitter, and Fitbit. Dash also has an API that allows you to share data from Dropbox or the web with custom widgets like Line Charts, Speedometers, or Do It Yourself (iframe). If you sign up for Dash today, your first dashboard is free forever.

Little note from me here: OMGYOUGUYS Dash is super cool. Number one, building …

29 comments

5 Gotchas You’re Gonna Face Getting Inline SVG Into Production

The following is a guest post by Rob Levin. Rob is a Senior UI/UX Developer at Mavenlink, and coauthor of the Unicorn UI CSS Button Library. Their 2.0 release is using an SVG icon system, and here he shares some issues he's ran into along the way, and how you can watch out for them and fix them. Plus, Rob provides a full system you can use, including a working build process and demo.

15 comments

Collision Detection

I posted about jQuery UI's position feature years ago, but I was just thinking of how useful the collision detection part of that feature is. In a nutshell: you can position an element where you want them to go, but if it calculates that where you're putting it would be offscreen or otherwise hidden, it will adjust the positioning to fix it. …

15 comments

SVG Animation and CSS Transforms: A Complicated Love Story

The following is a guest post by Jack Doyle, author of the GreenSock Animation Platform (GSAP). Jack has been deep in the woods of web animation for a long time, trying to make it easier and better. He's written here before, talking about how JavaScript animation can be the most performant choice (Google even recommends it). This time, he focuses on SVG animation, some pretty scary issues you may come across while manipulating them with CSS, and how you

Firefox Developer Edition

  • For a normal front end dev like me, Valence is the most interesting feature. It's like how you can inspect iOS simulator through Safari, only it looks like you can do more with it, like inspect Chrome (weird), a Firefox OS app, or any other remote runtime.
  • There isn't too much else brand new and exciting that we haven't seen before from the Firefox Dev Tools. This seems just like a nice first step. A big public statement like: We

Sponsor: Extract for Brackets

Autocomplete is a pretty excellent feature of code editors, right? It helps us type faster and more accurately, and suggests things that might not immediately come to mind. (Was that white-space: prewrap; or whitespace: pre-wrap; again?)

Extract, a new Creative Cloud feature of the code editor Brackets, makes autocomplete way more powerful. Imagine if you had a specific layer selected in Photoshop, you're writing some CSS, and the color autocomplete suggested the fill color of that layer. Or …

20 comments

Styling Cross-Browser Compatible Range Inputs with CSS

The following is a guest post by Daniel Stern. Daniel shared with me a tool he created called range.css, which is for styling <input type="range"/>. This is one of those tricky things, because it requires a weird mix of normal standardized selectors and properties and non-standard and prefixed selectors and properties. I invited Daniel to explain all that.

15 comments

How SVG Fragment Identifiers Work

I've talked a good bit about SVG's <use></use> around here and using it to build an icon system. The beauty of <use></use> is that you can reference just a part of some SVG defined elsewhere and draw just that part somewhere else. That ability allows you to build a whole system out of it, solving the "many images in one request, because that's super efficient" problem that we've solved in the past with CSS sprites and icon fonts.

But …

25 comments

Taking Control of the CSS/JS that WordPress Plugins Load

The other day on ShopTalk a question we got led us down a short tangent on WordPress plugins, the resources they load, and what that would look like in a perfect world. I ended up writing up some thoughts on it and getting some feedback. I think it came to a somewhat satisfying conclusion so I figured I write it up.…

The Specificity Graph

Harry Roberts, on charting CSS selector specificity across entire codebases:

A spiky graph is a bad graph.

I would think if you went 100% on a methodology that encouraged class names for everything, your chart would be damn near flat. I wonder if that's a worthy goal. Something to draw a line in the sand on, for the good of a project. …

Sponsor: Wufoo

I'm posting this just as a big ol' high five to Wufoo for being a long time sponsor of CSS-Tricks.

Wufoo is a web app for building web forms. Things like contact forms, conference registration forms, t-shirt selling forms, wedding RSVP's, you name it. You put the forms on your own site (if you like). They work on small screens. They don't get spammed. They save their data forever. They can be multi-page and use logic. Everything you need a …

21 comments

Datalists for Different Input Types

I saw an HTML5 date input the other day, which had the dropdown arrow on the right, which I've grown accustom to clicking to reveal a calendar datepicker in which to choose a date.

Typically, that looks like this:…

9 comments

How SVG Shape Morphing Works

While animating SVG with CSS is easy and comfortable, CSS can't animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren't possible to change or animate in CSS. You can animate them through SMIL though. Sara Soueidan covers this in her guide to SMIL here on CSS-Tricks, but I thought I would shine a light on this particular ability.…

Sponsor: Hack Reactor’s Immersive Remote Beta Course

Hack Reactor's Coding School is accepting applications for its next online immersive course, Remote Beta. Their team of exceptional instructors and staff work towards a two-fold mission of empowering people and transforming education through rapid-iteration teaching. Students build the skills and confidence they need to graduate as mid-to-senior level engineers and work for top tech companies in both backend and front end tasks.

Apply today for an upcoming onsite or online cohort and be on your way to becoming an …

Lobotomized Owls

I had a post in my drafts for CSS-Tricks recently I called "Removing the Space from the Bottom of Modules". It's all about that tricky situation where you want even padding all the way around some elements to visually separate them. But elements inside will also need bottom margins, and that might lead to extra space along the bottom where that margin hits the padding.

Apparently I'm getting old and losing my mind, because I've already written about it. …