HTML may make the web go around, but CSS makes it beautiful - and usable. And Metal Toad is passion about UX and the intersection of technology and design. Smack dab where CSS lands. Learn more from these nerdy posts about the ins and outs of cascading stylesheets.
-
A Front-end Build Task With A Living Style Guide, Part 1: SCSS
At Metal Toad our front-end build is important to us. It helps us keep standards consistent and improves the quality of our projects.
-
Instant reload with Django, NPM, and Browsersync
Here at Metal Toad, we are starting to use NPM as a task runner to automate our development processes. This tutorial shows how to automate CSS compilation and instantly reload the browser when files change.
-
Pond Life Ep.2
Hello Everyone!
-
ToadCast 006 - Google Fiber, OOCSS, and some nostalgia
ToadCast #6, I was joined by Dan Linn to discuss Google Fiber, MTV (unexpectedly), personal audio devices, cool javascript projects, and CSS.
-
What is SASS?
You may know about some of the problems that CSS has as a language. There is a lot of repetition. There is a lot of repetition. You may have worked on projects with 5000 lines of CSS. Not only is that a lot of code to write, but it's also a lot of code to maintain. But what about its smarts?
-
A quick look at CSS3 animations
CSS3 animations are finally becoming a useful tool in the front end developer's kit! Browser support is progressing, however there is no IE support yet (surprised?) and Opera currently doesn't support animations, but may in the future.
-
Integrating Compass with a Git / Capistrano deployment workflow
When we added the Compass CSS authoring framework to our projects, new wrinkles appeared in the deployment process. Committing the artifacts to Git was used for our first prototypes, but is unsuitable for team projects because it's a sure-fire way to introduce merge conflicts. Running compass on the server (either with Cap or the Drupal module) is appealing, but a minority of our projects deploy to hosts without the ability to install Compass. Rather than support multiple strategies, we decided on executing Compass locally on the workstation running Capistrano. Changes are needed to several files:
-
When it comes to Mobile Development, Stop Worrying about Bandwidth
When it comes to mobile development, I've seen a lot of buzz recently on how CSS3 can help people eliminate images and cut the bandwidth requirement for their websites, however if a good mobile experience is important to you, you may want to think twice before deciding how to retrofit your websit
-
How does Google do a barrel roll?
By now you've probably seen Google "do a barrel roll". If you haven't, head over to google.com and enter "Do a barrel roll". What? You're using IE? Ok, well then no tricks for you. I suggest Chrome. For the rest of us, Google's page does a nice little in place spin. When you saw it you may have thought "How the heck did they pull that off?" or maybe you said "Since when does google use flash?" or possibly "I feel the need... ...the need for speed!". The answer to the first question is easy. I'll show you how they did it:
-
Why HTML5 Makes Sense for Business
There's a lot of buzz from developers about HTML5, but what does it really mean to business? I look at in terms of...
-
Front End tools to make you a more productive and lazy developer
One of my favorite things about the development community is how lazy it can be. What I mean is that most developers I know would rather make a tool to automate a task, than constantly keep a queue of from-scratch processes in mind. Let your tools do the work, if you can.
-
Return of the Table Layout - courtesy of box-flex
Table layouts have been passé since the introduction of CSS. "A table should only contain data!" say the purists. But it had some major advantages over the block model of CSS. Ever tried to center align a div? It's not as easy as 'align=center' was.
-
How we made the Metal Toad site more mobile-friendly with media queries
There’s been a lot of buzz lately about Responsive Web Design, and in particular about CSS3 Media Queries.
-
How to use @font-face to avoid faux-italic and bold browser styles
In this article, I’ll walk you through how to properly load your font files with @font-face in CSS to avoid the browser’s faux-italic and faux-bold styles.
-
optimizeLegibility does not work with @font-face
Recently, twitter was buzzing with news of a CSS technique called optimizeLegibility that enables better kerning and font ligatures.
-
Semantic Views is Awesome
Like any Drupal themer, I've done my share of grumbling about the frequently ridiculous level of nested divs with dozens of classes.
-
How We Upgraded Metal Toad to HTML5 and Drupal 7
Our new site design is live, so if you're reading this in a feed reader, please click on through! In a nutshell, we wanted to redesign to take advantage of Drupal 7, HTML5, and dramatically improve the readability and usability of the site as a whole.
-
Big news for web fonts and video today
The codec wars around the HTML5 video element might be settled sooner than you think: Basically, Google just open-sourced VP8, a video codec. VP8 is being combined with the Vorbis audio codec to create a new video format called WebM.
-
Drupal Theming 101: How to Remove System Stylesheets
When you first start creating a Drupal theme, you might be frustrated by the large number of stylesheets that are included by default in your theme -- especially if you're creating a Zen sub-theme.