Perl Mongers) Milwaukee PHP The Milwaukee Web Design Pattern Libraries, CSS Frameworks & more Mobile Monday Madison Meeting Madison Web Design & Dev Mad-Railers Madison PHP Meetup Group
Perl Mongers) Milwaukee PHP The Milwaukee Web Design Pattern Libraries, CSS Frameworks & more Mobile Monday Madison Meeting Madison Web Design & Dev Mad-Railers Madison PHP Meetup Group This is great! Where is your framework? Does it have a grid?
amazingly wrong? These are smart people? Variables that make no sense? Mixins randomly all over the place. @import where? MY GOD! That ‘partials’ folder has how many files in it? That makes no sense!?
amazingly wrong? These are smart people? Variables that make no sense? Mixins randomly all over the place. @import where? How to tell them? MY GOD! That ‘partials’ folder has how many files in it? That makes no sense!?
variables.scss typography.scss forms.scss overly simplified too much code in one file base, elements, modules and layout in the same files cats and dogs living together, mass hysteria!
variables.scss typography.scss forms.scss overly simplified too much code in one file base, elements, modules and layout in the same files cats and dogs living together, mass hysteria!
abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders
abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders UI modules and patterns inevitably ended up within the View styles
abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders UI modules and patterns inevitably ended up within the View styles But code is being duplicated? Oh yeah, make it a partial!
abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders UI modules and patterns inevitably ended up within the View styles But code is being duplicated? Oh yeah, make it a partial! That’s a junk- drawer bro!
on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘⌘C / ⌘V`
on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘⌘C / ⌘V` A major case of the div’itus
on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘⌘C / ⌘V` A major case of the div’itus Using IDs for styling to over-ride the cascade
Sass arsenal // Following sequence will load the necessary libraries // ----------------------------------------------------------- @import “rwd-toolkit"; @import “color-scale”; @import “type-rhythm-scale“; @import "vendor/manifest"; ! ! // This where you start building your own styles. // ----------------------------------------------------------- @import "typography"; @import "forms"; @import "buttons"; @import "ui_patterns/manifest"; // manifest files @import "modules/manifest"; // manifest files @import "layouts/manifest"; // manifest files Nicely organized! Have you read ‘Bower all the things’
a particular interaction of the application. ! ! Modules will come in all shapes and sizes. ! ! Larger modules may also consist of smaller modules or smaller UI patterns.
for code management outside-in BAD! ! inside-out BETTER! modular files with @import system === WINNING! elements, modules and then the view CSS management has come a long way
for code management outside-in BAD! ! inside-out BETTER! modular files with @import system === WINNING! elements, modules and then the view CSS management has come a long way Take everything you know AND SET IT ON FIRE!
for code management outside-in BAD! ! inside-out BETTER! modular files with @import system === WINNING! elements, modules and then the view CSS management has come a long way Take everything you know AND SET IT ON FIRE! Organize your Sass! ! it will hurt less