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.
Join Tuts Plus
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!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
First..
Thanks for that.
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…
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.
Second :P
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
Weird how I was thinking about this the other day. I will not use it until I can code it myself! :P
@17:30-ish
I am really excited about this. best video ever.
I am really excited about this. best video ever.??
Is this a screencast or a “written” tutorial? Sorry for my english and thanks for your reply
Video tutorial.
Hrm, gonna download it now, how does scaffold compare to like compass or something along those lines?
Awsome!
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 :)
Jeeezus – It’s really not that complicated to code a layout with plain css. lol.
And it’s not that complicated to create mark-up with Notepad…but that doesn’t mean you should. :)
Hah, nice.
Word to that…
But sure – for a simple little project, plain CSS will do the trick.
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.
for a big project, plain CSS would do the trick.
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.
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!
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!
@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.
Great tool, Thanks for sharing
I’d like to be member, but don’t use paypal |:
Is really impressive Jeffrey I love the fuctions feature. It’ll going to save tons of time for my future projects :)
Yep! I like it a lot!
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.
@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.
@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.
You have no clue about OOCSS
Sass::Plugin.options[:style] = :compact
Thanks, but I’m good.
I was going to post something like this :)
I want it !
:)
That’s good !
like it.. thank’s alot.. :D
will definitely change the way
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/
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?
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.
Many approaches to the same problem.
Learn to write style sheets by hand your career will thank you for it.
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.
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.
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?
Or jQuery, and jQuery Plugins
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.
“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.
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. :(
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.
seeing
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
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.
@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).
There is an expires header set in the .htaccess.
http://github.com/anthonyshort/csscaffold/blob/master/css.htaccess
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.
id like to join the tuts + club but i have no credit card
can you please make a paypal option avaible ???
Hey Jeffrey,
Could you please make a download link to the video under the Tuts+ members area?
There is a download link. Just view the Net Plus page.
Oh, there it is! Thanks! :D
what function have te templates folder??
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.
Thank you, for this tutorial!
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 :]
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. :)
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.
Great Tutorial, thanks for sharing!
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?
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.
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
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.
Excelent tutorial thans for this help!
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?
Good video, lots of nice stuff here ,
I want to see people who implement this in real projects. Is it worth it?
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
Hey all,
I just organize how to download maplestory. I went to http://www.downloadmaplestory.net and it worked!
Thanks,
Liberia