This Will Change the Way you Code your CSS
plus

This Will Change the Way you Code your CSS: New Premium Tutorial

on Jan 13th 2010 with 81 comments
Download Source Files

Last Friday, we learned how to utilize a tool called Zen-Coding to rapidly speed up our development time when creating mark-up. In today’s Plus video tutorial, we’re going to take another huge leap forward, specifically with CSS, where I’ll show you how to utilize a different tool, called “Scaffold,” created by Anthony Short.

This will allow you to use variables, functions (mix-ins), for statements, and to even create grids on the fly with ease! I promise you that, if you’re mildly familiar with PHP, this will drastically change – and improve – the way you code your CSS! Become a Premium member to watch!

Learn How to…

  • Create CSS variables/constants
  • Create grids – of any size you like
  • Use functions or mix-ins
  • Automatically minify the generated CSS file.
  • Combine multiple stylesheets into one, to save on HTTP requests.
  • Dramatically improve your development time.

Scaffold

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • Baha Grunda

    First..

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks for that.

    • http://www.saucer.dk Saucer

      what is up with ppl and all this childish “First…” crap. If you don’t have anything to say about the subject, then just don’t say anything at all.

      Sorry, but it is just lame…

      • WMuse

        I can only hope we’ll see a stricter policy put in place and enforced. Where people who actually have registered accounts and reduce the quality of this site with their childish drivel get banned.

  • http://www.ChoiZ.Fr ChoiZ

    Second :P

  • http://cssah.blogspot.com/ cssah

    Wowww chance to learn more about css variables , and sooo thanks for the free three months on TUTS+
    i recommended to every one to be a plus member it really worth

  • http://vasili.duove.com/ Vasili

    Weird how I was thinking about this the other day. I will not use it until I can code it myself! :P

  • http://www.25thingsdesign.com Devin

    @17:30-ish

    I am really excited about this. best video ever.

    • ish

      I am really excited about this. best video ever.??

  • Luca IT

    Is this a screencast or a “written” tutorial? Sorry for my english and thanks for your reply

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Video tutorial.

  • Jeremy H

    Hrm, gonna download it now, how does scaffold compare to like compass or something along those lines?

  • http://kreativtstudio.no Roaa

    Awsome!

  • http://www.a1media.ca Douglas Helmer

    Dang! CSScaffold is very, very slick.

    We get to create CSS functions, plus we get lots of useful pre-built CSS code, and we get the ability to combine and minify multiple CSS files on the fly … and it’s all free.

    You ain’t kiddin’, Jeffrey … this is going to change the way I code CSS.

    Thank you for this :)

  • Marco

    Jeeezus – It’s really not that complicated to code a layout with plain css. lol.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      And it’s not that complicated to create mark-up with Notepad…but that doesn’t mean you should. :)

      • http://spotdex.com/ David Moreen

        Hah, nice.

      • http://www.devative.com/ Mike

        Word to that…

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        But sure – for a simple little project, plain CSS will do the trick.

      • http://flavors.me/noods Dan

        Tools like this and even Dreamwaever don’t create designers or developers who understand code. They just create people who can link mashing a button, or performing a task, to a particular result. I am not downing these programs for experienced developers looking to shave time, but there are values to be learned from coding in programs like notepad, or writing CSS from hand.

        This should not change the way anyone writes CSS, it’s not correct. You could learn how to use this tool and become reliant on it’s abilities and leave yourself high and dry should you need to write your CSS outside of this environment. I would say always approach technologies like this with caution, and never with the mindset that this will change the way you do anything. CSS is changing, great new things are happeing and if you rely on a tool like this to help you create next generation style sheets, then you aren’t really progressing at all.

    • k.rush

      for a big project, plain CSS would do the trick.

      • http://www.graphicrating.com/ Andy Gongea

        This one is from the series “HOW to complicate something that is simple and straightforward”

        CSS is not that complex even for bigger layouts. If you follow some well defined guidelines you will do fine.

  • http://sffarlenn.net Laneth Sffarlenn

    Woohoo, I’m the fourteenth comment! Yay, my life is complete.

    Anyways, as I said on Twitter Jeffrey, I’m totally looking forward to this tut – I haven’t sunk my teeth into a tut here for a while, so I’m really looking forward to it – bonus that it’s one of yours, cos yours rock!

  • http://spotdex.com/ David Moreen

    Just finished the video and I am psyched. I will save tons of time just calling a function (mixin) rather then having to search Google for things like the IE opacity filter thing. I never learned that, nor do I care! Great plus this week!

  • http://anthonyshort.com.au Anthony Short

    @David That’s exactly what the mixins were originally made for, at the least ones included with Scaffold :)

    It also makes the CSS easier to read as you can tell what groups of properties are actually doing within your design. ‘+image-replace’ tells you more about the selector than 5 or 6 properties, and is especially useful if you’re passing your CSS around.

    • maik

      Great tool, Thanks for sharing

  • http://donothing.ru art

    I’d like to be member, but don’t use paypal |:

  • http://ivorpadilla.net iPad

    Is really impressive Jeffrey I love the fuctions feature. It’ll going to save tons of time for my future projects :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yep! I like it a lot!

  • http://mwmdev.com mwmdev

    It might lose some time when loading a page. It loses time generating css files on the fly on server side but with the cache feature, it might be pretty fast.

  • http://anthonyshort.com.au Anthony Short

    @mwmdev The caching makes it super fast. But if you don’t like the idea of it using PHP, you can easily just use Scaffold during development and take the processed file from the cache and use it statically on your site.

  • http://www.iivi-designs.com Aaron VanLaan

    @Anthony – Great job! No more class soup throughout designs. Maybe all the big name companies (Amazon, etc) will catch on to this and will stop using things like “div.unified_widget ol.topList” and other random classes.

    @Jeff – Another great tut, as always. Becoming a Plus member is one of the better investments any level of designer should consider.

    One small step for man, one giant leap for semantic markup.

    • Peter Willinger

      You have no clue about OOCSS

  • Matt

    Sass::Plugin.options[:style] = :compact

    Thanks, but I’m good.

    • Joe

      I was going to post something like this :)

  • http://sonergonul.com Soner Gönül

    I want it !

    :)

    That’s good !

  • http://ferizaenal.com ferizaenal

    like it.. thank’s alot.. :D

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    will definitely change the way

  • http://criography.com criography

    I agree. CSScaffold is a genius thing. I’ve tried it once to get my portfolio running and fell in love with it. There are some examples of how I used it here: http://criography.com/what-i-think/code/how-i-fell-in-love-with-csscaffolding/

  • http://twitter.com/aziz_light Aziz Light

    Nice tutorial. One thing though: will the css will be recompiled on every reload? If that’s the case shouldn’t bandwidth/performance be a concern?

    • http://parenting.pl Marcin

      No, the CSS files are cached are not processes on each page reload. Besides, as Anthony mentioned above, you could use the system during development, and then simply take the generated CSS file and linked it statically.

  • http://www.jordanwalker.net/index.php Jordan Walker

    Many approaches to the same problem.

  • http://flavors.me/noods Dan

    Learn to write style sheets by hand your career will thank you for it.

    • http://parenting.pl Marcin

      But when you know how to code them by hand, tools such as this one greatly accelerate some of the mundane tasks. Besides, you still need to have a solid grasp of CSS to use this framework.

      • http://flavors.me/noods Dan

        Becoming affluent in writing CSS will greatly increase your speed at mundane tasks. I believe tools like this can harm, especially in something so rapidly evolving as CSS right now. With so many new features becoming available daily and the need to truly understand things like advanced selectors and understanding css as an object oriented method of applying styles becoming greater all the time. Getting caught up in something like this can leave you behind quickly. I prefer to write it all by hand and retain the knowledge by doing it all myself.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Of course you should have a solid understanding of CSS before using something like this. But for your argument – why do you use PHP frameworks then?

      • http://mismatchingpanda.com orodio

        Or jQuery, and jQuery Plugins

    • http://anthonyshort.com.au Anthony Short

      Like Marcin said, it’s really aimed at people who know CSS thoroughly.

      Instead of writing out a clearfix in every file, you can just do +clearfix in a selector;

      Instead of writing long selectors, you can nest them.

      It’s about taking out the repetitive tasks we have to do everyday in every stylesheet and making them simple and fast.

      That said, it’s still not for everyone.

    • http://mismatchingpanda.com orodio

      “Becoming affluent in writing CSS will greatly increase your speed at mundane tasks.”

      And using csscafold will exponentially increase your speed.

      Plus who wants to write out all the browser specific declarations for border-radius, or box-shadow, or the fall backs to CSS3 that isnt fully supported in every browser yet. Especially when you can set it to something like +borderRadius();

      Also I don’t think Jeffrey Way brought it up, but you can also use PHP inside your css using csscaffold. That plus the caching, and the minify, and the validating, and the mixins, and the constants makes it extremely useful and time saving.

      Csscafold isnt something a someone fresh to CSS could use even remotely as a escape goat like jQuery is for javascript. Its a tool, and like all tools it has its uses, and its people that choose to use it or not.

      Saying something like this will harm CSS is silly, if anything it is helping it evolve, and personally I like the direction Anthony Short is pushing CSS.

  • http://blackmesalabs.com Leo Templin

    Just thought id let you guys know, when I try to join it just throws a plain old “Error Establishing Database Connection” error, honestly i was expecting something a little more interesting. :(

  • Michael Bryan

    Going to give it a try later today. From the video and a quick skim of the documentation I think I’ll be using this quite a bit.

  • http://rcadesigns.com xRommelx

    seeing

  • http://www.milesj.me Miles Johnson

    Im amazed that it requires that many PHP files and code to do such basic tasks. Why do you need a whole framework?

    http://github.com/milesj/compression

  • http://www.BryanWatson.ca Bryan Watson

    I’ve never experimented with Scaffold, but I have worked with similar PHP-based utlities like dtcss:

    http://code.google.com/p/dtcss/

    The one drawback to these is that if you are going to be using a static version of the CSS, Scaffold doesn’t let you control what media the CSS is displayed as.

    I might consider incorporating this back into my workflow if that feature was available.

  • Patrick

    @Anthony Short

    one important feature is missing, i think. What about Expire-Header? Set to “never expire” could be really good for highload websites (saving traffic and webserver requests).

  • Ingo Fahrentholz

    Very nice.. i like these screencasts very much.. i can learn much faster by see whats happing insted of reading and imagination :D

    Thanxx for your hardwork.

  • Adrian

    id like to join the tuts + club but i have no credit card
    can you please make a paypal option avaible ???

  • http://jayj.dk Jay

    Hey Jeffrey,

    Could you please make a download link to the video under the Tuts+ members area?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      There is a download link. Just view the Net Plus page.

      • http://jayj.dk Jay

        Oh, there it is! Thanks! :D

  • pablo

    what function have te templates folder??

  • http://www.kobedye.com Regi E.

    I think that it is worth mentioning Less CSS “http://lesscss.org/” and Sass “http://sass-lang.com/” for developers using alternative languages and frameworks or not willing to use PHP.

  • http://www.cssispoetry.com Blake Tallos

    Thank you, for this tutorial!

  • Brayan

    Hey Jef, the shortcut “beginhtml”, to do the header n end HTML file, its only for text-mate n mac editors?

    Do you know some editor on linux or windows that do this ? thx

    ps: sorry 4 the bad english, i’m learning :]

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey Brayan – It’s independent of a specific text editor. Check out, for Windows, a program called Texter. A Google search should bring it up. :)

  • iivo

    Nice! I’ve tried the basics of this in a couple of my own projects just for fun and I gotta say I like it. Definitely gonna keep playing more with this.

    Oh and thanks for the good tutorial! It gave me a much better picture of what to do with Scaffold.

  • http://www.slice2u.com Slice2U

    Great Tutorial, thanks for sharing!

  • http://www.jakub.chodorowicz.pl/ chodorowicz

    one thing which bothers me is that while writing code using Csscaffold you loose your IDE/text editor ability for syntax highlighting or code validation.. I was wondering if there’s anyway to fix it?

  • http://www.xhtml.si SpinX

    It’s quite slow for me. I was very excited for this, I even joined Tuts Plus just because of this, but like I said it’s very slow for me. I’m using XAMPP on i7 desktop computer with 6GB ram and the thing is parsing a file 5+ seconds. And the file is empty. Anyone having similar problems ? It’s unacceptable for me to wait 5 second on every refresh. This would stack up to few hours per project.

  • http://www.panosru.com/ panosru

    Hello, just wanted to mention that the url to the scaffold is this: http://github.com/anthonyshort/Scaffold

    :)

    Very good framework you might want to check out xCSS and Compass too (easy find by google no need for link)

    I would also glad to know what do you prefer and why :D

  • ijames

    I really wanted this to work. I am a noob to php and WAMP. I renamed the files as instructed. I put the files in the htdocs folder (and also tried the www folder) and for some reason the php would just not work. Restarted WAMP, and no luck. I’m sure its something easy that i’m overlooking but I spent about 2 hours trying to figure it out. Please help.

  • http://www.mondialsurf.com zin

    Excelent tutorial thans for this help!

  • gmclelland

    Does anyone know what kind of browser compatibility you get when you use the layout modules in CSScaffold? Does it work in IE6?

    Also can you incorporate different grid frameworks using CSScaffold? like 1kb grid or blueprint or 960.gs?

  • arnold

    Good video, lots of nice stuff here ,
    I want to see people who implement this in real projects. Is it worth it?

  • sherif hafiz

    Has anyone got an updated tutorial for this, as the files structure has all changed, and there is no grid system anymore. And does anyone know how to implement the htacess file for mac. Thanks again

  • NonoLydayRend

    Hey all,

    I just organize how to download maplestory. I went to http://www.downloadmaplestory.net and it worked!

    Thanks,
    Liberia

Newer Comments →