Slides for a talk at Refresh OKC http://refreshokc.org/2011/03/21/upcoming-april-meeting
Refresh Oklahoma City http://refreshokc.org http://960.gs
Nathan Smith = Principal UI Architect @projekt202 we make software make sense http://sonspring.com http://projekt202.com
Relax. Please dont try to take notes feverishly.Email http://sonspring.com/contactTwitter http://twitter.com/nathansmithSlides http://slideshare.net/nathansmith/refresh-okc Feel free to email me later, and download these slides as well. These links are at the end, too.
Before we get started, lets agree: Code is not magic 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.
Veteran ninjas master a variety of tools Not just one. FRAMEWORK BY H AND Use a framework as an extension of yourself Not just as a crutch. http://imdb.com/title/tt1046173
Matthew Anderson designer at OneHub.com 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
Allow me to clear up a (potential) misconception...Truth be told, I dont really care if youuse the 960 Grid System or not.I tell people who get all emotional oversemantics (ID & classes have none)that it takes less energy to not usesomething than to argue about it.It also takes considerably more energy to doresearch. 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
The W3Cs Semantic Web doesnt involve CSS http://www.w3.org/DesignIssues/Semantic.html
CSS gets no at the Semantic Web partyThe term Semantic Web refers to W3Csvision of the Web of linked data. SemanticWeb technologies enable people to createdata stores on the Web, build vocabularies,and write rules for handling data. Linkeddata are empowered by technologies suchas RDF, SPARQL, OWL, and SKOS. World Wide Web Consortium (W3C) http://www.w3.org/standards/semanticweb
So lets get this straight... Semantics live hereYummy content Not here ... Except in the case of microformats.
Jeff Crofts Frameworks for Designers article http://www.alistapart.com/articles/frameworksfordesigners
Jeff Croft was never one to mince words... 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 socialmovement of British textileartisans in the nineteenthcentury who protested often by destroyingmechanized looms againstthe changes produced bythe Industrial Revolution,which they felt were leavingthem without work andchanging their way of life. http://en.wikipedia.org/wiki/Luddite
#anyways #whatevs #whocares #soboredUm, okay, but why grids?My design skillz are so awesome, Ive never needed to use grids.
For design thats really, really, ridiculously good looking Also, to do other things good too. http://en.wikipedia.org/wiki/Zoolander
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
#anyways #whatevs #whocares #soboredBut I digress.Ill forever be known as the 960 guy.But I guess thats not so bad... Right?
Whats this whole 960.gs thing all about?The premise of the system is ideally suited to rapidprototyping, but it would work equally well whenintegrated into a production environment. Thereare printable sketch sheets, design templates, andCSS les that have identical measurements.
960 SHIps WITH PrINtABlE *.PDf SKeTCHSHeEts, BeCAUSe sOmEtIMeS THe BeStDEsIGn ToOl IS No ToOl At ALl!WE OfTeN JUMp RIgHT INtO DEsIGn OrCODe SoFtWARe, BUt SKeTCHInG THIngSOUt CAN Be MUCH mOrE eFfICIEnT.WHEn I WOrKED AS AN InFoRmATIoNARCHItECt, SoMe Of mY BeSt WOrK WASDOnE SImPlY USInG PeN AnD PApEr.
Dogfooding = When you use your own product 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. NOM, NOM, NOM I use 960 regularly! :)
12, 16, and 24 columns available by defaultThe 12-column grid is divided into portions thatare 60 pixels wide. The 16-column grid consistsof 40 pixel increments. Each column has 10pixels of margin on the left and right, whichcreate 20 pixel wide gutters between columns.The 24-column grid is also included. It consistsof columns 30 pixels wide, with 10 pixel gutters,and a 5 pixel buffer on each side of the container.
#anyways #whatevs #whocares #sobored Show me teh codez!