LESS has been a popular way to streamline your CSS-writing for a while now, but fitting it into your workflow isn’t always easy. Some designers use standalone applications like CodeKit or SimpLESS to compile their LESS files into browser-ready CSS, but I prefer a more integrated approach. Fortunately, Sublime Text—my personal favorite text editor has several available extensions to build LESS support in.
Continue reading →
Tag Archives: css
Setting Up a LESS Workflow in Sublime Text
Aug 28, 2013 by Matt | Posted in Design, Featured 109 CommentsCSS Zen Garden Returns
May 15, 2013 by Matt | Posted in Design No CommentsIt’s been ten years since CSS Zen Garden launched with its goal to excite and inspire people to build creative designs with the much more limited tools CSS offered at the time. A decade later, it’s back. Given how the CSS landscape has changed since the original CSS Zen Garden, it will be interesting to see what people create with the new requirements.
So for the tenth anniversary, the Zen Garden is open for business once more. I’ve thrown the codebase on Github, given the dusty copy a refresh, started the conversion of the site to HTML5, and brought all of the existing designs kicking and screaming into the modern age. The work isn’t done yet, but it’s a darn sight closer to how we would build it these days. If you see an area that needs help, consider sending a patch. (Here’s the current list of issues to resolve, for example.)
10 Years [Mezzoblue]
HTML and CSS: Develop with Tomorrow’s Standards Today by Brian P. Hogan
Apr 3, 2013 by Matt | Posted in Design No Comments
I recently unearthed a review copy of a book that somehow got lost in the shuffle a couple of years ago, HTML5 and CSS3: Develop with Tomorrow’s Standards Today by Brian P. Hogan, which is too bad, since it’s one of the better books I’ve seen on the subject. It’s a comprehensive primer on the changes in HTML5 and CSS3. I enjoyed reading through the book after I unburied it last week.
It features a chapter on logically marking up page structure with the new semantic tags (header, nav, section, article, etc.), which explains the contexts they should be used in with a hands-on example of restructuring a blog without excessive divs. A lot of online tutorials make the error of suggesting the aside element for a blog sidebar, which the book helpfully points out as wrong. The section element is the proper tag for the job, as it denotes an arbitrary section of the page, whereas aside is for broken-out sections of your article content, such as pullquotes or diagrams.
From there the author moves on to some CSS3 tricks using newly-added selectors. He shows some simple methods to add zebra-striping to tables with pseudo-classes and add visible URLs to links via a print stylesheet with :after. There’s a brief section demonstrating media queries, as well some on the new JavaScript APIs—localStorage and history pushState, for example. There’s even a bit on using cache manifests to set up offline access.
Oh, and the deprecations. HTML5 deprecates a good many tags and attributes. There is a section listing those, as well as some modern alternatives, such as opening links in new windows without the deprecated target attribute. It can be done cleanly and semantically by using JavaScript, without impacting the user’s ability to middle-click a link and open a new tab…which far too many sites still do today. If you do that, you need to read this book just for that reason.
Animating a CSS Sprite With JavaScript
Jun 4, 2012 by Matt | Posted in Coding, Featured 9 CommentsTake a look at this demo, and guess how the animation is achieved. It’s not an animated GIF. It’s a PNG sprite that is brought to life with a little bit of JavaScript.
The sprite image is a long strip containing each frame of the animation. The stylesheet sets it as the background of a DIV, and the dimensions are set so you can only see one frame at a time. Then a script uses a timer loop to continuously shift down the line, resetting once it reaches the end. (A more complex version of this effect can be seen in this Google Doodle.)
It works just like the sprites traditionally used in video games. It’s more efficient to load one image from a slow data source, whether it’s a hard disk or an internet connection, and only show a piece of it at a time, than to load dozens of images and alternate between them. (It saves some overhead in other ways in a performance-minded environment like a game, as well.)
Continue reading →
Pure CSS Blockquote Styling
Apr 24, 2012 by Matt | Posted in Design, Featured 51 CommentsEver since the days of print, it has been common to style quotations and cover blurbs with oversized quotation marks floating along the left side. The practice is alive and well in the internet age, though the technique usually used is a background image.
It’s 2012, already! Why are we still relying on pictures of typographical symbols? Let’s do it with the power of CSS!
Continue reading →
Let’s start with some simple HTML. Before we can style anything, we need to create our blockquote. While we’re at it, a cite element is a nice, semantic way to attribute the quote to its originator.
Bootstrap Doesn’t Have to Look Like Bootstrap
Apr 18, 2012 by Matt | Posted in Design No CommentsSince Twitter released their Bootstrap CSS framework, there has been some backlash among web designers. It tends to be used fresh out of the proverbial box, without any modification, an awful lot. The snide remarks about Bootstrap are largely unfounded, though. While some people may simply keep all of the defaults and use it to throw something together quickly, it is still a framework like any other. It offers an excellent array of features you might want in a CSS framework, and you can customize the look as much as you want.
I was recently looking at the new design of A Small Orange, a hosting company. Would you guess, just looking at it, that it uses Bootstrap?
I didn’t realize at first, until I moused over an image and noticed the popover that appeared. I recognized it as a re-colored Bootstrap feature, and checked the page source to confirm it. Handy, easy to implement, and yet you could even restyle it beyond recognition if you wanted to.
Continue reading →
How to Flip a Page Upside-Down with CSS
Apr 3, 2012 by Matt | Posted in Design One CommentFor April Fool’s Day this year, I decided to do an amusing CSS trick instead of my usual fake news story. I turned the entire web site on its head, using a simple CSS3 attribute, and added a bit of JavaScript to jump down to the bottom (or top?) to complete the effect.
The CSS is simple, though of course it won’t work for Internet Explorer, except for the very latest version.
#flipdiv {
width: 100%;
height: 100%;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
Now you want to wrap everything inside your <body> element with a new <div>. (You have to style the div instead of the body itself, as you get some weird box model issues otherwise.) It would look something like this:
<body> <div id="flipdiv"> ...everything else... </div> </body>
If you want to automatically scroll down to the new top of the page, a.k.a. the bottom, you can use a little JavaScript snippet to bump it down.
<script type="text/javascript">
window.onload = scrollDownToTheTop;
function scrollDownToTheTop() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>
Silly, but not bad for an April Fool’s joke. 
CSS1K: What Can You Do With 1KB of CSS?
Feb 16, 2012 by Matt | Posted in Design No CommentsBack in 2003, a website called CSS Zen Garden was launched by Vancouver web designer Dave Shea to showcase what could be done with pure CSS. Back then, the internet was full of table-based layouts and large, text-filled images. The Garden was a pretty novel idea back then.
In a similar vein, a new challenge has arrived in the form of CSS1K.
You have to style the same HTML as everyone else using no images or embedded fonts, while keeping your stylesheet under 1 kibibyte minified. To participate, you just fork the site on GitHub and submit a pull request when you’re done. Accepted styles are added to the gallery.
It’s a neat idea, now that we have so many fancy new CSS3 properties and selectors available, and it’s especially relevant as today’s page sizes are on the rise.
JSFiddle: A Playground for Web Developers
Jan 5, 2012 by Matt | Posted in Coding No CommentsJSFiddle is a sort of interactive pastebin site that I’ve been finding useful lately. It features three panes for entering HTML, CSS and JavaScript, and a fourth where the resulting output is rendered. If you save the workspace, it generates a URL like http://jsfiddle.net/fLP64/ and will even save each revision as you update it. You can share the URL to show off the result, and the other user can play with the code as well.
This is great for two scenarios. You can use it to experiment with a bit of CSS or JavaScript for brainstorming purposes, or you can use it if you need to ask someone for help. (It’s a lot easier to figure out what’s going wrong with someone’s code or markup if you can jump right in and start messing with the code.) Chris Coyier (of CSS-Tricks) uses it all the time to show off CSS experiments that will likely be used in future posts of his.
Awesome Firebug Tricks You May Have Missed
Nov 14, 2011 by Matt | Posted in Design No Comments
Firebug is probably the most invaluable tool in my web development arsenal. (Well, aside from Photoshop. But that has a value: freaking expensive.) I’m not terribly picky about my text editor—after all, I used Notepad for years—though BBEdit is my tool of choice. I still haven’t found anything that works nearly as well as Firebug, and that’s probably the biggest reason why I couldn’t give up Firefox for Chrome.
Everyone who uses Firebug regularly knows the basics. They know how to inspect and edit HTML and CSS, analyze page loading times and the like. There are a few neat tricks, though, that aren’t quite immediately apparent, but are very handy.
Continue reading →
