Slides for a talk at Refresh OKC http://refreshokc.org/2011/03/21/upcoming-april-meeting
Transcript
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
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
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
FYI: I dont especially love CSS.The reason I create and use CSSframeworks is because I hate doingmundane tasks repeatedly (yawn).Id rather be working in JavaScript.
JavaScript books Ive worked on... Co-author Tech editor Tech editorjQueryEnlightenment.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
#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!
Typical use case for a 12-column grid
I am 1/3 wide.
I am 1/3 wide.
Me too!
I am 1/2 wide.
I am 1/2 wide.
Typical use case for a 12-column grid
I am 1/3 wide.
I am 1/3 wide.
Me too!
I am 1/2 wide.
I am 1/2 wide.
Nested grids & Column rearrangement
First nested grid.
Middle. No special class.
Last nested grid.
Last in markup, first visually.
Nested grids: alpha = rst, omega = last (per row)
First nested grid.
Middle. No special class.
Last nested grid.
Last in markup, first visually.
Column rearrangement (SEO maybe)
First nested grid.
Middle. No special class.
Last nested grid.
Last in markup, first visually.
http://960.gs/demo.html
http://960.gs/demo.html
Have xed-width grids become too pervasive? http://twitter.com/jcroft/status/49880667374354433
Have xed-width grids become too pervasive? http://twitter.com/nathansmith/status/49882179379015680
Many more possibilities via grid generators http://grids.heroku.com
Templates available for your weapon of choice... Acorn Fireworks Flash InDesign GIMP Inkscape Illustrator OmniGrafe Photoshop Expression QuarkXPress Visio Design
Adobe Fireworks 960.gs extension (Photoshop too)
Grids can accelerate progress while maintaining order http://www.ickr.com/photos/meckert75/3732780382
Michael Phelps following a painted line at the bottomof a pool doesnt make him a less talented swimmer. http://livinggallery.oneindia.in/main.php?g2_itemId=32903
Our best practices are killing us Nicole SullivanThree best practice myths...1. Dont add any extra elements2. Dont add classes3. Use descendent selectors exclusively http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
Our best practices are killing us Nicole SullivanThree best practice myths...1. Dont add any extra elements2. Dont add classes3. Use descendent selectors exclusively http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
Take all rules in development with a grain of saltSensibly revised...1. Add extra elements sparingly2. Add classes thoughtfully3. Avoid descendent selector kludge...
How would you style these links?
Home
About
Use only the selectors that are necessary..menu a { /* Terse = Get er done! */}ul.menu li a { /* Too heavy = Overkill. */}
Still true: Smart CSS aint always sexy CSS http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS
