Professional Documents
Culture Documents
http://refreshokc.org http://960.gs
http://sonspring.com http://hp.com
Feel free to email me later, and download these slides as well. These links are at the end, too.
An important discipline when using any framework is striving to understand the underlying language. In other words, use it as a tool Not a black box.
FRAMEWORK
BY H AND
Christian Heilmann developer evangelist at Mozilla Our craft is becoming a commodity and the people in charge dont care about the quality of the markup, CSS or how short our JavaScript is. What matters is how fast you can get it to market, how many people it reaches and how cheaply it can be built.
http://thinkvitamin.com/code/web-development-is-moving-on-are-you
Point being, choose your battles wisely. In the time you could argue the relevance of naming conventions like these I just built a 16-column layout.
http://onehub.com/past/2009/5/13/why-we-chose-960gs-css-framework
Truth be told, I dont really care if you use the 960 Grid System or not. I tell people who get all emotional over semantics (ID & classes have none) that it takes less energy to not use something than to argue about it.
It also takes considerably more energy to do research. Being ignorant is blissful and easy!
Semantics can reside in microformats class names, because parsers are built to look for them specically
http://microformats.org
http://www.w3.org/DesignIssues/Semantic.html
CSS gets no at the Semantic Web party The term Semantic Web refers to W3Cs vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data. Linked data are empowered by technologies such as RDF, SPARQL, OWL, and SKOS. World Wide Web Consortium (W3C)
http://www.w3.org/standards/semanticweb
Not here
... Except in the case of microformats.
http://www.alistapart.com/articles/frameworksfordesigners
http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks
Dont be a Luddite (Note: I was with Sass/SCSS) The Luddites were a social movement of British textile artisans in the nineteenth century who protested often by destroying mechanized looms against the changes produced by the Industrial Revolution, which they felt were leaving them without work and changing their way of life.
http://en.wikipedia.org/wiki/Luddite
Added semantics via role="..." & HTML5 tags <header role="banner"> <nav>...</nav> </header> <div role="main"> <article> <section>...</section> </article> <aside>...</aside> </div> <footer role="contentinfo"> ... </footer>
http://adactio.com/journal/4267 http://dev.w3.org/html5/html4-differences/#new-elements
Added semantics via role="..." & HTML5 tags <header role="banner"> <nav>...</nav> </header> <div role="main"> <article> <section>...</section> </article> <aside>...</aside> </div> <footer role="contentinfo"> ... </footer>
http://adactio.com/journal/4267 http://dev.w3.org/html5/html4-differences/#new-elements
http://en.wikipedia.org/wiki/Zoolander
The reason I create and use CSS frameworks is because I hate doing mundane tasks repeatedly (yawn). Id rather be working in JavaScript.
jQueryEnlightenment.com
JavaScriptEnlightenment.com
oreilly.com/catalog/9780596159788
All involving Cody Lindley, who has been a JavaScript mentor to me: http://codylindley.com
Front-end is the opposite of a mythological hydra There are many dragons sharing the same public facade in web development: ColdFusion, Java, .NET, Perl, PHP, Ruby, Python... To render in a browser, it all has to pass through HTML. So, I think that front-end is a good place to be! :)
http://en.wikipedia.org/wiki/Lernaean_Hydra
But I digress.
Ill forever be known as the 960 guy. But I guess thats not so bad... Right?
The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design templates, and CSS les that have identical measurements.
960 SHIps WITH PrINtABlE *.PDf SKeTCH SHeEts, BeCAUSe sOmEtIMeS THe BeSt DEsIGn ToOl IS No ToOl At ALl!
WE OfTeN JUMp RIgHT INtO DEsIGn Or CODe SoFtWARe, BUt SKeTCHInG THIngS OUt CAN Be MUCH mOrE eFfICIEnT.
WHEn I WOrKED AS AN InFoRmATIoN ARCHItECt, SoMe Of mY BeSt WOrK WAS DOnE SImPlY USInG PeN AnD PApEr.
The 960 Grid System is an effort to streamline web development by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. If you like, theres also a 24-column version.
The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. The 24-column grid is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container.
http://960.gs/demo.html
http://960.gs/demo.html
http://twitter.com/jcroft/status/49880667374354433
http://twitter.com/nathansmith/status/49882179379015680
http://grids.heroku.com
Acorn
Fireworks
Flash
InDesign
GIMP
Inkscape
Illustrator
OmniGrafe
QuarkXPress
Visio
http://www.ickr.com/photos/meckert75/3732780382
Michael Phelps following a painted line at the bottom of a pool doesnt make him a less talented swimmer.
http://livinggallery.oneindia.in/main.php?g2_itemId=32903
Three best practice myths... 1. Dont add any extra elements 2. Dont add classes 3. Use descendent selectors exclusively
http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
Three best practice myths... 1. Dont add any extra elements 2. Dont add classes 3. Use descendent selectors exclusively
http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
Sensibly revised... 1. Add extra elements sparingly 2. Add classes thoughtfully 3. Avoid descendent selector kludge...
<ul class="menu"> <li> <a href="/">Home</a> </li> <li> <a href="/about">About</a> </li> </ul>
http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS
http://www.subtraction.com/2004/12/31/grid-computi
http://www.cameronmoll.com/archives/2006/12/gridding_the_960
http://www.cameronmoll.com/archives/2006/12/gridding_the_960
http://bjorkoy.com/2007/08/launch-blueprint-a-css-framework
http://www.adaptivepath.com/ideas/e000863
http://www.adaptivepath.com/ideas/e000863
http://www.markboulton.co.uk/journal/comments/ve-simple-steps-to-designing-grid-systems-part-1
Frameworks are kind of like sheet music. They are organized, and can keep teams on the same page.
http://www.ickr.com/photos/avlxyz/3280803912
Like jazz, responsive design is contextual. No two approaches are exactly the same.
http://www.alistapart.com/articles/responsive-web-design
http://hicksdesign.co.uk
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold
http://m.lifechurch.tv http://www.lifechurch.tv
310px
150px
309px
149px
http://960.gs/demo_24_col.html
VS
Doing a xed-width design using a grid framework is relatively easy. Whereas, doing a responsive design that looks solid at every resolution is multivariate and there is not (yet) an automated, foolproof solution.
The mere fact were even able to use it today makes it todays technology. As designers and developers, its easy to get so caught up in wanting to use the latest and greatest (to a fault) that we forget to try and tackle present-day problems with proven technologies.
http://twitter.com/igorskee/status/52152273178079232
http://lamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy
http://adapt.960.gs
http://twitter.com/zeldman/status/59432011693166592
845 bytes
Minied, Adapt.js is less than 1 KB. (Allow me to put into perspective)
908 bytes
http://www.ickr.com/photos/nathansmith/5625332824
Not to go all Ron Burgundy on you, but... Kind of a [small] deal I didnt set out to write a terse snippet of JavaScript. Thats just how easy the problem was to solve. Seriously though, consider what will be best for your project. Nothing is a magic bullet. Code is just code.
http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy
In fact, heres a slew of alternatives you might like better. You should explore every option, and choose one that makes sense to you. Or, if nothing seems like a good t, Id encourage you to create one!
Sencha Touch
http://sencha.com/touch
Dojo Mobile
http://dojotoolkit.org/features/mobile
jQuery Mobile
http://jquerymobile.com
http://jeromeetienne.github.com/jquery-mobile-960
http://blueprintcss.org
http://html5boilerplate.com/mobile
Less Framework 4
http://lessframework.com
http://cssgrid.net
http://thesquaregrid.com
https://github.com/scottjehl/Respond
To prevent developers from wasting countless hours on styling dumb form elements
Note: I wasted countless hours styling dumb form elements, so you dont have to!
Future plans include a tutorial on how to use jQuery to add styling hooks to form elements, since I know from experience that is no cup of tea.
Source = Me when announcing 960.gs in 2008! Excuse = New HTML5 elements set me back :)
http://sonspring.com/journal/960-grid-system
http://formalize.me
I didnt think I would like Sass, but I do. Oh, and if youre going to use Sass, use Sass, not SCSS.
http://sass-lang.org