Download to read offline
Uploaded byNetguru
763 views
OOScss Architecture For Rails Apps
This document discusses using OOScss architecture for Rails applications. It proposes dividing CSS into components, modules, and layouts. Placeholder selectors from Sass can be used to create reusable CSS modules without code bloat. Examples show issues with directly using Bootstrap for complex designs. Following OOScss principles like identifying reusable objects, using semantic HTML, and separating styles from content can help build custom designs on top of frameworks like Bootstrap more effectively.
Recommended
![Bootstrap [part 1]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fbootstrappart-11-170208154053-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
OOScss Architecture For Rails Apps
- 1.OOScss architecture forRails apps.My proposition.
- 2.Dawid Woźniaknetgurufront-end /rails dev@dawidwudawid@plaind.pl / dawid.wozniak@netguru.pl
- 3.We've been strugglingto find a best way tobootsrap an applicationandredesign it in further phase.
- 4.How many ofyou write front-end code?
- 5.How many ofyou use Bootstrap for that?
- 6.//application.scss/**=require_self*=require_tree*/@import "bootstrap";...Looks familiar?|-stylesheets|-application.scss+-controllers| +-/admin/*| |- main.scss| +- controller.scss|...
- 7.How many ofyou use it for a client work?
- 8.
- 9.NO**if you're OKwith it's look and feel.*if you're not tired of the whole Internet looking the same (or at least 90% of open source projects)*if you do it for prototyping.*if you do it for fast bootstraping project for a client*you have a well explained documentation (more less)...
- 10.Have you evertried to build a customdesign/framework on top of a Bootstrap?
- 11.Let me showyou some numbers:bootstrap: 266 KB and ~6700 lines of css+ responsive: 320 KB and ~8200 lines of css+ overrides: 362 KB and ~9200 lines of css+ custom comp.: 445 KB and ~11000 lines of code+ site specific: 556 KB and ~13780 lines of code
- 12.556KB for aproduction cssNOT BAD AT ALL.so we're good right?
- 13.NO!**have you seenthe markup?*have you seen how much overriding you have to do?*are you sure your devs understand Bootstrap?*we haven't styled 100screens (I won't tell you how many of them we covered ;-)
- 14.So what shouldI do when the designs come fromthe creative agency?
- 15.
- 16.Example 1. -what's wrong with this code?
- 17.Example 1. -what's wrong with this code?.span9 { width: 740px; }
- 18.My reaction waslike:
- 19.
- 20.Example 2. -what's wrong with this code?
- 21.Example 2. -what's wrong with this code?- it won't fit into the row because of the .well class
- 22.Example 2. -what's wrong with this code?- it won't fit into the row because of the .well class- that's why the dev overrided span9 for that viewand used span2 for the sidebar previously
- 23.Example 2. -what's wrong with this code?- it won't fit into the row because of the .well class- that's why the dev overrided span9 for that viewand used span2 for the sidebar previously- do you know what's the purpose of the row class?
- 24.
- 25.Example 3. -what's wrong with this code?
- 26.Example 3. -what's wrong with this code?- we dropped the well class to fit into the grid- that's not what we want
- 27.Example 4. -what's wrong with this code?.well { box-sizing: border-box; }
- 28.Example 4. -what's wrong with this code?.well { box-sizing: border-box; }- we have to override default .well box-model
- 29.Example 4. -what's wrong with this code?.well { box-sizing: border-box; }- we have to override default .well box-model- aaaand we haven't even reached the fluid grid yet
- 30.Do you reallythink you know how to use Bootstrap?
- 31.Do you reallythink you know how to use Bootstrap?Are you sure it enforces some conventions?
- 32.Do you reallythink you know how to use Bootstrap?Are you sure it enforces some conventions?Do you really think you know it that good to buildsomething on top of it?
- 33.Do you reallythink you know how to use Bootstrap?Are you sure it enforces some conventions?Do you really think you know it that good to buildsomething on top of it?Are you sure it's easy for your devs to understand it?
- 34.Do you reallythink you know how to use Bootstrap?Are you sure it enforces some conventions?Do you really think you know it that good to buildsomething on top of it?Are you sure it's easy for your devs to understand it?Are you sure it's easy for your devs to understandcomponents build on top of it?
- 36.How this markupshould look like?
- 37.Have you everseen something like this in ror app?.users {&.show {padding-top: 0;header {position: fixed;z-index: 10;width: 100%;}nav {background: #fff;box-shadow: 0px 2px 15px 2px rgba(80, 80, 80, 1);position: relative;height: 20px;ul {padding-top: 10px;}}.top_container {background: image-url("controllers/preview/upper_bar_bg.png")background-size: cover;height: 6%;
- 38.Have you everseen something like this?.logo_container {float: left;position:relative;text-indent: -99999px;z-index: 10;top: 0px;height: 10%;padding-top: 5px;a {h1 {background: image-url("controllers/preview/Logo_white.png")no-repeat top center;height: 86px;width: 95px;margin: 5px 26px 0px 2px;}}}
- 39.Why this isbad?- it's nested to the infinity- it's styled by the elements selectors- sizes mixed with theme...
- 40.OOCSS principles:- identifyreusable objects- be semantic w/HTML- minimize selectors (you know how browser reads selectors?)- extend classes- 'style' separate from content- 'content' separate from containerhttps://speakerdeck.com/anotheruiguy/module-design-ui-dev-patterns
- 41.How to achievethat?That's kinda impossible with pure CSS so...SCSS to the rescue!
- 42.How to achievethat?OOScss+BEM
- 43.How to achievethat?OOscss+BEM=SMACSS(scalable and modular architecture for css)
- 44.BEM (block elementmodifier).component-name {}.component-name--modifier-name {}.component-name__sub-object {}.component-name__sub-object--modifier-name {}.person{} .person__hand > .animal__hand.person--woman{}.person__hand{}.person__hand--left{}.person__hand--right{} TIPS:- don't nest to infinity- indent to reflect html structure
- 45./* Layout Rules*/.l-layout-method/* State Rules */.is-state-type/* Non-styled JavaScript Hooks */.js-action-nameIntroduce naming conventions
- 46.OOScssdivide your designinto:- (reusable) components- (reusable) modules
- 47.OOScss ( probably) the best way:Abstract class selector A.K.A. SASS %placeholder (since SASS 3.2)Placeholders are selectors that output nothing unless they are extended.Example:%separatorborder-top: 1px solid blackhr@extend %separator.separator@extend %separatorhr,.separator {border-top: 1px solid black}
- 48.OOScss ( probably) the best way:Placeholders don’t have the code bloat problems that mixins or regular@extend calls have.That makes placeholders perfect for creating non-semantic CSS modules.http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
- 49.
- 50.- settings- reset-variables- grid-settings- type...- bourbon (useful set of mixins)- neat (grid library)- utilities (i.e. custom mixins)- components- modules- layout- base-view- views/Explainedyou can add themes/ here
- 51.
- 52.- http://bourbon.io/docs- http://neat.bourbon.io/docs/-https://speakerdeck.com/anotheruiguy/sass-32-silent-classes- http://philipwalton.com/articles/the-future-of-oocss-a-proposal/- http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/- http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders- http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass- https://speakerdeck.com/anotheruiguy/module-design-ui-dev-patterns- https://github.com/csswizardry/CSS-Guidelines- http://bem.info/pictures from http://frontenddevreactions.tumblr.com/Further reading