Downloaded 40 times
![Modular HTML, CSS, & JS @shayhowe & @darbyfreyFunctionsElements in an Arrayvar multiply = function(one, two){ return one * two;};var array = [1, 2, 3, multiply];array[3](3,4); => 12](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fmodular-html-css-js-workshop-161010222342%2f75%2fModular-HTML-CSS-JS-Workshop-60-2048.jpg&f=jpg&w=240)
Uploaded byShay Howe
974 views
Modular HTML, CSS, & JS Workshop
The document is a guide on modular HTML, CSS, and JavaScript practices, emphasizing the importance of organized, maintainable, and reusable code. It discusses common issues in web development, best practices for styling, and methodologies like OOCSS and SMACSS. It also covers topics related to JavaScript functions, objects, and prototypes, advocating for component-based design and separation of concerns.
Related topics:
Recommended
Modular HTML, CSS, & JS Workshop
- 1.ModularHTML, CSS, &JSWorkshopShay Howe@shayhowelearn.shayhowe.comDarby Frey@darbyfreydarbyfrey.com
- 2.Modular HTML, CSS,& JS @shayhowe & @darbyfreyShay Howe@shayhowelearn.shayhowe.comDarby Frey@darbyfreydarbyfrey.com
- 3.Modular HTML, CSS,& JS @shayhowe & @darbyfrey1 Groundwork2 HTML & CSS3 JavaScript4 Onward
- 4.Modular HTML, CSS,& JS @shayhowe & @darbyfrey1Groundwork
- 5.Modular HTML, CSS,& JS @shayhowe & @darbyfreyCommon Problems• Websites have difficulty scaling• Code bases become brittle• Files and code bases begin to swell
- 6.Modular HTML, CSS,& JS @shayhowe & @darbyfreyWhat’s Wrong• Best practices aren’t exactly best practices• Standards need to evolve
- 7.Modular HTML, CSS,& JS @shayhowe & @darbyfreyBest Bad Practices• Avoid extra elements• Avoid classes• Leverage type selectors• Leverage descendent selectors
- 8.Modular HTML, CSS,& JS @shayhowe & @darbyfreyBest Bad PracticesAvoiding classesarticle#main aside ul li {...}section:last-‐child div:nth-‐child(7) a {...}Leveraging selectorsa.btn {...}#main a.btn {...}#main div.feature a.btn {...}
- 9.Modular HTML, CSS,& JS @shayhowe & @darbyfreyBest Bad PracticesBad#contact li:nth-‐child(1) input,#contact li:nth-‐child(2) input { width: 50%;}#contact li:nth-‐child(3) textarea { width: 75%;}
- 10.Modular HTML, CSS,& JS @shayhowe & @darbyfreyBest Bad PracticesGood.col-‐1 { width: 50%;}.col-‐2 { width: 75%;}
- 11.Modular HTML, CSS,& JS @shayhowe & @darbyfreyMaintainability
- 12.Modular HTML, CSS,& JS @shayhowe & @darbyfreyCode Must Be…• Organized• Modular• Performant
- 13.Modular HTML, CSS,& JS @shayhowe & @darbyfreyMethodologiesOOCSS• Object-Oriented CSSFrom Nicole Sullivan – oocss.orgSMACSS• Scalable and Modular Architecture for CSSFrom Jonathan Snook – smacss.com
- 14.Modular HTML, CSS,& JS @shayhowe & @darbyfreyReuse Code• Do not duplicate code• Remove old code• Defer loading subsequent styles
- 15.Modular HTML, CSS,& JS @shayhowe & @darbyfreyReuse CodeBad.news { background: #ccc; color: #666;}.social { background: #ccc; color: #666;}
- 16.Modular HTML, CSS,& JS @shayhowe & @darbyfreyReuse CodeGood.news,.social { background: #ccc; color: #666;}Better.feat-‐box { background: #ccc; color: #666;}
- 17.Modular HTML, CSS,& JS @shayhowe & @darbyfreyUse Classes• Write understandable class names• Avoid unnecessary nesting• Use same strength specificity
- 18.Modular HTML, CSS,& JS @shayhowe & @darbyfreyUse ClassesBad.feat-‐box .callout .pr { font-‐size: 12px;}.feat-‐box .callout .pr .un { color: #39f;}
- 19.Modular HTML, CSS,& JS @shayhowe & @darbyfreyUse ClassesGood.feat-‐box .price { font-‐size: 12px;}.feat-‐box .unit { color: #39f;}
- 20.Modular HTML, CSS,& JS @shayhowe & @darbyfreySpecificity?• Determines which styles are applied• Each selector has a specificity weight• High specificity beats low specificity• Low specificity is key
- 21.Modular HTML, CSS,& JS @shayhowe & @darbyfreyMeasuring SpecificityFormulaIDs, Classes/Pseudo-classes/Attributes, ElementsHigh Specificity(Bad)#primary #main div.gallery figure.media {...}IDs: 2, Classes: 2, Elements: 2 — Compiled: 2–2–2Low Specificity(Good).gallery-‐media {...}IDs: 0, Classes: 1, Elements: 0 — Compiled: 0-1-0
- 22.Modular HTML, CSS,& JS @shayhowe & @darbyfrey
- 23.Modular HTML, CSS,& JS @shayhowe & @darbyfreyWatch Specificity• Be explicit• Keep specificity low• Never use IDs or !important• Avoid nested selectorsheader#main div.spotlight strong span
- 24.Modular HTML, CSS,& JS @shayhowe & @darbyfreyWatch SpecificityBad#primary #main div.gallery { text-‐transform: uppercase;}#primary #main div.gallery figure.media { background: #ccc;}
- 25.Modular HTML, CSS,& JS @shayhowe & @darbyfreyWatch SpecificityGood.gallery { text-‐transform: uppercase;}.gallery-‐media { background: #ccc;}
- 26.Modular HTML, CSS,& JS @shayhowe & @darbyfrey2HTML & CSS
- 27.Modular HTML, CSS,& JS @shayhowe & @darbyfreyAbstract Structure• Separate presentation(or theme) from layout• Create an object layer for layout• Create a skin layer for theme• Use a grid
- 28.Modular HTML, CSS,& JS @shayhowe & @darbyfreyAbstract StructureBad.news { background: #ccc; color: #666; margin: 0 10px; width: 400px;}<div class="news">...</div>
- 29.Modular HTML, CSS,& JS @shayhowe & @darbyfreyAbstract StructureGood.grid-‐4 { margin: 0 10px; width: 400px;}.feat-‐box { background: #ccc; color: #666;}<div class="grid-‐4 feat-‐box">...</div>
- 30.Modular HTML, CSS,& JS @shayhowe & @darbyfreyTransparentize Elements• Stylize elements to be transparent• Keep visual properties apart from layoutproperties
- 31.Modular HTML, CSS,& JS @shayhowe & @darbyfreyTransparentize ElementsBad.pagination { border-‐radius: 5px; border: 1px solid #eee; margin: 0 10px; width: 620px;}<ul class="pagination">...</ul>
- 32.Modular HTML, CSS,& JS @shayhowe & @darbyfreyTransparentize ElementsGood.grid-‐8 { margin: 0 10px; width: 620px;}.offset-‐box { border-‐radius: 5px; border: 1px solid #eee;}<ul class="grid-‐8 offset-‐box">...</ul>
- 33.Modular HTML, CSS,& JS @shayhowe & @darbyfreyCreate Adaptable Layouts• Height and width should be flexible• Height should extend with content• Width should extend with a grid
- 34.Modular HTML, CSS,& JS @shayhowe & @darbyfreyCreate Adaptable LayoutsBad#main { float: left; margin: 0 10px; width: 620px;}#aside { float: left; margin: 0 10px; width: 300px;}
- 35.Modular HTML, CSS,& JS @shayhowe & @darbyfreyCreate Adaptable LayoutsGood.grid-‐4,.grid-‐8 { float: left; margin: 0 10px;}.grid-‐4 { width: 300px;}.grid-‐8 { width: 620px;}
- 36.Modular HTML, CSS,& JS @shayhowe & @darbyfreySeparate Content• Separate content from container• Stylize content regardless of container
- 37.Modular HTML, CSS,& JS @shayhowe & @darbyfreySeparate ContentBad.alert { background: #f2dede; border-‐radius: 10px; color: #b94a48; padding: 10px 20px;}<div class="alert">...</div>
- 38.Modular HTML, CSS,& JS @shayhowe & @darbyfreySeparate ContentGood.alert { border-‐radius: 10px; padding: 10px 20px;}.alert-‐error { background: #f2dede; color: #b94a48;}<div class="alert alert-‐error">...</div>
- 39.Modular HTML, CSS,& JS @shayhowe & @darbyfreyAvoid Parent Dependency• Remove parent container dependency• Decouple CSS from HTML• Create components to be used anywhere
- 40.Modular HTML, CSS,& JS @shayhowe & @darbyfreyAvoid Parent DependencyBad.feat-‐box { background: #ccc;}article .feat-‐box { background: #fff;}<article> <div class="feat-‐box">...</div></article>
- 41.Modular HTML, CSS,& JS @shayhowe & @darbyfreyAvoid Parent DependencyGood.feat-‐box { background: #ccc;}.feat-‐box-‐alt { background: #fff;}<article> <div class="feat-‐box-‐alt">...</div></article>
- 42.Modular HTML, CSS,& JS @shayhowe & @darbyfreyFavor Semantics• Allow elements to adapt• Uses individual classes to extend modules
- 43.Modular HTML, CSS,& JS @shayhowe & @darbyfreyFavor SemanticsBad.feat-‐box h2 { color: #f60; font: 18px Helvetica, sans-‐serif;}<div class="feat-‐box"> <h2>...</h2></div>
- 44.Modular HTML, CSS,& JS @shayhowe & @darbyfreyFavor SemanticsGood.feat-‐subhead { color: #f60; font: 18px Helvetica, sans-‐serif;}<div class="feat-‐box"> <h2 class="feat-‐subhead">...</h2></div>
- 45.Modular HTML, CSS,& JS @shayhowe & @darbyfreyIn PracticeHTML & CSShttp://bit.ly/modular-html-css-js
- 46.Modular HTML, CSS,& JS @shayhowe & @darbyfrey3JavaScript
- 47.Modular HTML, CSS,& JS @shayhowe & @darbyfrey
- 48.Modular HTML, CSS,& JS @shayhowe & @darbyfrey
- 49.Modular HTML, CSS,& JS @shayhowe & @darbyfrey
- 50.Modular HTML, CSS,& JS @shayhowe & @darbyfrey
- 51.Modular HTML, CSS,& JS @shayhowe & @darbyfreyJavaScriptfs.readdir(source, function(err, files) { if (err) { console.log('Error finding files: ' + err) } else { files.forEach(function(filename, fileIndex) { console.log(filename) gm(source + filename).size(function(err, values) { if (err) { console.log('Error identifying file size: ' + err) } else { console.log(filename + ' : ' + values) aspect = (values.width / values.height) widths.forEach(function(width, widthIndex) { height = Math.round(width / aspect) console.log('resizing ' + filename + 'to ' + height + 'x' + height) this.resize(width, height).write(destination + 'w' + width + '_' + filename, function(err) { if (err) console.log('Error writing file: ' + err) }) }.bind(this)) } }) }) }})http://callbackhell.com
- 52.Modular HTML, CSS,& JS @shayhowe & @darbyfreyJavaScriptimage = new Image('filename.jpg');image.resize(400, 300);
- 53.Modular HTML, CSS,& JS @shayhowe & @darbyfreyAbstract and Encapsulatefunctionality with Objects
- 54.Modular HTML, CSS,& JS @shayhowe & @darbyfreyJavaScript Primer
- 57.Modular HTML, CSS,& JS @shayhowe & @darbyfreyFunctions
- 58.Modular HTML, CSS,& JS @shayhowe & @darbyfreyFunctionsfunction multiply(one, two){ return one * two;};function(one, two){ return one * two;};
- 59.Modular HTML, CSS,& JS @shayhowe & @darbyfreyFunctionsAssigned to Variablesvar multiply = function(one, two){ return one * two;};multiply(3,4); => 12
- 60.Modular HTML, CSS,& JS @shayhowe & @darbyfreyFunctionsElements in an Arrayvar multiply = function(one, two){ return one * two;};var array = [1, 2, 3, multiply];array[3](3,4); => 12
- 61.Modular HTML, CSS,& JS @shayhowe & @darbyfreyFunctionsPass as Arguments to Functions(Callback Pattern)var multiply = function(one, two){ return one * two;};var sumSquare = function(one, two, callback){ sum = one + two; return callback(sum, sum);};sumSquare(1, 2, multiply); => 9
- 62.Modular HTML, CSS,& JS @shayhowe & @darbyfreyFunctionsProperties of an Objectvar person = { name: 'Darby Frey', location: 'Chicago', nameAndLoc: function(name, location){ return name + ' -‐ ' + location; }};person.nameAndLoc(person.name,person.location); => 'Darby Frey -‐ Chicago'
- 63.Modular HTML, CSS,& JS @shayhowe & @darbyfreyObjects
- 64.Modular HTML, CSS,& JS @shayhowe & @darbyfreyObjects are Containers forProperties and Functions
- 65.Modular HTML, CSS,& JS @shayhowe & @darbyfreyObjectsSimple Objectvar person = { name: 'Darby Frey', location: 'Chicago', twitter: '@darbyfrey'};person.name; => 'Darby Frey'person.location; => 'Chicago'person.twitter; => '@darbyfrey'
- 66.Modular HTML, CSS,& JS @shayhowe & @darbyfreyObjectsFunctions as Propertiesvar person = { name: 'Darby Frey', location: 'Chicago', twitter: '@darbyfrey', nameAndLoc: function(){ return this.name + ' -‐ ' + this.location; }};person.nameAndLoc(); =>'Darby Frey -‐ Chicago'
- 67.Modular HTML, CSS,& JS @shayhowe & @darbyfreyConstructor Functions
- 68.Modular HTML, CSS,& JS @shayhowe & @darbyfreyConstructor FunctionsWhen a function is called with the newkeyword it’s a constructor functionConstructor Functions• Create a new instance of the object• Create their own context accessible by thethis keyword
- 69.Modular HTML, CSS,& JS @shayhowe & @darbyfreyConstructor Functionsvar Person = function(){}me = new Person();typeof me; => objectme; => Person {}me.name; => undefinedme.name = 'Darby Frey';me; => Person {name: 'Darby Frey'}
- 70.Modular HTML, CSS,& JS @shayhowe & @darbyfreyConstructor Functionsthis is the Contextvar Person = function(name, location){}me = new Person('Darby Frey', 'Chicago');me; => Person {}
- 71.Modular HTML, CSS,& JS @shayhowe & @darbyfreyConstructor Functionsthis is the Contextvar Person = function(name, location){ this.name = name; this.location = location;};me = new Person('Darby Frey', 'Chicago');me; => Person {name: "Darby Frey", location: "Chicago"};me.name; => 'Darby Frey'
- 72.Modular HTML, CSS,& JS @shayhowe & @darbyfreyPrototype
- 73.Modular HTML, CSS,& JS @shayhowe & @darbyfreyPrototype• A Prototype is a blueprint of Attributes andFunctions given to an Instance of an Objectcreated by a Constructor Function• Attributes and Functions defined in aPrototype will be available to every Instanceof that Object
- 74.Modular HTML, CSS,& JS @shayhowe & @darbyfreyPrototypevar Person = function(name, location){ this.name = name; this.location = location;};Person.prototype = { coolGuy: true, chicagoan: function(){ return this.location == 'Chicago' }};
- 75.Modular HTML, CSS,& JS @shayhowe & @darbyfreyPrototypedarby = new Person('Darby Frey', 'Chicago');darby.coolGuy; => truedarby.chicagoan(); => trueshay = new Person('Shay Howe', 'Ohio');shay.coolGuy; => trueshay.chicagoan(); => false
- 76.Modular HTML, CSS,& JS @shayhowe & @darbyfreyIn PracticeJavaScripthttp://bit.ly/modular-html-css-js
- 77.Modular HTML, CSS,& JS @shayhowe & @darbyfrey4Onward
- 78.Modular HTML, CSS,& JS @shayhowe & @darbyfreyApproach• Stop thinking about pages• Start thinking about components• Take visual inventory
- 79.Modular HTML, CSS,& JS @shayhowe & @darbyfreyThemes• Decouple HTML and CSS• Separate presentation from layout• Separate content from container• Extend elements with classes• Abstract functionality with objects• Leverage JavaScript templates
- 80.Modular HTML, CSS,& JS @shayhowe & @darbyfreyOutcomes• Maintainability!• Reusable code, less duplication• Flexibility and extensibility• Improved standards
- 81.Modular HTML, CSS,& JS @shayhowe & @darbyfreyWhat’s nextBuild a style guide• Twitter Bootstrap, Zurb FoundationReview methodologies• OOCSS, SMACSSTest your code• CSS Lint, JS Lint, Inspector, PageSpeed,Console
- 82.Modular HTML, CSS,& JS @shayhowe & @darbyfreyThank You!@shayhowelearn.shayhowe.com@darbyfreydarbyfrey.com