-
Content Folding
Chris Coyier has some tips on using the new CSS Regions functionality with responsive layouts.
Visit -
About HTML semantics and front-end architecture
Great piece by Nicolas Gallagher on smrt use of class names and other naming conventions in front-end develoment.
Visit -
Prix Fixe
Really nice overview of the whole CSS venor prefix kerfluffle by Jeremy Keith. My opinion, predicatably, is that i dont really care. I’m just here to make shit, not argue about academic details like this. Long as I can get my box shadows and transitions and transforms and gradients, i really don’t care what, exactly, the code looks like (Sass, of course, helps me not care).
Visit -
Scaling with EM units
Great concept that willwork neatly with some designs (and not others).
Visit -
The many ways to work with CSS preprocessors
There’s a fair amount of confusion surrounding CSS preprocessors like Sass and LESS, and I think some of it has to do with the fact that there are so many different ways you can use them. I thought I’d outline the different approaches, and some of the pros/cons to them.
More -
* { box-sizing: border-box } FTW
I’ve recently started using border-box a lot, and Paul’s right: FTMFW.
Visit -
On CSS preprocessors
Over the past couple of years, I’ve become a huge fan of Sass. It’s really the only way I write CSS now, and frankly, if anyone tried to make me write plain ol’ CSS I’d probably knee them straight in the taint.
But CSS preprocessors like Sass and LESS aren’t for everyone. At least not yet. There’s still a lot of resistance to them from the community. In fact, I resisted them for a long time, myself (here’s an old post from Nathan Borror’s blog where I outwardly hated on Sass). When you’re very comfortable with something, like many of us are with CSS, it’s hard to switch to doing it a different way.
More -
Building Twitter Bootstrap
On one hand, I’m thrilled to see this ALA piece on Twitter Bootstrap, because I think Bootstrap is extremely well-done, and because it lends some credibility to my original 2007 concept of CSS Frameworks, which a lot of traditionalists shunned hard. On the other hand, Mark Otto’s article is yet another example of my complaint that ALA is focusing on the same things in 2012 that they were in 2007.
Visit -
Forest, trees, and acko.net
Few people can take the fun out of something quicker than an over-zealous user experience nerd.
Over the weekend, I came across Steven Wittens’ blog acko.net. If you read Steven’s About Page, you’ll discover that he’s a programmer who likes to “build and design cool pieces of technology.” And that’s exactly what he’s done with the latest version of his personal site. The entire UI is done in 3D, using Javascript, CSS, and not a single image. In order to build it, he had to first build his own 3D scene editor for Three.js. The end result is a mind-bending UI that not only animates perspective changes on each individual page as you scroll, but also neatly uses the HTML5 pushState API to animate changes from page to page. The whole thing is responsive, and gracefully degrades for smaller screens and browsers without support for the 3D goodness.
More -
On “Responsive Web Design” and the mobile context
A few months back, Ethan Marcotte, a web designer and developer I have a great deal of respect for, wrote a great piece on A List Apart entitled Responsive Web Design. The gist of the article is that, by using CSS media queries, fluid grids, and flexible images, you can craft a single HTML page that “responds” to varying viewport sizes with different layouts, unique design elements, and more.
It’s a great technique that has many, many potential uses. One use that quickly surfaced and got the attention of the web design community was the idea of using this technique to “mobilize” a site — that is, to make a single page that adapted its layout appropriately for mobile devices, such as smartphones. Back in June, I tweeted: “‘Responsive Web Design’ is way cool — but I rarely want to serve the same content to devices with different sized screens. It ignores context.” No one really paid any attention to me.
More -
HTML5 Readiness
Very cool CSS-powered infographic by Paul Irish and Divya Manian.
Visit -
When can I use…
Handy chart detailing “when you can use” various advanced web development techniques.
Visit -
Nicole Sullivan: CSS Wish List
Nicole continues to flesh out her ideas on how CSS ought to work. Aside from a few syntax gripes, I’d love to see this stuff in CSS — but I don’t think it’ll ever happen. It’s really unfortunate that the working group isn’t interested in hearing feedback like this. In the meantime, there’s always SASS or Less.
Visit -
CSS Transform Creator
This’ll be handy until I’ve used the CSS transform syntax enough to remember what all the options do.
Visit -
QuirksBlog: There is no WebKit on Mobile
PPK details the myth that is the idea that “WebKit on mobile is taking over.” His point, which is totally valid, is that while WebKit is indeed becoming the dominant rendering engine on mobile platforms, each of those platforms has distinctly different versions of WebKit, so the idea that if you build for WebKit, all of these devices will render your site the exact same way is a misconception. His point is well taken, if a bit dramatic. It’s true that there are subtle differences between each version, and it’s also true that most people don’t realize this. But, in the real-world, they’re “close enough” that targeting WebKit will generally get you a very similar experience on all these platforms.
Visit -
Uploadiify JQuery File Upload Plugin
What it says it is.
Visit -
CSS Prism, a CSS color inspector, by Ryan Berg
Ryan’s little CSS toy is pretty awesome. Check it out.
Visit -
John Daggett’s proposel to the W3 on advanced typography features in CSS
Yes, please!
Visit -
SlickMap CSS — A Visual Sitemapping Tool for Web Developers
Pretty clever. Using your site’s typical unordered list navigation, this styleheet will produce a great-looking sitemap suitable for giving to clients or bosses. Fun idea by Matt Everson.
Visit -
Introducing Typekit
Jeff Veen, who I have mad, mad respect and admiration for, announces his company’s new project: TypeKit. It’s basically a hosted solution for web fonts, wherein Jeff and team negotiate a license with font foundries, and then you (the average web developer) pay Jeff and team a fee in order to use the fonts. It will use standards CSS @font-face embedding, and automatically switch out Opentype for EOT based on a user’s browser. This all sounds great, but the post is a bit short on details, and I definitely have questions: will it scale? How much will it cost? What will the license look like? All concerns people have over a subscription-based music service versus the iTunes model apply, here. What happens when you unsubscribe? Are the plans per-site or per-designer? And so forth. So, bottom line: sounds like there’s a lot of potential, here, but I’ll save my fanboyish excitement for when I have more information.
Visit -
On applying OOP concepts to CSS
Last night, while work on a very cool client project for Blue Flavor, I took a short break to make the following tweet: “It’s amazing what you can do in very little code when you apply object-oriented principles to CSS. Wish more front-end devs understood OOP.”
I got a surprising number of responses from people asking what I meant, exactly, and for examples. I also got several responses, and a few IMs, from people touting Compass and Sass, a pair of Ruby projects that provide useful language features and syntax to CSS and CSS frameworks, allowing you to do all sorts of fancy things.
More -
Xian’s django_compressor
I’ve tried pretty much all of the Django CSS and/or JSS compression apps, and Christian Metts’ django_compressor looks like the winner to me. Why? Mostly because it doesn’t make me list all my CSS/JS files in my settings — it just reads it straight from the
Visitlinkandscripttags in my HTML templates. This is how it should be. Well-done, Xian! -
Nicole Sullivan: Object Oriented CSS video on YDN
Really great talk by Nicole Sullivan on what she calls “Object Oriented CSS.” This is more or less the methodology I started using a coupe years ago that got me talking about what I called CSS “frameworks,” and I still believe it’s the best way to write, re-use, and maintain CSS. Nicole has some great tips, including some I hadn’t heard before. You can also view the slides on Slideshare.
Visit -
fuck web 2.0
Funny
Visit -
Fluid 960 Grid System
A really complete and nice-looking CSS framework that satisfies one common complaint about many CSS framework: lack of fluid-width support (I personally usually go fixed-width, but I know this is an issue for a lot of people). By Stephen Bau](http://www.domain7.com/WhoWeAre/StephenBau.html). Good stuff!
Visit -
24 ways: Making Modular Layout Systems
Jason Santa Maria details the CSS framework he built to craft the beautiful layouts he uses on his blog. It happens to be very similar to what I’ve been using for sometime, and also similar to how Blueprint CSS handles layout. I’m glad to see more people getting on board with this kind of thing. CSS should be used to build layout systems, not individual layouts.
Visit -
Jon Tan: @font-face in IE: Making Web Fonts Work
Jon has a good piece on @font-face, and specifically how to make it work in both IE and other browsers. Great stuff.
Visit -
Eric Meyers: JavaScript Will Save Us All
Eric’s got some great thoughts on how we can use JavaScript to get some of the CSS functionality we’d like to see. Some of it is a little bit pie in the sky and maybe not completely practical (for example, I don’t believe Gecko makes unrecognized CSS properties accessible from JavaScript) but the general concept is great. It’s all about getting shit done in an elegant way, rather than putting all the focus on doing things exactly how the standards would suggest — and you know I like that.
Visit -
CSS Browser Selector
This seems like such a smart, elegant, simple solution to targeting browsers with CSS - I’m surprised no one thought of it before.
Visit -
Wilson Miner redesign
Four score and seven years ago, there was a designer and blogger who went by the name “Wilson Miner,” and he was good (at both design and blogging). Then, he was swallowed up by some large company with a fruit for a name, never to be seen again. Today, he has resurfaced, with a new design for his personal site. And it is awesome. Love the classic 60s posters inspiration and the treatment of Wilson’s trademark green. Speaking of the green: check out the way everything on the page is opacity-driven, so that he can change the green to some other color with little to no effort.
“Little to no effort” is really important to guys who only blog once a year, it seems. :)
Visit -
CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer
A nice selection of CSS filters for many of today’s browsers. While I certainly advocate avoiding these kinds of hacks whenever possible, there are times when you really do need them. Via Inman.
Visit -
Dave Shea: Zoom
Dave chimes in on a topic that is very relevant to me lately. He says:
> I wonder whether designing around scaling text is still a skill we need to hold on to, and for how long.
I also wondered aloud whether we still need to be using relative unit for type in my typography talk in Sydney a couple weeks ago, and the Twitter haters came out of the woodwork to say that I didn’t care about accessibility and and I was “not thinking about about my fellow man.” It’ll be interesting to see how they react when Dave wonders the same thing.
Visit -
Jina Bolton: Make it modular
More great thoughts on markup and CSS coding practices, this time from my homey J.B., who I am (apparently) doing a world tour with this month.
Visit -
Natalie Downe: CSS Systems for writing maintainable CSS
Natalie (who, for the record, is one of the friendliest people I’ve ever met!) has some really great tips for writing CSS in her slides from a recent talk. Be sure to download the PDF version, which includes her notes. One of my favorite bits in here is her definition of the difference between a framework and a library. It may not be perfect, but it’s the best I’ve heard, especially as it relates to CSS frameworks (and God knows I’ve struggled to come up with a definition myself):
> I feel the need to de?ne what I call a framework. For me this is something that alters how you write HTML itself. This is different from a library, which simply provides individually reusable components.
This is a really solid definition (even if it means I’ve been using the word “framework” incorrectly), and it pretty well encapsulates the reason why I really liked Blueprint when it was released, and am not such a big fan anymore. When Blueprint first came out, it was much closer to the library side, wherein it didn’t define how you write your HTML (at least: not very much). Today, it requires you to liter your markup with tons of
divelements — and while this doesn’t do much real-world harm, it does sort of bother the aesthetics of us who grew up on web standards and best practices.As you might expect from something coming out of the Clearleft camp, Natalie’s CSS System presentation seems pretty focused on their usually-fluid-width, non-pixel-precise sort of design, but I think most of the concepts within can be tweaked to work for those of us who are more about the whole “make something in Photoshop and then make the browser version of it replicate that as closely as possible” approach.
Even though Natalie says she doesn’t like CSS frameworks, I think her CSS system approach actually has a lot in common with the idea of a framework (or library, or whatever you want to call it). In the end, the point of both is to come up with reusable, consistent development patterns that allow you to work in a way that’s more efficient, maintainable, and elegant.
People — especially those who seem to oppose the idea of frameworks for CSS — like to point out that CSS isn’t programming. Of course it’s not. But it is code. And it turns out that our programmer friends are a helluva lot better at managing code than most of us designers are. One of the main ways programmers manage code is to refactor things into a framework. And although not all of the framework concepts may translate well to CSS, the core idea of writing, storing, and maintaining your code in such a way that encourages reusability, offers “baked-in” browser compatibility, provides sensible defaults and hooks for overriding them, and keeps you from repeating yourself is smart stuff, and I’m glad to see other front-end developers finally starting to get on board.
As I talk to people who write CSS for a living, I’m constantly shocked at just how much people repeat themselves and make their life more difficult in the long run by not reusing code (and by “reusing,” I don’t mean copying-and-pasting).
Well done, Nat!
Visit -
Five CSS design browser differences I can live with
Good stuff by Andy Clarke. I would suggest if you can’t live with these browser differences, you’re not really understanding the way modern CSS is supposed to work.
Visit -
Darren Jones: Don’t Sweat the Unsemantic Stuff
A really smart post on the “unsemantic” nature of CSS frameworks that deal with layout, by Darren Jones, who created the Sparkl framework. The best line in the article is this:
> Remember [layout class names] don’t add any semantic value, but your page doesn’t lose any semantics by having them either.
This is the point I wish people would remember. Class names aren’t actual semantics, they’re fake semantics. They’re just a way for you to add some useful hooks for scripts and styles to hang on (and possibly for other people to mash with, in the case of something like microformats). Validators, screen readers, browsers, and the like couldn’t give one iota of a damn what your class names are. Likewise, is it really worth getting bent out of shape about too many
divandspanelements? Remember, these elements were specifically designed to have no meaning. It doesn’t matter if there is onedivor five hundred, the net gain is no meaning.Sure, it makes sense to use less presentational class names whenever you can and to only use as many
Visitdivsas you need to, but if the aesthetics of your fake semantics and countingdivelements starts to overtake getting your design just right, on time and under budget, then I’d say your priorities are out of whack. -
IEBlog: Microsoft CSS Vendor Extensions
Microsoft is moving all their proprietary CSS extensions to the
Visit-ms-namespace for IE8. Glad to hear it! -
CleverCSS
Quite interesting. Certainly the best implementation of dynamic CSS, including literals and the other typical functionality you see in these sots of things, that I’ve ever seen. I’m not sure if I could get into the habit of writing CSS this way, but it certainly would be pretty efficient if I could get myself into it. Hmm…cool stuff, even if I may never use it.
Visit -
Eric Meyer: The Lessons of CSS Frameworks
Again from Jeremy’s great live blogging of An Event Apart San Francisco, here’s Eric on CSS frameworks. I’m glad to see someone else broaching this topic, and in general it looks like Eric did a great job of rounding ‘em up. A few bits and responses:
> If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.
Generally speaking, I agree. I have made great use of Blueprint — but it’s worth nothing that almost all of the basic concepts were created by me (along with Nathan and Christian). As Blueprint has progressed, it’s gotten farther and farther away from what we created, and I’ve been less enthralled by it. The point is: something you created yourself is always going to be more useful to you than something you didn’t.
> Four of them use psuedo-namespaced class names beginning with grid- or container- or span- (which you would apply to a div!?).
I’m not sure if the parenthetical is Jeremy or Eric speaking, but this is also worth noting: in the original CSS framework Nathan, Christian, and I created, you were not necessarily supposed to apply those classes to a
Visitdiv. The classes were for any element, and there was no encouragement to liter your markup with extraneousdivelements. The original Blueprint retained this philosophy, but later changed it, asking people to always usedivelements as columns. I find this to be incredibly wrong, and I always override this Blueprint functionality when I use the framework. If you are going to use adivfor every layout column/row/unit/whatever, you may as well just use tables. I hope everyone knows and understands that when I was touting Blueprint, it was before the made the boneheaded decision to require the use of adivelement for every column. -
Alex Russell: CSS Variables Are The Future
Alex smashes all the silly arguments CSS spec editor Bert Bos tried to use against the concept of CSS “variables” (really constants). I’m sorry, but anyone who thinks CSS variables are a bad idea just isn’t living in the real world of web development these days. Go Alex!
Visit
Jeff Croft
I’m a digital product designer and developer in Seattle, WA. I currently work with nGen Works, and recently co-founded Lendle, a Kindle book sharing service.
Some of my clients include Facebook, Microsoft, Yahoo!, Copious, The New York Review of Books, The Lawrence Journal-World, and the University of Washington.
I’ve authored two books on web and interactive design and spoken at dozens of conferences around the world.
Filter content
FeedItems tagged css
By content type
FeedOther tags in these items
- webdesign 1068 (100%)
- jeffcroft 1048 (98%)
- design 857 (80%)
- conference 567 (53%)
- webprogramming 531 (50%)
- apple 444 (42%)
- django 437 (41%)
- humor 405 (38%)
- blueflavor 374 (35%)
- worldonline 337 (32%)
- python 321 (30%)
- mac 300 (28%)
- technology 278 (26%)
- sports 238 (22%)
- business 225 (21%)
- journalism 203 (19%)
- video 197 (18%)
- osx 196 (18%)
- typography 191 (18%)
- software 183 (17%)
- iphone 180 (17%)
- webstandards 175 (16%)
- mobile 143 (13%)
- jinabolton 133 (12%)
- blog 129 (12%)