Refresh OKC

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

Added semantics via role="..." & HTML5 tags ...
......
... http://adactio.com/journal/4267 http://dev.w3.org/html5/html4-differences/#new-elements

#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.

Nested grids &amp

Refresh OKC

dont add classes3

dont add

html5 tags

responsive

extra elements2

special class

nested grid

12 wide

Text of Refresh OKC

LOOK AT OKC | 11.04.2015

OKC Kids' Directory

Okc roofing

Element - onkin.jp Motor Number of strokes strokes Machine dimensions Specifications Element Model OKC-32 OKC-42 OKC-48 OKC-52N OKC

OKC PRIMARY CONTROL

OKAA OKC Chapter

LOOK AT OKC | 10.24.2014

Can OKC Be Managed

Okc thunder

LOOK AT OKC | 12.18.2013

Okc replacement windows

LOOK AT OKC | 5.21.2014

LOOK AT OKC | 11.20.2013

Refresh OKC 960

OKC Recycling Calendar

LOOK AT OKC | 3.26.2014

Okc redcross

Spurs 120 OKC 111

Okc economic forecast_2016_web

JAGUAR LAND ROVER AUTOMOTIVE plc 2017 New Refresh New New Refresh Refresh 2018 New 2019 Refresh Refresh

LOOK AT OKC | 1.1.2014

OKC Economic Development 2011

LOOK AT OKC | 2.26.2014

TheHomeMag OKC S Feb13

CATALOG OKC-Catalog.pdf

LOOK AT OKC | 9.11.2013

LOOK AT OKC | 1.29.2014

LOOK AT OKC | 4.6.2016

OSU-OKC Viewbook

OKC Bombing Revelations