Article Archives

→ Open-Dyslexic Open-Dyslexic is a new open sourced font created to increase readability for readers with dyslexia. #Lazyweb: They have an iOS app, but someone should make a bookmarklet to swap out the font on page with this font for desktop browsers. …	September 19, 2012
→ Responsive Measure A jQuery plugin by Josh Brewer and Mark Christian that adjust the font size based on your ideal line length to keep a consistant typographic measure across all screen sizes. Kinda like FitText.js but for use on body copy. The …	September 19, 2012
WordPress Plugins I Use I think this is a fun and useful style of post that any WordPress blogger can do. It’s always interesting to hear in what ways people are extending what WordPress can do out of the box. I’ll share the ones …	September 19, 2012	120 comments
→ ShopTalk Episode 34 This week Dave and I were joined by Jeremy Keith, long time super genius. We talk about the lack of a main content element in HTML5, the HTML5 vs Native classic debate, mobile first hindering creativity, and more. Big thanks …	September 17, 2012
Rundown of Handling Flexible Media When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an `<article>` that holds a blog post might be 320px wide on a small …	September 17, 2012	22 comments
→ Preprocess THIS! Allison Wagner shares her thoughts after 10 months of working with a CSS preprocessor. Many of the thoughts resonate with my own. On variables: What I love most about them is they force consistency across the design system. Being DRY …	September 13, 2012
CSS-Tricks Chronicle Vol. IV The week in “sort of interesting things that happened to me” and “stuff I’ve been working on.”	September 13, 2012	21 comments
Opt-Out Responsive Design? Should we allow users to opt out of our responsive designs? Isn’t that admitting failure? Or are there reasonable circumstances when it’s a good thing? How would we do it?	September 12, 2012	51 comments
→ ShopTalk Episode 33 This week Dave and I were joined by WordPress mastermind Alex King. We mostly talk about WordPress stuff, including some tech stuff but also bigger issues like the business around it and motivation. Big thanks to BD Conf and Environments …	September 11, 2012
→ This Is Responsive. Brad Frost: Patterns, resources and news for creating responsive web experiences. I was inspired by it and notice there wasn’t anything up for web forms yet so I built one.…	September 11, 2012
Video Source by Screen Size Right after The Lodge opened up around here, I started getting reports right away about some videos not playing on the iPad. Ugh, crap, these are paying customers and they should be able to watch these things on a modern …	September 11, 2012	28 comments
→ “Stacking” Responsive Pattern Demo by Neil Carpenter in which it looks like a bunch of regular blog posts in a row on large screens and turns into a “stack” of blog posts with navigation on small screens.…	September 10, 2012
→ SOLID CSS Miller Medeiros: SOLID is an acronym for five basic principles of object-oriented programming and design that when applied together can make systems easier to maintain and to extend over time.…	September 10, 2012
→ jQuery Fundamentals Rebecca Murphey updates her incredible “guide to the basics of jQuery.”…	September 10, 2012
→ .htaccess Made Easy My Digging Into WordPress partner in crime Jeff Starr now has a brand new book!…	September 10, 2012
Crashing Mobile Webkit One of the big heart sinking bummers when the new design launched was that the announcement blog post would cause Safari on some mobile devices to crash. It would crash my iPhone 4S, I heard reports of crashing other Android …	September 10, 2012	36 comments
CSS-Tricks Chronicle Vol. III Plenty of interesting happenings this week. The new design launched. If you have things to say specially about it, let’s keep them on the launch thread. Bugs on GitHub. One of the biggest bugs during the launch was …	September 8, 2012	22 comments
Design v10 It’s been just about a year since the v9 design. You know what that means! Redesign time! This is, most definitely, the biggest overhaul yet. Not that you won’t recognize it. There is a fresh coat of paint, but …	September 6, 2012	298 comments
→ A Word About CSS4 There is no such thing as it.…	September 4, 2012
Enquire.js – Media Query Callbacks in JavaScript A guest post by Nick Williams. Nick walks us through his new mini JavaScript library for providing callbacks when specified media queries match (or don’t!).	September 4, 2012	50 comments
→ Offscreen Magazine Hey hey, looks who’s in the amazing Issue 3.…	September 3, 2012
CSS :target for Off-Screen Designs Matty Collins shows us how using the Checkbox Hack (or even :target in simple situations) we can create navigation heavy mobile UIs without any JavaScript.	September 3, 2012	12 comments
→ ShopTalk Episode 32 This week Dave and I were joined by Estelle Weyl where we talk about the practicalities of flexbox, getting clients to say yes, .mobi weirdness, and more. Thanks to Squarespace and Environments for Humans for sponsoring.…	August 31, 2012
Play Sound on Hover – Web Audio API Edition The Web Audio API is a totally different beast than HTML5 audio elements. It provides lower level access to the sound system allowing for higher precision sound output. Notary Sojac explains it and provides a simple framework to make working with it easier.	August 31, 2012	28 comments
CSS-Tricks Chronicle Vol. II The week in review, chronicle style.	August 30, 2012	8 comments
→ position: sticky; For real. Eric Bidelman explains. It’s non-standard (yet) but shipping in WebKit nightly and Canary.…	August 30, 2012
→ ShopTalk Episode 31 This week Dave and I were joined by Matt Mullenweg and we talk a bunch about WordPress, security, the culture of distraction, and more. Thanks to Harvest and Environments for Humans for sponsoring. …	August 30, 2012
Responsive Web Above The Fold A guest post by Arley McBlain on using media queries to adjust for available vertical space.	August 28, 2012	50 comments
→ Responsive Retrofitting Go here and install bookmarklet Go to apple.com Resize browser very narrow and click bookmarklet Pretty fun project by Ben Callahan. You can submit your own retrofittings through GitHub.…	August 28, 2012
Retina MacBook, Three Weeks In I rationalized buying a new Retina MacBook Pro a few weeks ago by telling myself 1) it’s my responsibility to stay on top of new things that affect the web 2) I want to make sure the redesign looks good …	August 27, 2012	90 comments
CSS-Tricks Chronicle Vol. I I’m going to start a new style of blog post around here called CSS-Tricks Chronicle. It’s going to be a (probably) weekly roundup of all the relevant happenings around the site and stuff I’m doing. Kind of a throwback …	August 23, 2012	19 comments
→ The innovations of Internet Explorer While IE is the butt of half the web developer jokes ever written, it has been responsible for its fair share of web innovation over the years. Nicholas C. Zakas shares some of that, starting as far back as IE …	August 22, 2012
→ ShopTalk Episode 30 & New Design This week Dave and I were joined by JavaScript avenger Rebecca Murphey where we talk a little #hotdrama followup, the future of JavaScript, GitHub etiquette, charging while learning, and more. And OH HEY there is a brand new design for …	August 21, 2012
CSS-Tricks GitHub Organization There is now an “organization” on GitHub for CSS-Tricks. This is a great feature of GitHub and a perfect fit for us. Why this is good There is a larger core group of people that can work on any …	August 20, 2012	15 comments
Exclude Compressed CSS from Sublime Text 2 Projects How to exclude compressed CSS from Find in Project search results (because it’s not helpful and annoying) in Sublime Text 2.	August 18, 2012	23 comments
→ Understanding CSS3 Flexbox Ben Frain updated his primer on Flexbox to the new standard. Because, you know, the old one is old.…	August 17, 2012
→ 256 Classes Beats an ID According to the spec, one ID should be infinitely more specific than a class. But as it turns out, if you add 256 classes to a single element (same or different) it will override the ID. Dumb little edge case …	August 17, 2012
Don’t Overthink It Grids The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a “main content area” floated to the left a “sidebar” floated to the right, it’s a …	August 14, 2012	107 comments
→ Smashing Mag CSS Q&A 3 The third installment of my recent question and answer series. This one includes code for dealing with retina version of sprites, fiddling with flexbox, and some of my favorite CSS tricks lately.…	August 13, 2012
→ ShopTalk Episode 29 This week Dave and I were joined by Tab Atkins and we talk about Tab’s job as a spec writer working at Google, Flexbox, the future of float clearing, using encoded characters, smooth animations, and more! Thanks to the Responsive …	August 13, 2012
→ Made to Measure Allen Tan: So if static templates are too limiting, but per-piece art direction is too costly, how else can we make scalable, sustainable digital publications that are beautiful and accessible? To find a middle path, we can take a cue …	August 10, 2012
CSS Style Guides As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming …	August 10, 2012	101 comments
New Poll: Do you listen to music while you work? Just a fun little poll to start a conversation about music and working. I know people firmly on either side of this poll: those that never ever listen to anything and those that can’t work without it. Where do you …	August 9, 2012	267 comments
→ Multiple Pseudos Work by Adobe Things are moving along in the pseudo elements world again which is exciting. Alan Stearns put together this mock spec that defines usage like `::before(n)` and `::nth-pseudo()`.…	August 8, 2012
→ ShopTalk Episode 28 Dave and I were joined by Allison House and we talk about getting better at stuff, CSS grids, changing jobs, and more! Thanks to Squarespace (use code shoptalk8 for 10% off any purchase) and Environments for Humans for sponsoring. …	August 8, 2012
“Old” Flexbox and “New” Flexbox Just so everyone is clear on this: “Flexbox” (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years. Changes both to the spec and what browsers have implemented. How To Tell If …	August 7, 2012	38 comments
→ Meny Hakim El Hattab is at it again with a simple, beautiful, three-dimensional way to handle “hidden left side navigation” that’s getting so popular on small screens. …	August 5, 2012
Poll Results: How do you order your CSS properties? Over 10,000 people have spoken: the most popular way to order CSS properties is grouped by type. This is how the votes broke down: Grouped by type (45%) was fairly closely followed up by Randomly (39%). Much less popular …	August 5, 2012	85 comments
CSS Pie Timer Hugo Giraudel shares how he made a “pie timer” in CSS. In his words: It’s basically a piece of pie getting bigger and bigger to become a whole circle.	August 5, 2012	24 comments
Squarespace 6 Squarespace 6 is freshly out. It’s really nice and the start of what I hope is a revolution in what building content websites is like.	August 1, 2012	39 comments