Cascading Style Sheets (CSS)

help :

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.

  • Gulp Cup with Sass written on it

    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.

  • Django logo

    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.

  • Frog in a pond

    Pond Life Ep.2

    Hello Everyone!

  • cool tech graphics

    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.

  • cool tech graphics

    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?

  • cool tech graphics

    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.

  • cool tech graphics

    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:

  • cool tech graphics

    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

  • cool tech graphics

    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:

  • cool tech graphics

    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...

  • cool tech graphics

    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.

  • cool tech graphics

    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.

  • cool tech graphics

    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.

  • cool tech graphics

    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.

  • cool tech graphics

    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.

  • cool tech graphics

    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.

  • Drupal Logo

    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.

  • cool tech graphics

    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.

  • cool tech graphics

    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.

Have questions?