├── cya-supercomputer.jpg ├── files ├── refactoring-gameplan.pdf └── schedule.md ├── examples ├── architecture-examples │ ├── makersquare │ │ ├── config │ │ │ ├── _webfonts.scss │ │ │ ├── _theme-mks-dark.sass │ │ │ ├── _theme-mks-default.sass │ │ │ ├── _colors.sass │ │ │ ├── _config.sass │ │ │ ├── _typography.sass │ │ │ └── _helpers.sass │ │ ├── application.sass │ │ ├── layout.sass │ │ ├── README.md │ │ ├── modules │ │ │ ├── _course-part-time.sass │ │ │ ├── _mission-statement.sass │ │ │ ├── _forms.sass │ │ │ ├── course-page-modules │ │ │ │ ├── _course-cta.sass │ │ │ │ ├── _course-technologies.sass │ │ │ │ ├── _course-intro.sass │ │ │ │ ├── _course-locations.sass │ │ │ │ ├── _course-outcomes.sass │ │ │ │ └── _course-upcoming.sass │ │ │ ├── _buttons.sass │ │ │ ├── _news-blog.sass │ │ │ ├── _notifications.sass │ │ │ ├── _student-quotes.sass │ │ │ ├── _overview.sass │ │ │ ├── _info-boxes.sass │ │ │ └── _team-grid.sass │ │ ├── layout │ │ │ ├── _sections.sass │ │ │ ├── _page.sass │ │ │ ├── _footer.sass │ │ │ └── _header.sass │ │ ├── config.sass │ │ └── modules.sass │ ├── dale-sande.md │ ├── simple-import.scss │ ├── jina.md │ └── sassy-starter.md ├── state-classes.scss ├── comment-instructions.scss ├── abstracted-var-names.md ├── sample-grunt-config.json ├── simple-theming │ ├── 4-config-import.scss │ ├── 1-vars.scss │ ├── 3-theme.scss │ └── 2-config.scss ├── useful-grunt-plugins.md ├── alpha-font-sizing.scss ├── parent-selector.scss ├── simple-namespacing.scss └── named-media-queries.scss ├── exercise ├── buttons-exercise │ ├── 4-mixins │ │ └── style.css │ ├── 3-change-classes │ │ └── style.css │ ├── 1-original-css-html │ │ ├── style.css │ │ ├── buttons.html │ │ ├── buttons-original.css │ │ └── buttons-original.scss │ ├── 2-shared-scss-nesting │ │ ├── style.css │ │ ├── buttons.scss │ │ └── buttons.html │ └── README.md └── README.md ├── resources ├── naming │ └── resources.md ├── ie-rwd │ └── resources.md ├── architecture │ └── resources.md ├── technical │ └── resources.md ├── testing-perf │ └── resources.md ├── style-guides │ └── resources.md ├── tips-tricks │ └── resources.md ├── installation │ └── resources.md └── theory │ └── resources.md └── README.md /cya-supercomputer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jina/refactoring/HEAD/cya-supercomputer.jpg -------------------------------------------------------------------------------- /files/refactoring-gameplan.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jina/refactoring/HEAD/files/refactoring-gameplan.pdf -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/config/_webfonts.scss: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------- // 2 | // FONT-FACE DECLARATION ---------------------------- // 3 | // -------------------------------------------------- // 4 | 5 | $font-path: "/fonts/"; 6 | 7 | // font-face declarations 8 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/application.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // APPLICATION IMPORT ----------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | @import "config" 6 | @import "layout" 7 | @import "modules" 8 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/layout.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // BASE PAGE & LAYOUT STYLES ---------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | @import "layout/page" 6 | @import "layout/sections" 7 | @import "layout/header" 8 | @import "layout/footer" 9 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/4-mixins/style.css: -------------------------------------------------------------------------------- 1 | /* Body styles */ 2 | body { 3 | font-family: 'Proxima Nova', 'Calibri', 'Helvetica Neue', 'Helvetica,' Arial, sans-serif; 4 | font-size: 100%; 5 | } 6 | 7 | .container { 8 | max-width: 1200px; 9 | width: 80%; 10 | margin: 0 auto; 11 | padding: 40px 0; 12 | } 13 | 14 | a, a:hover, a:active, a:visited {text-decoration: none; font-weight: normal;} 15 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/README.md: -------------------------------------------------------------------------------- 1 | ## MakerSquare Architecture Example 2 | 3 | This is how I am architecting things at MakerSquare for our new website. It's fairly simple, as this is a marketing site, rather than a large product. 4 | 5 | Please note this is _very much_ still a work in progress, so there will probably be wonky code in places and the architecture may change going forward! 6 | 7 | -Elyse 8 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/3-change-classes/style.css: -------------------------------------------------------------------------------- 1 | /* Body styles */ 2 | body { 3 | font-family: 'Proxima Nova', 'Calibri', 'Helvetica Neue', 'Helvetica,' Arial, sans-serif; 4 | font-size: 100%; 5 | } 6 | 7 | .container { 8 | max-width: 1200px; 9 | width: 80%; 10 | margin: 0 auto; 11 | padding: 40px 0; 12 | } 13 | 14 | a, a:hover, a:active, a:visited {text-decoration: none; font-weight: normal;} 15 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/1-original-css-html/style.css: -------------------------------------------------------------------------------- 1 | /* Body styles */ 2 | body { 3 | font-family: 'Proxima Nova', 'Calibri', 'Helvetica Neue', 'Helvetica,' Arial, sans-serif; 4 | font-size: 100%; 5 | } 6 | 7 | .container { 8 | max-width: 1200px; 9 | width: 80%; 10 | margin: 0 auto; 11 | padding: 40px 0; 12 | } 13 | 14 | a, a:hover, a:active, a:visited {text-decoration: none; font-weight: normal;} 15 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/2-shared-scss-nesting/style.css: -------------------------------------------------------------------------------- 1 | /* Body styles */ 2 | body { 3 | font-family: 'Proxima Nova', 'Calibri', 'Helvetica Neue', 'Helvetica,' Arial, sans-serif; 4 | font-size: 100%; 5 | } 6 | 7 | .container { 8 | max-width: 1200px; 9 | width: 80%; 10 | margin: 0 auto; 11 | padding: 40px 0; 12 | } 13 | 14 | a, a:hover, a:active, a:visited {text-decoration: none; font-weight: normal;} 15 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_course-part-time.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // COURSE PAGE: PARTTIME SETTINGS ---------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | // Page class 6 | .page-pt-frontend 7 | padding: 9em 0 0 0 8 | 9 | .page-pt-frontend header, 10 | .page-pt-frontend .course-page-intro 11 | background: $navy 12 | 13 | -------------------------------------------------------------------------------- /examples/state-classes.scss: -------------------------------------------------------------------------------- 1 | // JS STATE CLASS EXAMPLES ------------------------------------------ // 2 | 3 | // Buttons 4 | .button { 5 | &.is-active { background: red; color: white; } 6 | } 7 | 8 | // Nav Links 9 | .nav-link { 10 | &.is-active { color: green; } 11 | } 12 | 13 | /* OUTPUT */ 14 | .button.is-active { 15 | background: red; 16 | color: white; 17 | } 18 | 19 | .nav-link.is-active { 20 | color: green; 21 | } 22 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_mission-statement.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // MISSION STATEMENT------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | 6 | .mission-statement 7 | background: $navy 8 | border-bottom: $border-width-default solid $green 9 | 10 | p.quote 11 | color: $text-color-reverse 12 | 13 | -------------------------------------------------------------------------------- /examples/architecture-examples/dale-sande.md: -------------------------------------------------------------------------------- 1 | ``` 2 | |- sass/ 3 | |--- buttons/ 4 | |--- color/ 5 | |--- forms/ 6 | |--- layouts/ 7 | |--- modules/ 8 | |----- registration/ 9 | |------- _extends.scss 10 | |------- _functions.scss 11 | |------- _mixin.scss 12 | |------- _module_registration.scss 13 | |--- typography/ 14 | |--- ui_patterns/ 15 | |--- _buttons.scss 16 | |--- _config.scss 17 | |--- _forms.scss 18 | |--- _typography.scss 19 | |--- style.scss 20 | ``` 21 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/2-shared-scss-nesting/buttons.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------ // 2 | // BUTTONS MODULE --------------------------------------------- // 3 | // ------------------------------------------------------------ // 4 | 5 | // Copy over new, clean button SCSS into this file. Call it from 6 | // buttons.html to see if it's working—leave the old one commented 7 | // out so you can toggle them and make sure everything looks right. 8 | -------------------------------------------------------------------------------- /examples/comment-instructions.scss: -------------------------------------------------------------------------------- 1 | // Transitions ------------------------------------------ // 2 | // ------------------------------------------------------ // 3 | // to use, apply @include transition() with arguments 4 | // type, time, and function 5 | // ex: @include transition(color,0.5s,ease) 6 | 7 | @mixin transition($type,$time,$function) { 8 | -webkit-transition: $type $time $function; 9 | -moz-transition: $type $time $function; 10 | -o-transition: $type $time $function; 11 | transition: $type $time $function; 12 | } 13 | -------------------------------------------------------------------------------- /examples/abstracted-var-names.md: -------------------------------------------------------------------------------- 1 | // Abstracted Variable Names 2 | 3 | // Primary, Secondary, Tertiary, etc 4 | $header-primary: 5 | $header-secondary: 6 | $header-tertiary: 7 | 8 | 9 | // Color Themed Light-Dark 10 | $background-color-default: 11 | $background-color-highlight: 12 | $background-color-lowlight: 13 | $background-color-dark: 14 | 15 | // Module Related 16 | $button-bg: 17 | $button-border: 18 | $button-shadow: 19 | $button-color: 20 | $button-bg-hover: 21 | $button-border-hover: 22 | $button-shadow-hover: 23 | $button-color-hover: 24 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/layout/_sections.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // PAGE SECTIONS ---------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | 6 | // Sections General Styles ------------------------------ // 7 | // ------------------------------------------------------ // 8 | 9 | section 10 | @include breakpoint(tiny) 11 | padding: 3em 0 4em 12 | @include breakpoint(medium) 13 | padding: 6em 0 9em 14 | 15 | .section-title 16 | -------------------------------------------------------------------------------- /examples/sample-grunt-config.json: -------------------------------------------------------------------------------- 1 | grunt.initConfig({ 2 | watch: { 3 | css: { 4 | files: ['Gruntfile.js', 'app/**/*.js', './app/scss/**/*.scss'] 5 | }, 6 | livereload: { 7 | options: { livereload: true } 8 | } 9 | }, 10 | 11 | connect: { 12 | server: { 13 | options: { 14 | port: 8000, 15 | base: './app', 16 | livereload: true 17 | } 18 | } 19 | }, 20 | 21 | open: { 22 | dev : { 23 | path: 'http://localhost:8000' 24 | } 25 | } 26 | }); 27 | 28 | // Server Task 29 | grunt.registerTask('server', [ 30 | 'connect', 31 | 'open', 32 | 'watch' 33 | ]); 34 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_forms.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // FORMS AND INPUTS ------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | input[type="text"] 6 | display: inline-block 7 | border: 0 8 | border-radius: $border-radius-default 9 | padding: .25em .5em 10 | line-height: $line-large 11 | font-family: $body-font 12 | font-size: $epsilon 13 | -webkit-font-smoothing: antialiased 14 | color: $grey-dark 15 | background: $white 16 | -------------------------------------------------------------------------------- /examples/simple-theming/4-config-import.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // Configuration File Import ---------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | // Import the configuration file that sets default variables 6 | @import "config/config"; 7 | 8 | // Import helpers, vars, and mixins 9 | @import "config/helpers"; 10 | @import "config/colors"; 11 | 12 | // Choose theme 13 | @import "config/theme-default"; 14 | // @import "config/theme-dark"; 15 | // @import "config/theme-light"; 16 | 17 | // Import typography 18 | @import "config/typography"; 19 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/config.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // Configuration File Import ---------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | // Import the configuration file that sets default variables 6 | @import "config/config" 7 | 8 | // Import helpers and mixins 9 | @import "config/helpers" 10 | 11 | // Import colors and theme 12 | @import "config/colors" 13 | @import "config/theme-default" 14 | // @import "config/theme-dark" 15 | 16 | // Import webfonts, typography 17 | @import "config/webfonts" 18 | @import "config/typography" 19 | 20 | -------------------------------------------------------------------------------- /examples/useful-grunt-plugins.md: -------------------------------------------------------------------------------- 1 | // npm install --save-dev ... 2 | grunt-contrib-sass // Compile Sass to CSS with Ruby compiler 3 | grunt-sass // Compile Sass to CSS using node-sass/libsass 4 | grunt-contrib-connect // Start a web server 5 | grunt-open // Open server in your browser automatically 6 | grunt-contrib-watch // Watch for file changes 7 | connect-livereload // Auto-reload browser with files are changed 8 | grunt-contrib-imagemin // Minify PNG and JPG images 9 | grunt-contrib-htmlmin // Minify HTML 10 | grunt-contrib-cssmin // Minify compiled CSS files 11 | grunt-autoprefixer // Adds vendor prefixes automatically 12 | -------------------------------------------------------------------------------- /examples/simple-theming/1-vars.scss: -------------------------------------------------------------------------------- 1 | // COLORS.SCSS ------------------------------------------ // 2 | 3 | // Blues ------------------------------------------------ // 4 | $navy: rgb(1, 46, 81); // MKS Navy 5 | $blue-dark: rgb(23, 75, 133); 6 | $blue-bright: rgb(35, 128, 226); // MKS Primary Blue 7 | $blue-light: rgb(99, 159, 222); 8 | $blue-pale: rgb(206, 226, 247); 9 | 10 | // Secondary colors ------------------------------------- // 11 | // use sparingly, for contrast and highlight only 12 | $orange: rgb(255, 152, 0); 13 | $orange-light: lighten($orange, 50%); 14 | $orange-dark: rgb(194, 105, 1); 15 | 16 | $green: rgb(130, 179, 0); 17 | $green-light: lighten($green, 50%); 18 | $green-dark: rgb(18, 120, 0); 19 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/course-page-modules/_course-cta.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // MODULE: COURSE CALL TO ACTION ------------------------ // 3 | // ------------------------------------------------------ // 4 | 5 | .course-call-to-action 6 | background: $background-color-dark 7 | border-top: $border-width-default solid $blue-bright 8 | border-bottom: $border-width-default solid $off-white 9 | 10 | h2, 11 | p.intro, 12 | p 13 | color: $white 14 | 15 | p.intro 16 | margin-bottom: 0 17 | 18 | .cta-description 19 | width: 65% 20 | 21 | .cta-buttons-wrapper 22 | margin-top: 4em 23 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/course-page-modules/_course-technologies.sass: -------------------------------------------------------------------------------- 1 | // Technologies Widget 2 | 3 | .course-technologies 4 | border-top: $border-width-default solid $off-white 5 | padding-bottom: 0 // too much space above locations 6 | 7 | h2 8 | margin-bottom: 2em 9 | 10 | .technologies-list 11 | 12 | .technology 13 | float: left 14 | width: 20% 15 | margin-right: 6% 16 | min-height: 35em 17 | &:nth-child(4n) 18 | margin-right: 0 19 | 20 | .technology-image 21 | height: 170px 22 | margin-bottom: 1em 23 | 24 | img 25 | max-width: 80% 26 | 27 | .technology-jekyll 28 | .technology-image 29 | img 30 | padding-top: 2.5em 31 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/layout/_page.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // GENERAL PAGE LAYOUT ---------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | body 6 | background: $background-color-default 7 | margin: 0 8 | min-width: 300px 9 | font-size: 100% 10 | 11 | .page 12 | // padding: 9em 0 0 0 13 | 14 | * 15 | box-sizing: border-box 16 | 17 | .container 18 | margin: 0 auto 19 | max-width: 80em // 1280px 20 | width: 85% // default 21 | @extend %clearfix 22 | @include breakpoint(tiny) 23 | width: 90% 24 | @include breakpoint(medium) 25 | width: 85% 26 | @include breakpoint(large) 27 | width: 75% 28 | 29 | img 30 | max-width: 100% 31 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // MODULES IMPORT --------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | // Components 6 | @import "modules/buttons" 7 | @import "modules/notifications" 8 | @import "modules/forms" 9 | 10 | // Modules - Shared 11 | @import "modules/student-quotes" 12 | @import "modules/mission-statement" 13 | @import "modules/news-blog" 14 | @import "modules/team-grid" 15 | 16 | 17 | // Modules - Course Page 18 | @import "modules/course-page-modules/course-intro" 19 | @import "modules/course-page-modules/course-upcoming" 20 | @import "modules/course-page-modules/course-outcomes" 21 | @import "modules/course-page-modules/course-technologies" 22 | @import "modules/course-page-modules/course-locations" 23 | @import "modules/course-page-modules/course-cta" 24 | -------------------------------------------------------------------------------- /examples/alpha-font-sizing.scss: -------------------------------------------------------------------------------- 1 | // GREEK LETTER NAMING FOR TYPE ------------------------------------------ // 2 | 3 | 4 | // Typography with Variables; Greek Letter Naming 5 | 6 | $giga: 4.5em; 7 | $alpha: 3.662em; 8 | $beta: 2.930em; 9 | $gamma: 1.875em; 10 | $delta: 1.5em; 11 | $epsilon: 1.2em; 12 | $zeta: .875em; 13 | $iota: .75rem; 14 | 15 | h1 { 16 | font-family: $header-primary; 17 | font-size: $beta; 18 | } 19 | 20 | h2 { 21 | font-family: $header-secondary; 22 | font-size: $beta; 23 | } 24 | 25 | h3 { 26 | font-family: $header-tertiary; 27 | font-size: $gamma; 28 | } 29 | 30 | 31 | 32 | 33 | 34 | // Typography with Extends; Greek Letter Naming 35 | 36 | h1, %alpha { 37 | font-size: 32px; 38 | line-height: 1.5; 39 | } 40 | 41 | h2, %beta { 42 | font-size: 24px; 43 | line-height: 1.5; 44 | } 45 | 46 | h3, %gamma { 47 | font-size: 20px; 48 | line-height: 1.75; 49 | } 50 | 51 | .quote { 52 | @extend %beta; 53 | } 54 | -------------------------------------------------------------------------------- /examples/architecture-examples/simple-import.scss: -------------------------------------------------------------------------------- 1 | // General Import Concept 2 | 3 | |- sass/ 4 | |--- application.sass // manifest, imports config, components, modules, frameworks 5 | |--- config.sass // imports actual config file, helpers, colors, typography, themes 6 | |--- config/ 7 | |------ _config.sass 8 | |------ _helpers.sass // includes mixins, testing functions, css3, js is- states 9 | |------ _colors.sass 10 | |------ _typography.sass // webfonts and type declarations 11 | |--- components.sass // imports icons, buttons, UI elements, page components 12 | |--- components/ 13 | |------ page.sass // general page/body 14 | |------ header.sass 15 | |------ footer.sass 16 | |------ buttons.sass 17 | |------ icons.sass 18 | |------ nav.sass 19 | |------ forms.sass 20 | |--- modules.sass // imports page content and semantic HTML 21 | |--- modules/ 22 | |------ [your page content files] 23 | |--- vendor // imports CSS from third party or JS libs 24 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_buttons.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // BUTTONS ---------------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | .button 6 | display: inline-block 7 | transition: .5s background-color ease 8 | -webkit-transition: .5s background-color ease 9 | border: 0 10 | border-radius: $border-radius-default 11 | padding: .75em 1.25em 12 | line-height: $line-large 13 | text-transform: uppercase 14 | font-family: $button-font 15 | font-size: $epsilon 16 | text-rendering: geometricPrecision 17 | color: $button-color 18 | background: $button-bg 19 | 20 | a 21 | color: $button-color 22 | 23 | &:hover, 24 | &:focus, 25 | &:active 26 | font-family: $button-font 27 | color: $button-color-hover 28 | background: $button-bg-hover 29 | 30 | // varying button styles here 31 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/1-original-css-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons - Old 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Buttons

15 |
16 | 17 |
18 | Save 19 | 20 | Sign Up! 21 | 22 | Edit 23 | 24 | Edit 25 | 26 | DELETE 27 | 28 | cancel 29 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/course-page-modules/_course-intro.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // MODULE: COURSE INTRO --------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | .course-page-intro 6 | border-bottom: $border-width-default solid $fuschia 7 | 8 | h2 9 | color: $white 10 | 11 | h4 12 | color: $fuschia 13 | 14 | p.intro 15 | color: $white 16 | 17 | .course-description 18 | padding-bottom: 0 19 | 20 | .course-description-details, 21 | .course-description-bullets 22 | float: left 23 | margin-bottom: 2em 24 | 25 | .course-description-details 26 | width: 50% 27 | margin-right: 8% 28 | 29 | .course-description-bullets 30 | width: 40% 31 | background: $off-white 32 | padding: 2em 0 1em 3em 33 | border-radius: $border-radius-default 34 | 35 | ul 36 | padding-left: 0 37 | 38 | h3 39 | color: $fuschia 40 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/2-shared-scss-nesting/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons - Old 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Buttons

16 |
17 | 18 |
19 | Save 20 | 21 | Sign Up! 22 | 23 | Edit 24 | 25 | Edit 26 | 27 | DELETE 28 | 29 | cancel 30 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /examples/parent-selector.scss: -------------------------------------------------------------------------------- 1 | // PARENT SELECTOR EXAMPLES ------------------------------------------ // 2 | 3 | 4 | // Parent Selector - Simple 5 | // SCSS 6 | .button { 7 | background: $red; 8 | &:hover { background: $blue; } 9 | &.is-active { background: $green; } 10 | } 11 | 12 | /* OUTPUT */ 13 | .button { background: red;} 14 | .button:hover { background: blue;} 15 | .button.is-active { background: green;} 16 | 17 | 18 | 19 | // Parent Selector - Pre 20 | // SCSS 21 | .button { 22 | color: $white; 23 | .nav & { color: $black; } 24 | } 25 | 26 | /* OUTPUT */ 27 | .button { color: white; } 28 | .nav .button { color: black; } 29 | 30 | 31 | 32 | // Parent Selector - Conditional Classes example 33 | // SCSS 34 | 35 | h1, h2, h3, h4, h5, h6 { 36 | font-family: $header-font; 37 | .wf-inactive &, 38 | .lt-ie9 & { 39 | font-family: $fallback-font; 40 | } 41 | } 42 | 43 | /* OUTPUT */ 44 | h1, h2 { font-family: "Adelle"; } 45 | 46 | .wf-inactive h1, .lt-ie9 h1, .wf-inactive h2, .lt-ie9 h2 { 47 | font-family: "Cambria", "Georgia"; 48 | } 49 | -------------------------------------------------------------------------------- /resources/naming/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## Naming Conventions 4 | 5 | #### Naming Conventions 6 | 7 | * [SMACSS](http://smacss.com) 8 | * [Intro to OOCSS - Smashing Mag](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) 9 | * [BEM](http://bem.info/method/definitions/) 10 | * [MindBEMding – getting your head ’round BEM syntax - CSSWizardry](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) 11 | * [Scaling Down The BEM Methodology For Small Projects](http://www.smashingmagazine.com/2014/07/17/bem-methodology-for-small-projects/) 12 | * [CSS Guidelines](http://cssguidelin.es/) 13 | * [Naming UI components in OOCSS, CSS Wizardry](http://csswizardry.com/2014/03/naming-ui-components-in-oocss/) 14 | * [Choosing Great Variable Names, The Sass Way](http://thesassway.com/beginner/variable-naming) 15 | * [Modular CSS naming conventions](http://thesassway.com/advanced/modular-css-naming-conventions) 16 | * [Name Your SASS Variables Modularly](http://webdesign.tutsplus.com/tutorials/quick-tip-name-your-sass-variables-modularly--webdesign-13364) 17 | -------------------------------------------------------------------------------- /examples/simple-namespacing.scss: -------------------------------------------------------------------------------- 1 | // SIMPLE NAMESPACING ------------------------------------------ // 2 | 3 | // NAV STYLES 4 | .nav { width: 50%; } 5 | 6 | .nav-item { 7 | display: inline-block; 8 | 9 | &:active, 10 | &:visited { 11 | color: $purple; 12 | } 13 | 14 | &:hover { 15 | color: $blue; 16 | border-bottom: 3px solid $blue; 17 | } 18 | 19 | &.is-active { 20 | color: $blue; 21 | border-bottom: 3px solid $blue-dark; 22 | } 23 | } 24 | 25 | 26 | // HEADER 27 | .header { 28 | nav { 29 | float: right; 30 | } 31 | } 32 | 33 | // FOOTER 34 | .footer { 35 | background: $grey-dark; 36 | 37 | nav { 38 | float: left; 39 | } 40 | 41 | .nav-item { 42 | 43 | &:active, 44 | &:visited { 45 | color: $white; 46 | } 47 | 48 | &:hover { 49 | color: $blue-light; 50 | border-bottom: 3px solid $blue-light; 51 | } 52 | 53 | &.is-active { 54 | color: $blue-light; 55 | border-bottom: 3px solid $blue-light; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_news-blog.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // BLOG AND NEWS ---------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | .news-blog 6 | 7 | h2 8 | @include breakpoint(tiny) 9 | margin-bottom: 1em 10 | @include breakpoint(small) 11 | margin-bottom: 2em 12 | 13 | .blog-list 14 | @include breakpoint(tiny) 15 | width: 95% 16 | @include breakpoint(small) 17 | width: 60% 18 | 19 | .blog-item 20 | margin-bottom: 2em 21 | @extend %clearfix 22 | 23 | .blog-link 24 | display: block 25 | border-left: $border-width-default solid $background-color-light 26 | padding-left: 1em 27 | @include breakpoint(small) 28 | margin-left: -1em 29 | 30 | &:hover, 31 | &:focus 32 | cursor: pointer 33 | border-left-color: $green 34 | 35 | .blog-title 36 | color: $green-dark 37 | 38 | .blog-tag 39 | margin-bottom: .75em 40 | font-size: $iota 41 | 42 | .blog-title 43 | 44 | .blog-date 45 | -------------------------------------------------------------------------------- /resources/ie-rwd/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## IE and Responsive Web Design 4 | 5 | #### IE 6 | 7 | * [“Mobile first” CSS and getting Sass to help with legacy IE by Nicholas Gallagher](http://nicolasgallagher.com/mobile-first-css-sass-and-ie/) 8 | * [Conditional Stylesheets vs CSS Hacks? Answer: Neither! by Paul Irish](http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) 9 | * [Jake Archibald Sass-IE Setup](http://jakearchibald.github.io/sass-ie/) 10 | * [Breakup - create multiple CSS files from a single Sass partial ](https://github.com/BPScott/breakup) 11 | 12 | 13 | #### SVG 14 | 15 | * [Blender - convert SVG to PNG with an array of sizes](https://github.com/salesforce-ux/blender) 16 | 17 | 18 | #### Responsive 19 | 20 | * [Simple Media Queries with Compass by Patrick Fulton - slides](http://pfulton.github.io/breakpoint/) 21 | * [Handling IE8 and lower with Breakpoint + compass/support - John Albin - gist](https://gist.github.com/JohnAlbin/7192522) 22 | * [Responsive Web Design in Sass Part 2: Media queries in Sass](http://thesassway.com/intermediate/responsive-web-design-part-2) 23 | * [Susy - Layout Toolkit](http://susy.oddbird.net/) 24 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/course-page-modules/_course-locations.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // MODULE: COURSE LOCATIONS ----------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | .course-locations 6 | 7 | h2 8 | margin-bottom: 1em 9 | 10 | // TODO this needs to be a map! 11 | .location 12 | margin-bottom: 4em 13 | 14 | .location-austin 15 | background: url("/images/locations/location-austin-interior.jpg") no-repeat 0 0 / 50% 16 | min-height: 320px 17 | 18 | .location-houston 19 | background: url("/images/locations/location-houston-interior.jpg") no-repeat 0 0 / 50% 20 | min-height: 320px 21 | 22 | .location-sanfrancisco 23 | background: url("/images/locations/location-sf-interior.jpg") no-repeat 0 0 / 50% 24 | min-height: 320px 25 | 26 | .location-details 27 | width: 45% 28 | float: right 29 | 30 | .instructor 31 | display: inline-block 32 | text-align: center 33 | 34 | .instructor img 35 | border-radius: 100% 36 | width: 100px 37 | -------------------------------------------------------------------------------- /resources/architecture/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## Architecture 4 | 5 | 6 | #### File and Folder Architecture 7 | 8 | * [Dale Sande's Clean Out Your Sass Junk Drawer](http://gist.io/4436524) 9 | * [A Look at Different Sass Architectures - Bootstrap-sass, Foundation, SMACSS, more](http://www.sitepoint.com/look-different-sass-architectures/) 10 | * [Sass & CSS Style Guide - with Foundation, Compass](http://www.liveeditorcms.com/gc/playbook/sass-css-style-guide/) 11 | * [How to Structure a Sass Project, The Sass Way](http://thesassway.com/beginner/how-to-structure-a-sass-project) 12 | * [SassConf: Managing Complex Projects with Design Components, John Albin Wilkins](http://www.slideshare.net/JohnAlbin/sassconf-managing-complex-projects-with-design-components) 13 | * [How to Scale and Maintain Legacy CSS with Sass and SMACSS](http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/) 14 | 15 | 16 | #### Writing and Maintaining Architecture 17 | 18 | * [CSSWizardry's shame.css](http://csswizardry.com/2013/04/shame-css/) 19 | * [shame.css full interview](http://csswizardry.com/2013/04/shame-css-full-net-interview/) 20 | * [DoCSSa - Sass based CSS architecture and methodology](https://github.com/mlarcher/docssa) 21 | -------------------------------------------------------------------------------- /examples/simple-theming/3-theme.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // DEFAULT THEME ---------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | 6 | // Theme colors ----------------------------------------- // 7 | 8 | $primary-color: $navy; 9 | $secondary-color: $blue-bright; 10 | $tertiary-color: $grey-dark; 11 | $highlight-color: $green; 12 | 13 | 14 | // Text, Link, and Header colors ------------------------ // 15 | 16 | $text-color: $black; 17 | $text-color-sub: $grey; 18 | $text-color-reverse: $off-white; 19 | 20 | $header-color-primary: $navy; 21 | $header-color-secondary: $blue-bright; 22 | $header-color-tertiary: $blue-dark; 23 | 24 | $link-color: $secondary-color; 25 | $link-color-hover: $highlight-color; 26 | 27 | 28 | // Background colors ------------------------------------ // 29 | 30 | $background-color-default: $white; 31 | $background-color-light: $off-white; 32 | $background-color-dark: $navy; 33 | $background-color-standout: $blue-bright; 34 | 35 | 36 | // Button colors ---------------------------------------- // 37 | 38 | $button-bg: $green; 39 | $button-color: $white; 40 | $button-bg-hover: $green-dark; 41 | $button-color-hover: $white; 42 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_notifications.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // NOTIFICATIONS: PERMANENT ----------------------------- // 3 | // ------------------------------------------------------ // 4 | // these notifications sit under the overview box and 5 | // are not closeable. these are not like alert messages! 6 | 7 | .notifications 8 | 9 | .message 10 | text-align: center 11 | padding: 1.5em 0 12 | color: $white 13 | 14 | .message-icon, 15 | .message-title 16 | display: inline-block 17 | 18 | a.message-link 19 | color: $white 20 | 21 | .message-icon.fa 22 | font-size: $epsilon 23 | 24 | .message-title 25 | font-size: $epsilon 26 | font-family: $body-font-alt 27 | line-height: $line-large 28 | margin-left: 1em 29 | 30 | .message-cta 31 | margin-top: 1em 32 | 33 | 34 | // Message Styles and Colors 35 | .message-frontend 36 | @extend .message 37 | background: $fuschia-dark 38 | 39 | .message-title 40 | border-bottom: $border-width-link dotted $fuschia-dark 41 | 42 | &:hover .message-title 43 | border-bottom: $border-width-link dotted $fuschia 44 | 45 | .message-general 46 | @extend .message 47 | background: lighten($blue-dark,10%) 48 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/config/_theme-mks-dark.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // MAKERSQUARE DARK THEME ------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | 6 | // Primary and Highlight colors ------------------------- // 7 | 8 | $primary-color: $blue-bright 9 | $secondary-color: $blue-pale 10 | $tertiary-color: $grey-dark 11 | 12 | $highlight-color-one: $green 13 | $highlight-color-two: $orange 14 | 15 | 16 | // Text, Link, and Header colors ------------------------ // 17 | 18 | $text-color: $off-white 19 | $text-color-sub: $grey 20 | $text-color-reverse: $navy 21 | 22 | $header-color-primary: $off-white 23 | $header-color-secondary: $blue-pale 24 | $header-color-tertiary: $grey 25 | 26 | $link-color: $secondary-color 27 | $link-color-hover: $highlight-color-two 28 | 29 | 30 | // Background colors ------------------------------------ // 31 | 32 | $background-color-default: $navy 33 | $background-color-light: $black // opposite for this dark theme 34 | $background-color-dark: $blue-dark 35 | $background-color-standout: $off-white 36 | 37 | 38 | // Button colors ---------------------------------------- // 39 | 40 | $button-bg: $orange 41 | $button-color: $white 42 | $button-bg-hover: $orange-dark 43 | $button-color-hover: $white 44 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/course-page-modules/_course-outcomes.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // MODULE: COURSE OUTCOMES ----------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | .course-outcomes 6 | padding: 12em 0 14em 7 | background: $off-white 8 | @extend %clearfix 9 | 10 | .outcomes-tabs 11 | width: 60% 12 | float: right 13 | margin-bottom: 3em 14 | 15 | .tabs 16 | border-bottom: $border-width-small solid darken($off-white,10%) 17 | height: 30px 18 | 19 | .tab 20 | display: inline-block 21 | margin-right: 2em 22 | padding-bottom: 7px 23 | transition: border-color 0.25s linear 24 | border-bottom: $border-width-small solid darken($off-white,10%) 25 | @extend h6 26 | 27 | &.is-active 28 | border-bottom: $border-width-small solid $fuschia 29 | color: $fuschia 30 | 31 | .outcomes-display 32 | 33 | .course-outcome 34 | display: none 35 | &.is-active 36 | display: block 37 | 38 | .course-outcome-image 39 | float: left 40 | width: 35% 41 | margin-right: 5% 42 | 43 | .course-outcome-content 44 | float: right 45 | width: 60% 46 | 47 | h2 48 | color: $fuschia 49 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/course-page-modules/_course-upcoming.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // MODULE: UPCOMING COURSES ----------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | [class^=parttime-location-] 6 | margin-top: 3em 7 | 8 | .location-info 9 | margin-bottom: 1em 10 | @extend %clearfix 11 | 12 | .city, 13 | .next-class, 14 | .tuition, 15 | .apply, 16 | .date-time 17 | display: inline-block 18 | 19 | .city 20 | width: 25% 21 | .date-time 22 | width: 32% 23 | .tuition 24 | width: 12% 25 | .next-class 26 | width: 15% 27 | .apply 28 | width: 8% 29 | vertical-align: 2px 30 | 31 | 32 | .city 33 | font-family: $header-secondary-bold 34 | color: $blue-dark 35 | font-size: $delta 36 | 37 | .fa-map-marker 38 | padding-right: 5px 39 | color: $green 40 | margin-left: -24px 41 | 42 | .next-class, 43 | .tuition, 44 | .date-time 45 | font-size: $delta 46 | color: $black 47 | font-family: $body-font-alt 48 | 49 | .meta 50 | @extend h6 51 | font-size: $iota 52 | display: block 53 | margin-bottom: 0 54 | 55 | .description 56 | margin-top: 1em 57 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/config/_theme-mks-default.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // MAKERSQUARE DEFAULT THEME ---------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | 6 | // Primary and Highlight colors ------------------------- // 7 | 8 | $primary-color: $navy 9 | $secondary-color: $blue-bright 10 | $secondary-color-alt: $blue-light 11 | $tertiary-color: $grey-dark 12 | 13 | $highlight-color-one: $fuschia 14 | $highlight-color-two: $green 15 | $highlight-color-three: $purple-dark 16 | 17 | 18 | // Text, Link, and Header colors ------------------------ // 19 | 20 | $text-color: $black 21 | $text-color-sub: $grey 22 | $text-color-reverse: $off-white 23 | 24 | $header-color-primary: $navy 25 | $header-color-secondary: $blue-bright 26 | $header-color-tertiary: $blue-dark 27 | 28 | $link-color: $secondary-color 29 | $link-color-hover: $highlight-color-two 30 | 31 | 32 | // Background colors ------------------------------------ // 33 | 34 | $background-color-default: $white 35 | $background-color-light: $off-white 36 | $background-color-dark: $navy 37 | $background-color-black: $black 38 | $background-color-standout: $blue-bright 39 | 40 | 41 | // Button colors ---------------------------------------- // 42 | 43 | $button-bg: $green 44 | $button-color: $white 45 | $button-bg-hover: $green-dark 46 | $button-color-hover: $white 47 | -------------------------------------------------------------------------------- /resources/technical/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## Technical, Sass, Features 4 | 5 | #### Mixins, Extends, etc 6 | 7 | * [When to use Sass mixins, extends and variables](https://coderwall.com/p/7p7w2a) 8 | * [Should you use a Sass mixin or @extend?](http://roytomeij.com/blog/2013/should-you-use-a-sass-mixin-or-extend.html) 9 | * [Extend - SASS's Awkward Stepchild](http://jlzych.com/2013/10/08/extend-sass-s-awkward-stepchild/) 10 | 11 | #### Grids 12 | 13 | * [csswizardry-grids](http://csswizardry.com/csswizardry-grids/) 14 | 15 | #### Features 16 | 17 | * [Future Sass](http://davidwalsh.name/future-sass) 18 | * [Sass 101](http://coderecipez.roughdraft.io/) 19 | * [Nested selectors: the inception rule](http://thesassway.com/beginner/the-inception-rule) 20 | * [Understanding placeholder selectors](http://thesassway.com/intermediate/understanding-placeholder-selectors) 21 | * [Sass control directives: @if, @for, @each and @while](http://thesassway.com/intermediate/if-for-each-while) 22 | * [Referencing parent selectors using the ampersand character](http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand) 23 | * [Extending silent classes in Sass](http://csswizardry.com/2014/01/extending-silent-classes-in-sass/) 24 | * [Sass Snippets: The Almighty Ampersand](http://unakravets.tumblr.com/post/78744593423/sass-snippets-the-almighty-ampersand) 25 | * [Roy Tomeji's SassConf 13 Feature Demos](https://github.com/roytomeij/sassconf) 26 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_student-quotes.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // STUDENT QUOTES --------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | .student-quotes 6 | border-bottom: 4px solid $off-white 7 | @extend %clearfix 8 | 9 | .student-quotes-wrapper 10 | width: 85% 11 | margin: 0 auto 12 | text-align: center 13 | 14 | .student-quote 15 | padding-top: 20px 16 | 17 | .student-quote-wrapper 18 | width: 75% 19 | margin: 0 auto 20 | 21 | .student-quote-image 22 | border: 4px solid $off-white 23 | border-radius: 100% 24 | width: 200px 25 | height: 200px 26 | overflow: hidden 27 | margin: 0 auto 28 | -webkit-transition: all .3s ease-in-out 29 | 30 | img 31 | max-width: 100% 32 | width: 200px 33 | height: 200px 34 | 35 | &:hover 36 | -webkit-transform: scale(1.1) 37 | 38 | .student-quote-content 39 | margin-top: 2em 40 | 41 | .student-quote-text 42 | @extend p.intro 43 | color: $blue-dark 44 | 45 | .student-quote-details 46 | 47 | .student-quote-name 48 | text-transform: uppercase 49 | font-size: $epsilon 50 | font-family: $header-tertiary 51 | 52 | .student-quote-job, 53 | .student-quote-past 54 | @extend h6 55 | display: inline-block 56 | 57 | .student-quote-job-link 58 | color: $grey-dark 59 | &:hover, &:active 60 | color: $link-color-hover 61 | -------------------------------------------------------------------------------- /resources/testing-perf/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## Testing & Performance 4 | 5 | #### Performance, etc 6 | 7 | * [Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan - video](http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/?utm_source=dlvr.it&utm_medium=twitter) 8 | * [Front-end performance for web designers and front-end developers](http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/) 9 | * [One, Two, or Three - Chris Coyier](http://css-tricks.com/one-two-three/) 10 | * [CSSStats](https://github.com/mrmrs/cssstats) 11 | * [StyleStats](http://www.stylestats.org/) 12 | * [Penthouse - Critical Path CSS Generator](https://github.com/pocketjoso/penthouse) 13 | 14 | #### Visual Regression Testing 15 | 16 | * [DiffUX](https://github.com/diffux/diffux) 17 | * [Huxley](https://github.com/facebook/huxley) 18 | * [Wraith](https://github.com/BBC-News/wraith) 19 | * [True](https://github.com/ericam/true) 20 | 21 | #### Tools 22 | 23 | * [UnCSS - remove unused selectors](https://github.com/giakki/uncss) 24 | * [uCSS - remove unused selectors with Grunt](https://github.com/ullmark/grunt-ucss) 25 | * [Autoprefix with caniuse with Grunt](https://github.com/postcss/autoprefixer) 26 | * [SassyExport](https://github.com/ezekg/SassyExport) 27 | 28 | #### Linting 29 | 30 | * [Using SCSS-lint in Grunt, Flip Stewart](https://gist.github.com/flipstewart/22dafa320b3691299f21) 31 | * [List of SCSS Linters supported by scss-lint](https://github.com/causes/scss-lint/blob/master/lib/scss_lint/linter/README.md) 32 | -------------------------------------------------------------------------------- /examples/architecture-examples/jina.md: -------------------------------------------------------------------------------- 1 | ``` 2 | + css/ 3 | 4 | | - [project name].scss 5 | 6 | | + dependencies/ # variables, mixins, functions (nothing compiles yet) 7 | | |--- _color.scss 8 | | |--- _typography.scss 9 | | |--- _layout.scss # responsive grid settings 10 | | |--- _motion.scss # keyframes, durations, etc. 11 | | |--- … 12 | 13 | | + base/ # Plain old semantic HTML elements (no classes/IDs yet) 14 | | |--- _root.scss # a, html, body, selection 15 | | |--- _type-elements.scss # inline & block text elements 16 | | |--- _form-elements.scss 17 | | |--- _table-elements.css 18 | | |--- _embedded-media.scss # img, svg, audio, video, etc. 19 | 20 | | + components/ # modular, reusable UI components 21 | | |--- _buttons.scss # hello world of Sass ;) 22 | | |--- _cards.scss 23 | | |--- _menus.scss 24 | | |--- _modals.scss 25 | | |--- _tabs.scss 26 | | |--- _tooltips.scss 27 | | |--- … 28 | 29 | | + regions/ # page sections & regions 30 | | |--- _banner.scss 31 | | |--- _nav.scss 32 | | |--- _main.scss 33 | | |--- _complementary.scss 34 | | |--- _contentinfo.scss 35 | | |--- … 36 | 37 | | + helpers/ # non-semantic layout helper classes & placeholders 38 | | |--- _color-themes.scss # background & foreground pairings 39 | | |--- _layout-flex.scss # clearfix, float columns 40 | | |--- _layout-float.scss # clearfix, float columns 41 | | |--- _layout-table.scss # display: table layouts 42 | | |--- _visibility.scss 43 | | |--- … 44 | 45 | |---_print.scss 46 | ``` 47 | -------------------------------------------------------------------------------- /files/schedule.md: -------------------------------------------------------------------------------- 1 | # Timeline 2 | 3 | _Times are estimates!_ 4 | 5 | _9am_ 6 | * Introduction 7 | * [Digital Survey](http://bit.ly/cya-refactoring) 8 | * Q&A 9 | 10 | _9:45am_ 11 | * Refactoring Overview 12 | * Clarity, Maintainability, Efficiency, DRY 13 | * Why we do and don't refactor 14 | * Why Sass helps us refactor 15 | * Installation and Apps 16 | * Gem 17 | * Codekit 18 | * Foundation 19 | * LibSass & NodeSass 20 | * Grunt, Gulp 21 | * Compass 22 | * Syntaxes 23 | * Importing 24 | * Creating a Manifest 25 | * Importing Files 26 | * Folders 27 | * Creating Variables 28 | * Switching to variables 29 | * Color, Type, Font-size 30 | * Variable Abstraction 31 | * Patterns and Naming 32 | * Creating Simple Themes 33 | * Named Media Queries 34 | * Organize Files and Folders 35 | * Creating Configuration Files 36 | 37 | _10:45am to 11am_ 38 | * BREAK 39 | 40 | _11am to 11:30am_ 41 | * Creating Modules 42 | * Determining Modules 43 | * Namespacing 44 | * Steps to Refactor 45 | 1. Extract Partial 46 | 2. Find Repeating Patterns 47 | 3. Create/Extract Base Class/Extend 48 | 4. Apply/Remove Nesting 49 | 5. Edit HTML Classes 50 | 6. Apply Variables 51 | 7. Create Mixins 52 | 53 | _11:30am to 12:30pm_ 54 | * WORK TIME! 55 | 56 | _12:30pm to 1pm_ 57 | * Naming Conventions 58 | * Be consistent! 59 | * OOCSS, BEM, SMACSS, etc 60 | * Organizing Properties 61 | * Living Style Guides 62 | * Manual versus Living 63 | * Documentation & Commenting 64 | * Commenting files, sections 65 | * Documentation 66 | * Instructions 67 | * Testing 68 | * DiffUX, Wraith, Huxley 69 | * True 70 | -------------------------------------------------------------------------------- /resources/style-guides/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## Style Guides 4 | 5 | #### Style Guide Builders 6 | 7 | * [KSS](https://github.com/kneath/kss) 8 | * [StyleDocco](http://jacobrask.github.io/styledocco/) 9 | * [Kalei](http://kaleistyleguide.com/) 10 | * [Style Prototypes](https://github.com/north/Style-Prototypes) 11 | * [Style Guide Generators](https://github.com/davidhund/styleguide-generators) 12 | * [Living Style Guide](https://github.com/hagenburger/livingstyleguide) 13 | 14 | #### Style Guides General 15 | 16 | * [Writing an Interface Style Guide](http://alistapart.com/article/writingainterfacestyleguide) 17 | * [Front End Maintainability with Sass and Style Guides, Jina](https://blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides) 18 | * [Creating Style Guides](http://alistapart.com/article/creating-style-guides) 19 | * [Living Design System](http://medium.com/@soenkerohde/living-design-system-3ab1f2280ef7) 20 | * [Android Design](http://developer.android.com/design/building-blocks/seek-bars) 21 | 22 | #### Style Guide Examples 23 | 24 | * [Potluck Sass Style Guide](https://medium.com/@gem_ray/potluck-sass-style-guide-74434b267920) 25 | * [A list of living style guides](http://sheedy.roughdraft.io/6966907-a-list-of-living-style-guides) 26 | * [Salesforce1 Product Style Guide](http://sfdc-styleguide.herokuapp.com) 27 | * [Yelp Style Guide](http://www.yelp.com/styleguide) 28 | 29 | #### Syntaxes and Code Standards 30 | 31 | * [GitHub Style Guide](https://github.com/styleguide) 32 | * [CSS Guidelines](http://cssguidelin.es/) 33 | 34 | #### Tools 35 | 36 | * [CSS Explain](http://josh.github.io/css-explain/) 37 | -------------------------------------------------------------------------------- /resources/tips-tricks/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## Tips & Tricks 4 | 5 | #### Color 6 | 7 | * [Jackie Balzer's Color Guide](http://jackiebalzer.com/color) 8 | * [at-import Color Schemer](https://github.com/Team-Sass/color-schemer) 9 | * [Buttons and Color Chips with Sass Color Functions](http://www.kurtemch.com/blog/buttons-and-color-chips-with-sass-color-functions/) 10 | * [clrs.cc](http://clrs.cc/) 11 | * [How to dynamically change text color based on a background color](http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass) 12 | * [SCSS Blend Modes](https://github.com/heygrady/scss-blend-modes) 13 | * [Using mix instead of lighten, @flipstewart @KatieK2](http://codepen.io/flipstewart/pen/IofeD?editors=110) 14 | 15 | #### Other Stuff 16 | 17 | * [Sassy Z-Index Management For Complex Layouts](http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/) 18 | 19 | #### Dev Tools 20 | 21 | * [How to write Sass within Chrome's DevTools using Workspaces and Auto reload](http://www.amazeelabs.com/en/How-to-write-Sass-within-Chromes-DevTools-using-Workspaces-and-Auto-reload) 22 | * [Responsive Design Testing](https://github.com/mattkersley/Responsive-Design-Testing) 23 | * [Pesticide](https://github.com/mrmrs/pesticide) 24 | 25 | #### Typography 26 | 27 | * [Sass and Compass Vertical Rhythm](https://medium.com/@amlinarev/using-sass-compass-vertical-rhythm-to-set-up-typography-defaults-in-a-project-34fe2f1d2c02) 28 | * [Modular CSS typography](http://thesassway.com/advanced/modular-css-typography) 29 | * [Pragmatic, practical font sizing in CSS](http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/) 30 | -------------------------------------------------------------------------------- /resources/installation/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## Installation, Apps, Plugins 4 | 5 | #### Apps, Tools, etc 6 | 7 | * [Media Queries, Sass 3.2, and CodeKit, Chris Coyier](http://css-tricks.com/media-queries-sass-3-2-and-codekit/) 8 | 9 | #### Automation 10 | 11 | * [Grunt for People Who Think Things Like Grunt are Weird and Hard, Chris Coyier](http://24ways.org/2013/grunt-is-not-weird-and-hard/) 12 | * [Grunt Series on SassBites Podcast](https://plus.google.com/events/cfs3fgl0q36m3itusklhasjjpe8) 13 | * [Autoprefix CSS properties with Grunt, Flip Stewart](https://gist.github.com/flipstewart/fe1077dfc6000be37a01) 14 | 15 | #### Workflow 16 | 17 | * [Perfect Workflow in Sublime Text - Tutsplus Course(http://code.tutsplus.com/articles/perfect-workflow-in-sublime-text-free-course--net-27293) 18 | * [Front-end Workflow by Addy Osmani - slides](https://speakerdeck.com/addyosmani/automating-front-end-workflowAutomating) 19 | 20 | #### Starter Templates 21 | 22 | * [Sassaparilla - Sass, Compass starter](http://sass.fffunction.co/) 23 | * [Mina Markham's Sassy Starter](https://github.com/minamarkham/sassy-starter) 24 | * [InuitCSS](https://github.com/inuitcss) 25 | * [Idiomatic CCSS](https://github.com/necolas/idiomatic-css) 26 | * [Idiomatic Sass](https://github.com/anthonyshort/idiomatic-sass) 27 | * [Frontend-Boilerplate, Architect](https://github.com/wearearchitect/Frontend-Boilerplate) 28 | * [Rolodex - Belly](https://github.com/bellycard/rolodex/tree/master/vendor/assets/stylesheets) 29 | * [North Generator Style Prototype](https://github.com/north/generator-style-prototype) 30 | * [Google Web Starter Kit](https://github.com/google/web-starter-kit) 31 | * [Refills - component library for Bourbon, Neat, and Bitters](http://refills.bourbon.io/) 32 | 33 | #### Cross-Platform 34 | 35 | * [Theo - Design Property converter](https://github.com/salesforce-ux/theo) 36 | -------------------------------------------------------------------------------- /examples/named-media-queries.scss: -------------------------------------------------------------------------------- 1 | // MEDIA QUERY BUBBLING ------------------------------------------ // 2 | 3 | // SCSS 4 | .sidebar { 5 | width: 300px; 6 | @media screen and (min-width: 1000px) { 7 | width: 500px; 8 | } 9 | } 10 | /* OUTPUT - Same as CSS */ 11 | .sidebar { 12 | width: 300px; 13 | } 14 | 15 | @media screen and (min-width: 1000px) { 16 | .sidebar { 17 | width: 500px; 18 | } 19 | } 20 | 21 | 22 | 23 | 24 | // NAMED MEDIA QUERIES ------------------------------------------ // 25 | 26 | // Define your breakpoint sizes; these are based on min-width MQ's 27 | // e.g. tiny is 0-499px 28 | $tiny: 0; 29 | $small: 500px; 30 | $medium: 1000px; 31 | $large: 1300px; 32 | 33 | 34 | // Breakpoint Mixin 35 | @mixin breakpoint($media) { 36 | // if the media is 'tiny' 37 | @if $media == tiny { 38 | // define mediaquery with variable 39 | @media only screen and (min-width: $tiny) { 40 | // print content CSS 41 | @content; 42 | } 43 | } 44 | 45 | @else if $media == small { 46 | // small and medium are 1px smaller than their previous variable 47 | @media only screen and (min-width: $small - 1) { 48 | @content; 49 | } 50 | } 51 | 52 | @else if $media == medium { 53 | @media only screen and (min-width: $medium - 1) { 54 | @content; 55 | } 56 | } 57 | 58 | @else if $media == large { 59 | @media only screen and (min-width: $large) { 60 | @content; 61 | } 62 | } 63 | 64 | } 65 | 66 | 67 | 68 | // Use in your Stylesheets 69 | .page-wrap { 70 | @include breakpoint(tiny) { width: 95%; } // at 0 to 499px 71 | @include breakpoint(small) { width: 80%; } // at 500px to 999px 72 | @include breakpoint(medium) { width: 70%; } // at 1000px to 1299px 73 | @include breakpoint(large) { width: 60%; } // 1300px and up 74 | } 75 | -------------------------------------------------------------------------------- /resources/theory/resources.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## CSS, Theory 4 | 5 | #### Modularizing 6 | 7 | * [Modular CSS, an example, The Sass Way](http://thesassway.com/advanced/modular-css-an-example) 8 | * [Slightly Obtrusive JavaScript](http://ozmm.org/posts/slightly_obtrusive_javascript.html) 9 | * [Responsive Design Frameworks: Just Because You Can, Should You?](http://www.smashingmagazine.com/2014/02/19/responsive-design-frameworks-just-because-you-can-should-you/) 10 | 11 | #### CSS, the Cascade and Inheritance, Theory 12 | 13 | * [About HTML semantics and front-end architecture, Nicholas Gallagher](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/) 14 | * [Used and Abused – CSS Inheritance and Our Misuse of the Cascade by Micah Godbolt - required reading!](http://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/) 15 | * [Semantic CSS With Intelligent Selectors, Heydon Pickering](http://www.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/) 16 | * [Modern CSS Layouts, Part 2: The Essential Techniques, Zoe Gillenwater](http://www.smashingmagazine.com/2010/05/06/modern-css-layouts-part-2-the-essential-techniques/) 17 | * [Challenging CSS Best Practices](http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/) 18 | * [Decoupling HTML From CSS](http://www.smashingmagazine.com/2012/04/20/decoupling-html-from-css/) 19 | 20 | #### Sass 21 | 22 | * [Sass-Part 2: Inheritance, Functions and Scripting](http://a-developer-life.blogspot.com/2011/07/sass-part-2-inheritance-functions-and.html) 23 | * [Grouping related classes in your markup, CSSWizardry](http://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/) 24 | * [Distributed knowledge with Compass, Scott Kellum - required reading](http://scottkellum.com/2013/08/04/distributed-knowledge-with-compass.html) 25 | * [A standard module definition for Sass](http://thesassway.com/intermediate/a-standard-module-definition-for-sass) 26 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/config/_colors.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // COLOR VARIABLES -------------------------------------- // 3 | // ------------------------------------------------------ // 4 | // This is the MakerSquare color scheme, including black, 5 | // white, and grey. You can use this to create many 6 | // color schemes (dark, light, colorful, blue-professional) 7 | // but try to stick to these colors and dark/light 8 | // variations, rather than adding extraneous colors. 9 | 10 | 11 | // Grey ------------------------------------------------- // 12 | $black: rgb(30, 32, 34) // use in place of black #000 13 | $grey-dark: rgb(84, 88, 92) 14 | $grey: rgb(133, 141, 148) // primary grey 15 | $off-white: rgb(242, 242, 242) // use in place of white except for text 16 | $white: rgb(255, 255, 255) 17 | 18 | // Blues ------------------------------------------------ // 19 | $navy: rgb(1, 46, 81) // MKS Navy 20 | $navy-dark: darken($navy,10%) // MKS Navy 21 | $blue-dark: rgb(23, 75, 133) 22 | $blue-bright: rgb(35, 128, 226) // MKS Primary Blue 23 | $blue-light: rgb(99, 159, 222) 24 | $blue-pale: rgb(206, 226, 247) 25 | 26 | // Secondary colors ------------------------------------- // 27 | // use sparingly, for contrast and highlight only 28 | $orange: rgb(255, 152, 0) 29 | $orange-light: lighten($orange, 50%) 30 | $orange-dark: darken($orange,15%) 31 | 32 | $green: rgb(130, 179, 0) 33 | $green-light: lighten($green, 50%) 34 | $green-dark: darken($green, 15%) 35 | 36 | $purple: rgb(156, 39, 176) 37 | $purple-light: lighten($purple, 50%) 38 | $purple-dark: darken($purple,15%) 39 | 40 | $fuschia: rgb(194, 24, 91) 41 | $fuschia-light: lighten($fuschia, 50%) 42 | $fuschia-dark: darken($fuschia,15%) 43 | 44 | $yellow: rgb(255, 202, 0) 45 | $yellow-light: lighten($yellow, 50%) 46 | 47 | $turquoise: rgb(78, 176, 196) 48 | $turquoise-light: lighten($turquoise, 50%) 49 | $turquoise-dark: darken($turquoise,15%) 50 | 51 | 52 | // PT page 53 | $page-background: $blue-dark 54 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_overview.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // OVERVIEW of COURSES ---------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | .course-overview 6 | padding-bottom: 4em 7 | padding-top: 8em 8 | 9 | .overview-headline 10 | 11 | h1 12 | font-size: $alpha 13 | color: $white 14 | margin-bottom: .25em 15 | h2 16 | font-size: $gamma 17 | color: $white 18 | margin-bottom: 2em 19 | 20 | // description intro paragraphs 21 | .parttime-description 22 | background: $blue-dark 23 | margin-bottom: 6em 24 | 25 | p.intro 26 | color: $white 27 | margin: 2em 0 28 | width: 75% 29 | 30 | 31 | // Two-up Overview Blocks for PT only ------------------- // 32 | // ------------------------------------------------------ // 33 | 34 | .parttime-courses 35 | @extend %clearfix 36 | 37 | .course-overview-frontend, 38 | .course-overview-backend 39 | float: left 40 | width: 45% 41 | margin-bottom: 2em 42 | 43 | .course-overview-frontend 44 | margin-right: 8% 45 | 46 | 47 | .course-overview-frontend 48 | 49 | h2 a 50 | display: block 51 | color: $fuschia 52 | border-left: $border-width-default solid $fuschia-dark 53 | padding-left: .5em 54 | margin-left: -.5em 55 | 56 | &:hover 57 | color: $fuschia-dark 58 | 59 | p.intro 60 | color: $fuschia-dark 61 | margin: 0 62 | 63 | .course-overview-backend 64 | 65 | h2 a 66 | display: block 67 | color: $green 68 | border-left: $border-width-default solid $green-dark 69 | padding-left: .5em 70 | margin-left: -.5em 71 | 72 | &:hover 73 | color: $green-dark 74 | 75 | p.intro 76 | color: $green-dark 77 | margin: 0 78 | 79 | .overview-cta 80 | margin-top: 2em 81 | 82 | .course-overview-description 83 | min-height: 18em 84 | -------------------------------------------------------------------------------- /examples/architecture-examples/sassy-starter.md: -------------------------------------------------------------------------------- 1 | ``` 2 | 3 | + scss/ 4 | | 5 | | + base/ # reset, typography, site-wide 6 | | |-- _index.scss # imports for all base styles 7 | | |-- _base.scss # base styles 8 | | |-- _normalize.scss # normalize v3.0.1 9 | | 10 | | + layout/ # major components, e.g., header, footer etc. 11 | | |-- _index.scss # imports for all layout styles 12 | | 13 | | + modules/ # minor components, e.g., buttons, widgets etc. 14 | | |-- _index.scss # imports for all modules 15 | | 16 | | + states/ # js-based classes, alternative states 17 | | |-- _index.scss # imports for all state styles 18 | | |-- _states.scss # state rules 19 | | |-- _print.scss # print styles 20 | | |-- _touch.scss # touch styles 21 | | 22 | | + themes/ # (optional) separate theme files 23 | | |-- beccapurple.scss # rename to appropriate theme name 24 | | 25 | | + utilities/ # non-CSS outputs (i.e. mixins, vars) 26 | | |-- _index.scss # imports for all mixins + global project vars 27 | | |-- _fonts.scss # font mixins 28 | | |-- _functions.scss # ems to rems conversion, etc. 29 | | |-- _global.scss # global variables 30 | | |-- _helpers.scss # placeholder helper classes 31 | | |-- _mixins.scss # media queries, CSS3, etc. 32 | | |-- _lib.scss # imports for third party styles 33 | | |-- + lib/ # third party styles 34 | | | _pesticide.scss # CSS pesticide 35 | | | ... 36 | | 37 | | + ie.scss # IE specific Sass file 38 | | + styles.scss # primary Sass file 39 | | + _shame.scss # because hacks happen 40 | | 41 | + .htaccess # Apache server configs 42 | + config.rb # Compass configuration file 43 | + crossdomain.xml # cross-domain requests 44 | + docs/ # SassDoc generated documentation 45 | + deploy.rb # Capistrano configuration file 46 | + Gruntfile.js # Grunt configuration & tasks 47 | + package.json # Grunt metadata & dependencies 48 | ``` 49 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/1-original-css-html/buttons-original.css: -------------------------------------------------------------------------------- 1 | /* Button CSS */ 2 | .save_button { 3 | display: inline-block; 4 | padding: 16px 22px; 5 | color: #fff; 6 | font-size: 24px; 7 | border-radius: 4px; 8 | text-transform: uppercase; 9 | color: #c6eff0; 10 | background-color: #2ba2a6; 11 | box-shadow: 0px 8px 0px 0px rgba(0, 0, 0, 0.125); 12 | border-right: 1px solid #217a7d; 13 | border-bottom: 1px solid #217a7d; 14 | text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); } 15 | 16 | .save_button:hover { 17 | background: #217A7D; } 18 | 19 | .sign_up_button { 20 | margin-right: 10px; 21 | margin-left: 10px; 22 | background: #237cbe; 23 | box-shadow: 0px 8px 0px 0px rgba(35, 124, 190, 0.25); 24 | border: 1px solid #1b6093; 25 | text-shadow: 0px 1px 1px #0b283d; 26 | color: #fff; 27 | letter-spacing: 2px; 28 | font-size: 2em; 29 | line-height: 2.5em; 30 | padding: 20px; 31 | border-radius: 10px; 32 | text-transform: uppercase; } 33 | 34 | .sign_up_button:hover, 35 | .sign_up_button:focus, 36 | .sign_up_button:active { 37 | background: #1B6093; 38 | border-color: #0B283D; } 39 | 40 | .button-edit { 41 | display: inline-block; 42 | height: 65px; 43 | width: 110px; 44 | padding-left: 26px; 45 | padding-top: 16px; 46 | box-sizing: border-box; 47 | margin-right: 10px; 48 | text-transform: uppercase; 49 | font-size: 24px; 50 | border-radius: 4px; 51 | font-weight: bold; 52 | color: #d579cc; 53 | background-color: #993399; 54 | box-shadow: 0px 8px 0px 0px rgba(153, 51, 153, 0.25); 55 | border-right: 1px solid #732673; 56 | border-bottom: 1px solid #732673; 57 | text-shadow: 0px 1px 1px #260d26; } 58 | 59 | .button_edit:hover { 60 | background: #732673; } 61 | 62 | .button-disabled { 63 | display: inline-block; 64 | height: 65px; 65 | width: 110px; 66 | padding-left: 26px; 67 | padding-top: 18px; 68 | box-sizing: border-box; 69 | margin-right: 10px; 70 | text-transform: uppercase; 71 | font-size: 24px; 72 | border-radius: 4px; 73 | color: #888; 74 | background-color: #ccc; 75 | cursor: default; 76 | margin-right: 20px; } 77 | 78 | .button_delete { 79 | color: white; 80 | background-color: #e6475b; 81 | box-shadow: 0px 8px 0px 0px rgba(230, 71, 91, 0.25); 82 | border-right: 1px solid #dc1e36; 83 | border-bottom: 1px solid #dc1e36; 84 | text-shadow: 0px 1px 1px #821220; 85 | display: inline-block; 86 | padding: 16px 22px; 87 | border-radius: 4px; 88 | font-size: 22px; 89 | margin-right: 20px; } 90 | 91 | .cancel_button_link { 92 | color: black; 93 | font-weight: bold; 94 | font-size: .8em; 95 | text-transform: capitalize; } 96 | 97 | .cancel_button_link:hover { 98 | color: grey; } 99 | 100 | /*# sourceMappingURL=buttons-original.css.map */ 101 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/1-original-css-html/buttons-original.scss: -------------------------------------------------------------------------------- 1 | /* Button CSS */ 2 | 3 | .save_button { 4 | display: inline-block; 5 | padding: 16px 22px; 6 | color: #fff; 7 | font-size: 24px; 8 | border-radius: 4px; 9 | text-transform: uppercase; 10 | color: #c6eff0; 11 | background-color: #2ba2a6; 12 | box-shadow: 0px 8px 0px 0px rgba(0,0,0, 0.125); 13 | border-right: 1px solid #217a7d; 14 | border-bottom: 1px solid #217a7d; 15 | text-shadow: 0px 1px 1px rgba(0,0,0,.25); 16 | } 17 | 18 | .save_button:hover { 19 | background: #217A7D; 20 | } 21 | 22 | .sign_up_button { 23 | margin-right: 10px; 24 | margin-left: 10px; 25 | background: #237cbe; 26 | box-shadow: 0px 8px 0px 0px rgba(35, 124, 190, 0.25); 27 | border: 1px solid #1b6093; 28 | text-shadow: 0px 1px 1px #0b283d; 29 | color: #fff; 30 | letter-spacing: 2px; 31 | font-size: 2em; 32 | line-height: 2.5em; 33 | padding: 20px; 34 | border-radius: 10px; 35 | text-transform: uppercase; 36 | } 37 | 38 | .sign_up_button:hover, 39 | .sign_up_button:focus, 40 | .sign_up_button:active { 41 | background: #1B6093; 42 | border-color: #0B283D; 43 | } 44 | 45 | .button-edit { 46 | display: inline-block; 47 | height: 65px; 48 | width: 110px; 49 | padding-left: 26px; 50 | padding-top: 16px; 51 | box-sizing: border-box; 52 | margin-right: 10px; 53 | text-transform: uppercase; 54 | font-size: 24px; 55 | border-radius: 4px; 56 | font-weight: bold; 57 | color: #d579cc; 58 | background-color: #993399; 59 | box-shadow: 0px 8px 0px 0px rgba(153, 51, 153, 0.25); 60 | border-right: 1px solid #732673; 61 | border-bottom: 1px solid #732673; 62 | text-shadow: 0px 1px 1px #260d26; 63 | } 64 | 65 | .button_edit:hover { 66 | background: #732673; 67 | } 68 | 69 | .button-disabled { 70 | display: inline-block; 71 | height: 65px; 72 | width: 110px; 73 | padding-left: 26px; 74 | padding-top: 18px; 75 | box-sizing: border-box; 76 | margin-right: 10px; 77 | text-transform: uppercase; 78 | font-size: 24px; 79 | border-radius: 4px; 80 | color: #888; 81 | background-color: #ccc; 82 | cursor: default; 83 | margin-right: 20px; 84 | } 85 | 86 | .button_delete { 87 | color: white; 88 | background-color: #e6475b; 89 | box-shadow: 0px 8px 0px 0px rgba(230, 71, 91, 0.25); 90 | border-right: 1px solid #dc1e36; 91 | border-bottom: 1px solid #dc1e36; 92 | text-shadow: 0px 1px 1px #821220; 93 | display: inline-block; 94 | padding: 16px 22px; 95 | border-radius: 4px; 96 | font-size: 22px; 97 | margin-right: 20px; 98 | } 99 | 100 | .cancel_button_link { 101 | color: black; 102 | font-weight: bold; 103 | font-size: .8em; 104 | text-transform: capitalize; 105 | } 106 | 107 | .cancel_button_link:hover { 108 | color: grey; 109 | } 110 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Choose your own Refactoring Adventure! 2 | #### A workshop at SassConf 2014 by Elyse Holladay & Jina Bolton 3 | 4 | ![CYA](cya-supercomputer.jpg) 5 | 6 | ## Overview 7 | 8 | Whether you’ve been using Sass for a while or are still trying to figure out how to abandon plain CSS, refactoring a large project can be a daunting task. We all know it’s too hard to refactor everything for months and launch it all at once, so how do you begin a multi-step refactoring process? 9 | 10 | Jina Bolton is a San Francisco-based designer and developer best known for her work with Team Sass Design, speaking at conferences, and co-authoring two books: Fancy Form Design and The Art & Science of CSS. Currently she’s a Senior Product Designer with Salesforce UX on the Systems team; she works collaboratively across product teams to help identify and document interaction and visual design patterns. Elyse Holladay is a developer and instructor at MakerSquare, an Austin-based dev school. She has been involved in two large refactoring projects: taking three separate HTML & CSS codebases to a single, shared Sass codeset and a complete UI overhaul of a multi-app enterprise project. Their experience in maintaining large codebases has given them insight into the pitfalls—and joys—of refactoring. 11 | 12 | In this four-hour workshop, Jina and Elyse will walk you through the basics of refactoring using Sass. You’ll receive guidelines for how to refactor for clarity, maintainability, efficiency, and DRY code, and learn how to test your changes. They’ll cover ways to break down a refactor into manageable chunks, help you understand how to modularize your CSS, and organize messy code into documented, style-guide ready files. Everyone will leave with a customized game plan of steps, tools, and guidelines to refactor their project—not a sample app—so bring your project code with you. 13 | 14 | ## Navigating this Repo 15 | 16 | ### /files 17 | 18 | This folder contains a few items for your reference during the workshop. 19 | 20 | * **schedule.md** — Today's schedule 21 | * **worksheet.pdf** — A worksheet for you to fill out during the workshop, to give you a checklist of things you can do to refactor your project when you leave! 22 | 23 | ### /resources 24 | 25 | There is a resources doc for each section of the workshop. These contain all kinds of links and goodies for more details on what we cover during the day. You'll find lots of information on how other people tackle similar issues, build front-end architectures, and more in-depth tutorials. 26 | 27 | ### /examples 28 | 29 | Some code examples from our own projects, or other ideas and projects. We don't want you going cross-eyed trying to look at code samples on slides, so instead we put them here for you to browse at your own leisure. 30 | 31 | ### /exercise 32 | 33 | The workshop exercises will be determining some modules in your project that you can break out and refactor. Depending on time we'll actually get started refactoring one! 34 | 35 | If you didn't bring your own project code to work on, there's a sample module in this folder you can work on. See the README in that folder for more details. 36 | 37 | ## Contact Us 38 | 39 | Want to get in touch with us about the workshop? More questions or feedback? We're best reached on Twitter. 40 | 41 | ### Jina Bolton 42 | 43 | [@jina](http://twitter.com/jina) 44 | 45 | ### Elyse Holladay 46 | 47 | [@elyseholladay](http://twitter.com/elyseholladay) 48 | -------------------------------------------------------------------------------- /examples/simple-theming/2-config.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // CONFIGURATION & SETTINGS ----------------------------- // 3 | // ------------------------------------------------------ // 4 | // In the config file you can edit colors, typography, 5 | // and general default variables. Note that all variables 6 | // have the !default flag this means that they can be 7 | // overridden by variables later in the Sass workflow. 8 | // This will allow us to create themes easily, if we 9 | // choose. 10 | 11 | 12 | // Font Sizing ------------------------------------------ // 13 | // ------------------------------------------------------ // 14 | 15 | // Base font size -------------------------------------- // 16 | // 16px is the browser default. 17 | 18 | $base-font-size: 1em !default 19 | 20 | // Font Sizes ------------------------------------------ // 21 | 22 | $giga: 4.5em !default 23 | $alpha: 3.662em !default 24 | $beta: 2.930em !default 25 | $gamma: 1.875em !default 26 | $delta: 1.5em !default 27 | $epsilon: 1.2em !default 28 | $zeta: .875em !default 29 | $iota: .75rem !default 30 | 31 | // Line Heights ----------------------------------------- // 32 | 33 | $line-base: 1.5 !default 34 | $line-large: 1.75 !default 35 | $line-small: 1.25 !default 36 | 37 | // Typography ------------------------------------------- // 38 | // ------------------------------------------------------ // 39 | 40 | 41 | // Body text -------------------------------------------- // 42 | 43 | $body-fallback: 'Cambria', 'Lucida Bright', 'Georgia', serif 44 | 45 | $body-font: 'adelle', $body-fallback !default 46 | $body-bold: 'adelle-bold', $body-font !default 47 | $body-italic: 'adelle-italic', $body-font !default 48 | 49 | 50 | // Alternate Body text ---------------------------------- // 51 | 52 | $body-font-alt-fallback: 'Geneva', 'Franklin Gothic', 'Calibri', 'Arial Narrow', 'Helvetica', sans-serif 53 | 54 | $body-font-alt: 'pluto-sans-condensed-light', $body-font-alt-fallback !default 55 | $body-font-alt-bold: 'pluto-sans-condensed-regular', $body-font-alt !default 56 | 57 | 58 | // Headers ---------------------------------------------- // 59 | 60 | $header-fallback: 'Geneva', 'Franklin Gothic', 'Calibri', 'Arial Narrow', 'Helvetica', sans-serif 61 | 62 | $header-primary: 'pluto-sans-condensed-thin', $header-fallback !default 63 | $header-secondary: $body-font !default 64 | $header-secondary-bold: $body-bold !default 65 | $header-tertiary: $body-font-alt-bold !default 66 | 67 | 68 | // Navigation ------------------------------------------- // 69 | 70 | $nav-font: 'pluto-sans-condensed-medium', $header-fallback !default 71 | 72 | 73 | // Code Blocks ----------------------------------------- // 74 | 75 | $code-fallback: 'Inconsolata', 'Monaco', 'Consolas', monospace 76 | 77 | $code-font: 'fira-mono', $code-fallback !default 78 | $code-font-bold: 'fira-mono-medium', $code-font !default 79 | 80 | 81 | // Buttons --------------------------------------------- // 82 | 83 | $button-font: 'pluto-sans-regular', $header-fallback !default 84 | 85 | 86 | // Font Awesome ---------------------------------------- // 87 | 88 | $icon-font: 'font-awesome' !default 89 | 90 | 91 | // Borders ---------------------------------------------- // 92 | // ------------------------------------------------------ // 93 | 94 | $border-width-default: 6px 95 | $border-width-small: 2px 96 | $border-width-link: 1px 97 | $border-width-large: 12px 98 | 99 | $border-radius-default: 4px 100 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_info-boxes.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // INFO BOXES ------------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | 6 | // fulltime and part time info boxes 7 | .program-info-box 8 | position: relative 9 | @extend %clearfix 10 | 11 | &.program-info-box-fulltime, 12 | &.program-info-box-parttime 13 | background: $white 14 | 15 | 16 | // program box header 17 | .programs-header 18 | padding: 2em 0 19 | text-align: center 20 | 21 | h1 22 | // margin-bottom: .5em 23 | 24 | blockquote 25 | margin: .5em auto 1em 26 | @include breakpoint(tiny) 27 | width: 90% 28 | @include breakpoint(medium) 29 | width: 65% 30 | 31 | 32 | // program box row 33 | .info-box-row 34 | @extend %clearfix 35 | margin: 0 auto 36 | @include breakpoint(tiny) 37 | width: 100% 38 | @include breakpoint(medium) 39 | width: 85% 40 | 41 | // inside rows: quotes, photos 42 | 43 | // Program Quote 44 | .programs-quote 45 | position: relative 46 | text-align: center 47 | z-index: 100 48 | float: left 49 | @include breakpoint(tiny) 50 | width: 100% 51 | padding: 2.5em .5em 52 | @include breakpoint(medium) 53 | width: 50% 54 | @include breakpoint(large) 55 | padding: 71px 46px 67px 56 | 57 | .program-info-box-fulltime &, 58 | .program-info-box-parttime & 59 | background-color: $black 60 | 61 | .programs-quote blockquote 62 | -webkit-font-smoothing: antialiased 63 | font-smoothing: antialiased 64 | // font-family: $body-italic 65 | // font-style: italic 66 | color: $text-color-reverse 67 | font-size: $delta 68 | margin: 0 69 | 70 | .programs-quote h6 71 | margin-top: 2em 72 | 73 | 74 | // photo box 75 | .photo-box 76 | float: left 77 | position: relative 78 | @include breakpoint(tiny) 79 | width: 50% 80 | @include breakpoint(medium) 81 | width: 25% 82 | 83 | &.photo-box-double 84 | @include breakpoint(tiny) 85 | width: 100% 86 | @include breakpoint(medium) 87 | width: 50% 88 | 89 | &.photo-box-right 90 | float: right 91 | 92 | img 93 | display: block 94 | position: relative 95 | width: 100% 96 | 97 | .photo-box-overlay 98 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, transparent), color-stop(100%, rgba(0,0,0,0.6))) 99 | background-image: -webkit-linear-gradient(transparent 30%,rgba(0,0,0,0.6)) 100 | background-image: -moz-linear-gradient(transparent 30%,rgba(0,0,0,0.6)) 101 | background-image: -o-linear-gradient(transparent 30%,rgba(0,0,0,0.6)) 102 | background-image: linear-gradient(transparent 30%,rgba(0,0,0,0.6)) 103 | overflow: hidden 104 | position: absolute 105 | top: 0 106 | left: 0 107 | width: 100% 108 | height: 100% 109 | z-index: 100 110 | padding: 32px 111 | 112 | .overlay-text-position:before 113 | content: "" 114 | display: inline-block 115 | height: 100% 116 | vertical-align: middle 117 | margin-right: -0.25em 118 | 119 | .overlay-text 120 | display: inline-block 121 | vertical-align: bottom 122 | width: 99% 123 | 124 | h6, p 125 | color: $text-color-reverse 126 | 127 | 128 | // apply button 129 | 130 | .apply-cta 131 | margin: 0 auto 132 | width: 60% 133 | text-align: center 134 | 135 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/modules/_team-grid.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // TEAM GRID -------------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | .team-grid 6 | @extend %clearfix 7 | 8 | .team-intro 9 | @extend %clearfix 10 | margin-bottom: 4em 11 | 12 | .team-group 13 | float: left 14 | margin: 0 15 | overflow: hidden 16 | padding: 2em 2em 17 | box-sizing: border-box 18 | 19 | p 20 | font-family: $body-italic 21 | color: $text-color-reverse 22 | font-size: $delta 23 | 24 | &.team-group-instructors 25 | background: $fuschia-dark 26 | width: 400px 27 | height: 400px 28 | 29 | &.team-group-operations 30 | background: $blue-dark 31 | width: 400px 32 | height: 200px 33 | 34 | .team-grid-photos 35 | padding: 0 36 | margin: 0 37 | line-height: 11px // HACK elyse 090214 I have no idea why this works, but without it there's a blank space because the .team-member divs aren't the same height/width. thx percentages >:X 38 | 39 | .team-member 40 | float: left 41 | width: 16.666666% 42 | position: relative 43 | &.is-selected 44 | width: 33.33333% 45 | @include breakpoint(tiny) 46 | width: 50% 47 | &.is-selected 48 | width: 100% 49 | @include breakpoint(small) 50 | width: 33.333333% 51 | &.is-selected 52 | width: 66.6666666% 53 | @include breakpoint(medium) 54 | width: 25% 55 | &.is-selected 56 | width: 50% 57 | @include breakpoint(large) 58 | // same as default 59 | width: 16.666666% 60 | &.is-selected 61 | width: 33.33333% 62 | 63 | &:hover 64 | cursor: pointer 65 | 66 | .team-member-info 67 | opacity: 1 68 | 69 | &.is-selected 70 | 71 | .team-member-info 72 | opacity: 1 73 | 74 | 75 | .avatar 76 | position: relative 77 | cursor: pointer 78 | 79 | img 80 | width: 100% 81 | height: 100% 82 | 83 | 84 | 85 | 86 | 87 | .team-member-info 88 | opacity: 0 89 | position: absolute 90 | width: 100% 91 | height: 100% 92 | z-index: 200 93 | text-align: center 94 | transition: opacity 0.175s ease-in-out 95 | -moz-transition: opacity .175s ease-in-out 96 | -webkit-transition: opacity 0.175s ease-in-out 97 | background-color: transparentize($primary-color,.25) 98 | 99 | .team-member-info-hover 100 | width: 80% 101 | margin: 0 auto 102 | 103 | h3 104 | padding-top: 2em 105 | margin-bottom: .5em 106 | color: $text-color-reverse 107 | font-size: $delta 108 | font-family: $body-font 109 | font-weight: normal 110 | 111 | h6 112 | color: $text-color-sub 113 | 114 | .team-member.is-selected 115 | .team-member-info-hover 116 | display: none 117 | 118 | // only display if .team-member.is-selected 119 | .team-member-info-detail 120 | width: 80% 121 | margin: 0 auto 122 | display: none 123 | 124 | h3 125 | padding-top: 2em 126 | margin-bottom: .5em 127 | color: $text-color-reverse 128 | font-size: $delta 129 | font-family: $body-font 130 | font-weight: normal 131 | 132 | h6 133 | color: $text-color-sub 134 | 135 | p 136 | padding-top: 2em 137 | color: $text-color-reverse 138 | line-height: $line-large 139 | 140 | .team-member.is-selected 141 | .team-member-info-detail 142 | display: block 143 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/config/_config.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // CONFIGURATION & SETTINGS ----------------------------- // 3 | // ------------------------------------------------------ // 4 | // In the config file you can edit colors, typography, 5 | // and general default variables. Note that all variables 6 | // have the !default flag this means that they can be 7 | // overridden by variables later in the Sass workflow. 8 | // This will allow us to create themes easily, if we 9 | // choose. 10 | 11 | 12 | // Font Sizing ------------------------------------------ // 13 | // ------------------------------------------------------ // 14 | 15 | // Base font size -------------------------------------- // 16 | // 16px is the browser default. 17 | 18 | $base-font-size: 1em !default 19 | 20 | // Font Sizes ------------------------------------------ // 21 | 22 | $giga: 4.5em !default 23 | $alpha: 3.662em !default 24 | $beta: 2.930em !default 25 | $gamma: 1.875em !default 26 | $delta: 1.5em !default 27 | $epsilon: 1.2em !default 28 | $zeta: .875em !default 29 | $iota: .75rem !default 30 | 31 | // Line Heights ----------------------------------------- // 32 | 33 | $line-base: 1.5 !default 34 | $line-large: 1.75 !default 35 | $line-small: 1.25 !default 36 | 37 | 38 | 39 | 40 | // Typography ------------------------------------------- // 41 | // ------------------------------------------------------ // 42 | 43 | 44 | // Body text -------------------------------------------- // 45 | 46 | $body-fallback: 'Cambria', 'Lucida Bright', 'Georgia', serif 47 | 48 | $body-font: 'adelle', $body-fallback !default 49 | $body-bold: 'adelle-bold', $body-font !default 50 | $body-italic: 'adelle-italic', $body-font !default 51 | 52 | 53 | // Alternate Body text ---------------------------------- // 54 | 55 | $body-font-alt-fallback: 'Geneva', 'Franklin Gothic', 'Calibri', 'Arial Narrow', 'Helvetica', sans-serif 56 | 57 | $body-font-alt: 'pluto-sans-condensed-light', $body-font-alt-fallback !default 58 | $body-font-alt-bold: 'pluto-sans-condensed-regular', $body-font-alt !default 59 | 60 | 61 | // Headers ---------------------------------------------- // 62 | 63 | $header-fallback: 'Geneva', 'Franklin Gothic', 'Calibri', 'Arial Narrow', 'Helvetica', sans-serif 64 | 65 | $header-primary: 'pluto-sans-condensed-thin', $header-fallback !default 66 | $header-secondary: $body-font !default 67 | $header-secondary-bold: $body-bold !default 68 | $header-tertiary: $body-font-alt-bold !default 69 | 70 | 71 | // Navigation ------------------------------------------- // 72 | 73 | $nav-font: 'pluto-sans-condensed-medium', $header-fallback !default 74 | 75 | 76 | // Code Blocks ----------------------------------------- // 77 | 78 | $code-fallback: 'Inconsolata', 'Monaco', 'Consolas', monospace 79 | 80 | $code-font: 'fira-mono', $code-fallback !default 81 | $code-font-bold: 'fira-mono-medium', $code-font !default 82 | 83 | 84 | // Buttons --------------------------------------------- // 85 | 86 | $button-font: 'pluto-sans-regular', $header-fallback !default 87 | 88 | 89 | // Font Awesome ---------------------------------------- // 90 | 91 | $icon-font: 'font-awesome' !default 92 | 93 | 94 | 95 | 96 | 97 | 98 | // Borders ---------------------------------------------- // 99 | // ------------------------------------------------------ // 100 | 101 | $border-width-default: 6px 102 | $border-width-small: 2px 103 | $border-width-link: 1px 104 | $border-width-large: 12px 105 | 106 | $border-radius-default: 4px 107 | 108 | 109 | 110 | // Grid ------------------------------------------------- // 111 | // ------------------------------------------------------ // 112 | 113 | // TBD 114 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/config/_typography.sass: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------- // 2 | // TYPOGRAPHY --------------------------------------- // 3 | // -------------------------------------------------- // 4 | // variables are set in _config.sass and themes 5 | 6 | 7 | 8 | // Body text -------------------------------------------- // 9 | body 10 | font-family: $body-font 11 | font-size: $base-font-size 12 | line-height: $line-base 13 | 14 | 15 | 16 | // Headers ---------------------------------------------- // 17 | 18 | 19 | h1, h2, h3, h4, h5, h6 20 | line-height: $line-small // keep line-height smaller if they stack 21 | margin: 0 22 | text-rendering: geometricPrecision 23 | 24 | // h1 - Pluto SC Thin 60px+ 25 | h1 26 | font-family: $header-primary 27 | @include breakpoint(tiny) 28 | font-size: $beta 29 | @include breakpoint(medium) 30 | font-size: $alpha 31 | 32 | 33 | // h2 - Adelle 46px 34 | h2 35 | font-family: $header-secondary 36 | font-size: $beta 37 | 38 | 39 | // h3 - Pluto SC Regular 30px 40 | h3 41 | font-family: $header-tertiary 42 | font-size: $gamma 43 | 44 | 45 | // h4 - Adelle Semibold 24px 46 | h4 47 | font-family: $header-secondary 48 | font-size: $delta 49 | 50 | 51 | // h5 - Adelle Semibold 17px 52 | h5 53 | font-family: $header-secondary-bold 54 | font-size: $epsilon 55 | 56 | 57 | // h6 - Pluto SC Regular 14px 58 | h6 59 | font-family: $header-tertiary 60 | font-size: $zeta 61 | text-transform: uppercase 62 | margin-bottom: 1em // this is used above paragraphs, so needs a small bottom margin 63 | 64 | 65 | 66 | 67 | // Paragraphs, Lists, and Links 68 | 69 | p, ul, ol 70 | font-family: $body-font 71 | text-rendering: geometricPrecision 72 | 73 | em 74 | font-family: $body-italic 75 | 76 | b, strong 77 | font-family: $body-bold 78 | font-weight: normal 79 | 80 | // Quotes 81 | p.quote 82 | font-family: $header-primary 83 | color: $header-color-primary 84 | @include breakpoint(tiny) 85 | font-size: $gamma 86 | @include breakpoint(medium) 87 | font-size: $beta 88 | 89 | // Remove Quote margin when combined with h6 header 90 | h6 + p.quote 91 | margin: 0 92 | 93 | // Intro paragraph 94 | p.intro 95 | font-size: $gamma 96 | color: $navy 97 | font-family: $body-font-alt 98 | line-height: $line-large 99 | 100 | b, strong 101 | font-family: $body-font-alt-bold 102 | font-weight: normal 103 | 104 | // Small text for meta info, disclaimers 105 | p.small 106 | font-size: $zeta 107 | 108 | 109 | // code - Fira Mono 16px 110 | 111 | // block code 112 | code 113 | display: block 114 | font-family: $code-font 115 | padding: 2px 8px 116 | margin-left: 6px 117 | background-color: $off-white 118 | border-radius: $border-radius-default 119 | 120 | // inline code 121 | p code, 122 | li code 123 | display: inline-block 124 | font-family: $code-font-bold 125 | margin: 0 126 | 127 | .course-description-bullets li code 128 | padding: 0 129 | 130 | 131 | // Links 132 | 133 | a, a:active, a:visited 134 | font-family: inherit 135 | text-decoration: none 136 | @include transition(color,0.25s,linear) 137 | 138 | a:hover, a:focus 139 | text-decoration: none 140 | 141 | 142 | 143 | 144 | // Typography Colors ------------------------------------- // 145 | // pulls from theme files 146 | 147 | 148 | h1 149 | color: $header-color-primary 150 | 151 | h2 152 | color: $header-color-secondary 153 | 154 | h3 155 | color: $header-color-tertiary 156 | 157 | h4 158 | color: $header-color-tertiary 159 | 160 | h5 161 | color: $header-color-primary 162 | 163 | h6 164 | color: $text-color-sub 165 | 166 | p 167 | color: $text-color 168 | 169 | p.intro 170 | color: $header-color-primary 171 | 172 | small, p.small 173 | color: $text-color-sub 174 | 175 | .quote 176 | color: $text-color-reverse 177 | 178 | a, a:active, a:visited 179 | color: $link-color 180 | 181 | a:hover, a:focus 182 | color: $link-color-hover 183 | 184 | code 185 | color: $primary-color 186 | 187 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/layout/_footer.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // FOOTER ----------------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | footer 6 | background: $background-color-black 7 | padding-top: 3em 8 | 9 | 10 | // Sitemap footer with links, newsletter ---------------- // 11 | // ------------------------------------------------------ // 12 | 13 | .footer-sitemap 14 | @extend %clearfix 15 | 16 | // Sitemap 17 | .sitemap 18 | 19 | .site-section 20 | margin-bottom: 3em 21 | @include breakpoint(medium) 22 | float: left 23 | width: 14% 24 | margin-right: 1em 25 | 26 | .site-section-title 27 | font-family: $header-tertiary 28 | color: $secondary-color-alt 29 | @include breakpoint(tiny) 30 | margin-bottom: .5em 31 | @include breakpoint(medium) 32 | margin-bottom: 1.75em 33 | 34 | .site-section-list 35 | 36 | .site-section-item 37 | font-family: $body-font-alt 38 | margin-top: .5em 39 | @include breakpoint(tiny) 40 | display: inline-block 41 | width: 30% 42 | vertical-align: top 43 | @include breakpoint(medium) 44 | width: auto 45 | display: block 46 | 47 | a, a:active, a:visited 48 | color: $text-color-sub 49 | 50 | a:hover, a:focus 51 | color: $highlight-color-one 52 | 53 | 54 | 55 | // Newsletter 56 | .newsletter 57 | @include breakpoint(medium) 58 | float: right 59 | width: 20% 60 | 61 | h4 62 | color: $text-color-reverse 63 | 64 | .newsletter-signup 65 | 66 | 67 | 68 | 69 | // Small footer with locations, weather, social links --- // 70 | // ------------------------------------------------------ // 71 | 72 | .footer-locations-social 73 | @extend %clearfix 74 | padding-top: 2em 75 | border-top: $border-width-default solid $grey-dark 76 | 77 | // Locations and Weather 78 | .locations 79 | @include breakpoint(tiny) 80 | margin-bottom: 3em 81 | @include breakpoint(medium) 82 | float: left 83 | width: 75% 84 | 85 | .city 86 | display: inline-block 87 | @include breakpoint(medium) 88 | margin-right: 1em 89 | @include breakpoint(large) 90 | margin-right: 2em 91 | 92 | // Cities 93 | &.austin, 94 | &.sanfrancisco 95 | 96 | .icon 97 | margin-right: 10px 98 | 99 | .icon.fa-sun-o 100 | color: $yellow 101 | 102 | .icon.fa-umbrella 103 | color: $blue-light 104 | 105 | .city-name 106 | @extend h6 107 | color: $text-color-reverse 108 | margin-bottom: 0 109 | display: inline-block 110 | @include breakpoint(tiny) 111 | width: 200px 112 | @include breakpoint(medium) 113 | margin-right: 12px 114 | width: auto 115 | 116 | .time, 117 | .weather 118 | @extend p.small 119 | margin-right: 5px 120 | 121 | .time 122 | display: inline-block 123 | @include breakpoint(tiny) 124 | width: 65px 125 | @include breakpoint(medium) 126 | width: auto 127 | 128 | 129 | .weather 130 | font-family: $body-bold 131 | 132 | .weather:after 133 | content: "\00b0" 134 | 135 | 136 | 137 | // Social Links 138 | .social 139 | @include breakpoint(medium) 140 | text-align: right 141 | float: right 142 | 143 | .social-link 144 | display: inline-block 145 | &:not(:first-child) 146 | margin-left: 15px 147 | 148 | a, a:active, a:visited 149 | color: $text-color-sub 150 | 151 | a:hover, a:focus 152 | color: $highlight-color-two 153 | 154 | &.social-link-facebook 155 | a:hover, a:focus 156 | color: #3b5998 157 | 158 | &.social-link-twitter 159 | a:hover, a:focus 160 | color: #00aced 161 | 162 | &.social-link-instagram 163 | a:hover, a:focus 164 | color: #517fa4 165 | 166 | &.social-link-vimeo 167 | a:hover, a:focus 168 | color: #aad450 169 | 170 | &.social-link-youtube 171 | a:hover, a:focus 172 | color: #bb0000 173 | 174 | &.social-link-github 175 | a:hover, a:focus 176 | color: #4183c4 177 | 178 | &.social-link-googleplus 179 | a:hover, a:focus 180 | color: #dd4b39 181 | 182 | 183 | 184 | // $profiles: (bandcamp: #4e9bac, delicious: #248cff, facebook: #3b5998, ficly: #b51c2c, flickr: #0063db, github: #4183c4, googleplus: #dd4b39, instagram: #517fa4, kickstarter: #76cc1e, lanyrd: #152e51, lastfm: #d51007, linkedin: #007bb6, photodrop: #cdb6e3, pinterest: #cb2027, rdio: #0088da, soundcloud: #ff6600, twitter: #00aced, vimeo: #aad450, youtube: #bb0000) 185 | 186 | // @each $profile, $bgcolor in $profiles 187 | // .profile-link--#{$profile}:focus, 188 | // .profile-link--#{$profile}:hover 189 | // background: $bgcolor 190 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/layout/_header.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // HEADER & NAVIGATION ---------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | // Header & Nav Animation Fade-in 6 | @-webkit-keyframes navin 7 | 0%,20% 8 | opacity: 0 9 | 10 | 11 | 25%,100% 12 | opacity: 1 13 | 14 | 15 | @-moz-keyframes navin 16 | 0%,20% 17 | opacity: 0 18 | 19 | 20 | 25%,100% 21 | opacity: 1 22 | 23 | 24 | @-o-keyframes navin 25 | 0%,20% 26 | opacity: 0 27 | 28 | 29 | 25%,100% 30 | opacity: 1 31 | 32 | 33 | @keyframes navin 34 | 0%,20% 35 | opacity: 0 36 | 37 | 38 | 25%,100% 39 | opacity: 1 40 | 41 | 42 | // Header ----------------------------------------------- // 43 | // ------------------------------------------------------ // 44 | 45 | header 46 | @extend %clearfix 47 | overflow: hidden 48 | position: absolute 49 | top: 0 50 | left: 0 51 | width: 100% 52 | height: 9em 53 | z-index: 200 54 | #home & 55 | @include linear-gradient(rgba(255,255,255,0.5),transparent) 56 | 57 | .container 58 | animation: navin 6s forwards linear 59 | 60 | 61 | .mks-logo 62 | position: absolute 63 | top: 65px 64 | width: 400px 65 | height: 70px 66 | text-indent: -9999em // replace with something better 67 | background: url("/images/logo-navy.png") no-repeat 0 0 / 100% 68 | #home & 69 | background: url("/images/logo-navy.png") no-repeat 0 0 / 100% 70 | .page & 71 | background: url("/images/logo-light.png") no-repeat 0 0 / 100% 72 | 73 | .mks-logo img 74 | max-width: 100% 75 | 76 | 77 | // Navigation ------------------------------------------- // 78 | // ------------------------------------------------------ // 79 | 80 | nav 81 | padding-top: 72px 82 | float: right 83 | text-align: right 84 | font-family: $nav-font 85 | font-size: $zeta 86 | overflow: hidden 87 | z-index: 600 88 | width: 100% 89 | 90 | a.nav-link 91 | display: inline-block 92 | padding: 12px 93 | margin-right: -3px // fix display inline-block spacing 94 | -webkit-transition: color .2s linear 95 | -moz-transition: color .2s linear 96 | -o-transition: color .2s linear 97 | transition: color .2s linear 98 | text-rendering: geometricPrecision 99 | #home & 100 | color: $blue-dark 101 | .page & 102 | color: $blue-pale 103 | 104 | // on hover 105 | #home &:hover, 106 | .page &:hover 107 | color: $blue-light 108 | 109 | // when nav-link state is active 110 | &.is-active 111 | background-color: $blue-dark 112 | color: $white 113 | 114 | // hover if active 115 | &:hover 116 | color: $white 117 | 118 | 119 | 120 | 121 | // Banner ----------------------------------------------- // 122 | // ------------------------------------------------------ // 123 | 124 | %banner 125 | @extend %clearfix 126 | background-size: cover 127 | background-repeat: no-repeat 128 | min-height: 44em 129 | 130 | .banner-headline 131 | padding-top: 26em 132 | padding-bottom: 4em 133 | 134 | // Schmancy Headline 135 | h1 136 | font-size: $alpha 137 | color: $white 138 | margin-bottom: .25em 139 | h2 140 | font-size: $gamma 141 | color: $white 142 | margin-bottom: 2em 143 | 144 | $banner-path: "/images/banners/" 145 | 146 | // Part-Time page banner 147 | .banner-parttime 148 | @extend %banner 149 | background-image: url('#{$banner-path}parttime-blue.jpg') 150 | 151 | .banner-home-engineer 152 | @extend %banner 153 | background-image: url('#{$banner-path}michael.jpg') 154 | 155 | .banner-home-developers 156 | @extend %banner 157 | background-image: url('#{$banner-path}jessica-warm-colors-white-overlay.jpg') 158 | 159 | .banner-careerservices 160 | @extend %banner 161 | background-image: url('#{$banner-path}kaoru-at-laptop-window-far.jpg') 162 | 163 | .banner-students 164 | @extend %banner 165 | background-image: url('#{$banner-path}katrina.jpg') 166 | 167 | .banner-about 168 | @extend %banner 169 | background-image: url('#{$banner-path}mural.jpg') 170 | 171 | 172 | // Video Banner ----------------------------------------- // 173 | // ------------------------------------------------------ // 174 | 175 | .video-overlay h1 176 | padding: 6em 0 0 12px // may change depending on photo or logo placement 177 | color: $blue-dark 178 | font-family: 'pluto-sans-condensed-thin' 179 | line-height: 1.2 180 | font-size: $giga 181 | @include breakpoint(tiny) 182 | font-size: $alpha 183 | 184 | .video-wrap 185 | height: 740px 186 | overflow: hidden 187 | width: 100% 188 | 189 | .video-overlay 190 | background: transparentize($off-white,.5) 191 | width: 100% 192 | height: 740px 193 | position: absolute 194 | top: 0 195 | z-index: 100 196 | pointer-events: none 197 | 198 | .video-banner-replacement 199 | @extend %clearfix 200 | // background: url('/images/girls-at-desk.jpg') no-repeat 201 | // background: url('/images/girls-at-desk-faded-blue.jpg') no-repeat 202 | // background: url('/images/jessica-warm-colors.jpg') no-repeat 203 | // background: url('/images/plaid-orange-laptop.jpg') no-repeat 204 | // background: url('/images/girls-at-desk-far-blur.jpg') no-repeat 205 | background: url('/images/jessica-warm-colors-white.jpg') 0 0 / cover no-repeat 206 | min-height: 740px 207 | -------------------------------------------------------------------------------- /examples/architecture-examples/makersquare/config/_helpers.sass: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------ // 2 | // Helpers & Mixins ------------------------------------- // 3 | // ------------------------------------------------------ // 4 | 5 | // Hide/Show classes ------------------------------------ // 6 | // ------------------------------------------------------ // 7 | 8 | .is-hidden 9 | display: none 10 | 11 | 12 | // Clearfix --------------------------------------------- // 13 | // ------------------------------------------------------ // 14 | // to use, apply @extend %clearfix on the parent of 15 | // N number of floated elements, to contain them 16 | 17 | %clearfix 18 | *zoom: 1 19 | 20 | &:before, 21 | &:after 22 | content: "" 23 | display: table 24 | clear: both 25 | 26 | 27 | // Media Queries ---------------------------------------- // 28 | // ------------------------------------------------------ // 29 | // to use, @include each breakpoint with the named size, and 30 | // CSS inside it, for example: 31 | // @include breakpoint(tiny) { width: 95%; } // at 0 to 499px 32 | // @include breakpoint(small) { width: 80%; } // at 500px to 999px 33 | // @include breakpoint(medium) { width: 70%; } // at 1000px to 1299px 34 | // @include breakpoint(large) { width: 60%; } // 1300px and up 35 | 36 | // Defined Breakpoints 37 | $tiny: 0 38 | $small: 480px 39 | $medium: 780px 40 | $large: 1000px 41 | 42 | 43 | // Breakpoint mixin 44 | @mixin breakpoint($media) 45 | @if $media == tiny 46 | @media only screen and (min-width: $tiny) 47 | @content 48 | 49 | @else if $media == small 50 | @media only screen and (min-width: $small - 1) 51 | @content 52 | 53 | @else if $media == medium 54 | @media only screen and (min-width: $medium - 1) 55 | @content 56 | 57 | @else if $media == large 58 | @media only screen and (min-width: $large) 59 | @content 60 | 61 | 62 | 63 | // Media Query Test Mixin -------------------------------- // 64 | // ------------------------------------------------------ // 65 | // include on the body or main container element 66 | // prints the media query with a 30px top colored border 67 | // and a :before element that prints the pixel range applicable 68 | 69 | @mixin test 70 | @include breakpoint(tiny) 71 | &:before 72 | // this variable sets the max of the range, e.g. 0 - 500px 73 | $tiny-defined: $small - 1 74 | content: "tiny: #{$tiny}px to #{$tiny-defined}" 75 | color: $white 76 | position: fixed 77 | background: $green 78 | z-index: 100000 79 | display: block 80 | width: 100% 81 | top: 0 82 | left: 0 83 | padding: 5px 15px 84 | @include breakpoint(small) 85 | &:before 86 | $small-defined: $medium - 1 87 | content: "small: #{$small} to #{$small-defined}" 88 | color: $white 89 | position: fixed 90 | background: $orange 91 | z-index: 100000 92 | display: block 93 | width: 100% 94 | top: 0 95 | left: 0 96 | padding: 5px 15px 97 | @include breakpoint(medium) 98 | &:before 99 | $medium-defined: $large - 1 100 | content: "medium: #{$medium} to #{$medium-defined}" 101 | color: $white 102 | position: fixed 103 | background: $fuschia 104 | z-index: 100000 105 | display: block 106 | width: 100% 107 | top: 0 108 | left: 0 109 | padding: 5px 15px 110 | @include breakpoint(large) 111 | &:before 112 | content: "large: #{$large} to max" 113 | color: $white 114 | position: fixed 115 | background: $turquoise 116 | z-index: 100000 117 | display: block 118 | width: 100% 119 | top: 0 120 | left: 0 121 | padding: 5px 15px 122 | 123 | 124 | // Transitions ------------------------------------------ // 125 | // ------------------------------------------------------ // 126 | // to use, apply @include transition() with arguments 127 | // type, time, and function 128 | // ex: @include transition(color,0.5s,ease) 129 | 130 | @mixin transition($color,$time,$function) 131 | -webkit-transition: $color $time $function 132 | -moz-transition: $color $time $function 133 | -o-transition: $color $time $function 134 | transition: $color $time $function 135 | 136 | 137 | 138 | // Linear Gradient -------------------------------------- // 139 | // ------------------------------------------------------ // 140 | // to use, apply @include linear-gradient() with color arguments 141 | 142 | @mixin linear-gradient($start-color, $end-color) 143 | background-color: $end-color 144 | background-image: -webkit-gradient(linear, left top, left bottom, from($start-color), to($end-color)) 145 | background-image: -webkit-linear-gradient(top, $start-color, $end-color) 146 | background-image: -moz-linear-gradient(top, $start-color, $end-color) 147 | background-image: -ms-linear-gradient(top, $start-color, $end-color) 148 | background-image: -o-linear-gradient(top, $start-color, $end-color) 149 | background-image: linear-gradient(top, $start-color, $end-color) 150 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$start-color}', EndColorStr='#{$end-color}') 151 | 152 | 153 | // Z-Indices -------------------------------------- // 154 | // ------------------------------------------------------ // 155 | // ## Elements with z-index 156 | // use these placeholder extensions as such: 157 | // 158 | // modal 159 | // @extend %z-ace // z-index: 8 160 | // 161 | // ## Components with z-indices 162 | // use as above, but with +1 or -1 math on elements that need their position defined in reference to another element: 163 | // 164 | // modal 165 | // @extend %z-ace // z-index: 8 166 | // modal-backdrop 167 | // @extend %z-ace - 1 // z-index: 7 168 | 169 | $z-indices: jack, queen, king, ace 170 | 171 | @each $z-index in $z-indices 172 | 173 | $base-index: index($z-indices, $z-index) * 3 - 4 174 | 175 | %z-#{$z-index} 176 | z-index: $base-index 177 | -------------------------------------------------------------------------------- /exercise/README.md: -------------------------------------------------------------------------------- 1 | # Refactoring Exercise 2 | 3 | You'll be choosing a module in your project and refactoring it following the 1-6 steps of how to refactor a module. 4 | 5 | If you didn't bring your own project code to work on, or just prefer to do a pre-made exercise, you can do the sample button module in the `/buttons-exercise` folder [/buttons-exercise](https://github.com/jina/refactoring/tree/master/exercise/buttons-exercise). 6 | 7 | 8 | 9 | 10 | 11 | ## Instructions 12 | 13 | ### Compiling 14 | 15 | We recommend just using the Sass command line compilation for this project. You can do it in each folder separately so you can see the differences in your output along the way. CodeKit or similar is also recommended. If you need help with compilation just yell—or ask a tablemate! 16 | 17 | ## Recommendations 18 | 19 | We highly recommend copying files at certain steps so you can see your progress later and remember what you did! Whether you save them out at certain states to a new folder, or copy and rename files, that's up to you. 20 | 21 | ## Steps to Refactor 22 | 23 | 1. Extract partial 24 | 2. Find repeating patterns 25 | 3. Create/extract base class/extend 26 | 4. Apply Nesting 27 | 5. Edit HTML Classes 28 | 6. Apply Variables 29 | 7. Create Mixins/Extends/Maps 30 | 31 | #### Step 1: Extract Partial. 32 | 33 | Find all the different places in your CSS that you have code for this module. 34 | 35 | Create a new `.scss` file—lets call it `[MODULENAME]-original.scss` and dump all that CSS into it. Import that from your manifest. 36 | 37 | I'm choosing to add `-original` to this file so that later I can make a `[MODULENAME].scss` file and import that, and then switch them on/off to make sure my new code is doing the same stuff as the old code. 38 | 39 | Now check and make sure you didn't break anything! Sometimes import order can cause specificity problems, so it's worth taking some time to look at all the places you know this module exists on your site/app to see if it's still working. Yes, that's tedious, but it'll save you a lot of headache later. 40 | 41 | #### Step 2: Find Repeating Patterns 42 | 43 | Look for repeating patterns or problems in the CSS file: 44 | 45 | * selector duplication that implies an inheritance relationship 46 | * repeating patterns relating to the colors, typography, or iconography 47 | * complex nesting or selector chaining 48 | * a CSS class that can function as a consistent base class 49 | * plain ol' duplicated CSS of any type 50 | * states (active, disabled, etc) that should be combined 51 | * IDs or classes for JavaScript that may also have styles 52 | 53 | #### Step 3: Create or Extract Base Class/Extend 54 | 55 | Now create your new `[MODULENAME].scss` file so that we can copy over clean CSS into it without getting lost in the old code. This also helps us make sure we didn't lose anything—and we can toggle the old and new CSS on and off to see if everything looks OK. 56 | 57 | **Extracting Base Class** 58 | 59 | First, extract a base class. Determine what a shared class name might be and copy over all the repeated styles that you might want all buttons to share. 60 | 61 | > "I decided to call it `.feedback` because all of the class names in use described a type of user feedback and this class was not in use already." — Chris Eppstein, Digg refactor post 62 | 63 | For now we're going to add that base class to some/all of the places this module exists in our HTML. This is a test step, to make sure everything applies OK. We'll clean this up even more going forward. 64 | 65 | **Creating an Extend** 66 | 67 | If that's looking good, let's change our base class from a class to a placeholder extend. 68 | 69 | If you have individual classes (for example, generic button base class versus unique button classes), apply the `@extend %[MODULE]` on all of them. Compile and check it out—should be exactly the same. 70 | 71 | Be sure to compare the output between when you did it with a CSS class and placeholder extend! 72 | 73 | **Adding Unique Styles** 74 | 75 | You can now add unique styles to each module that requires it—colors, backgrounds, icons text colors, etc, to each class so that they look the same as they did before. 76 | 77 | #### Step 4: Apply Nesting 78 | 79 | Figure out what you can nest inside the parent `%MODULE`—or under each individual button class. For clickable elements, `:hover` and `:active` states should be pretty obvious. Anything else? 80 | 81 | For some modules, you may need to _remove_ nesting—if you're editing Sass, perhaps things are nested in so far you want to refactor that **out**. 82 | 83 | Use the & parent selector to nest, and don't forget you can do it three ways, depending on a) what output you want and b) what makes for the most understandable code: 84 | 85 | /* Output is: .feedback .test */ 86 | .feedback { 87 | .test { } 88 | } 89 | 90 | /* Output is: .feedback .test */ 91 | .text { 92 | .feedback & { } 93 | } 94 | 95 | /* Output is: .feedback.positive */ 96 | .feedback { 97 | &.positive { } 98 | } 99 | 100 | 101 | #### Step 5: Edit HTML Classes 102 | 103 | Now we're going to actually clean up any HTML that we need to. 104 | 105 | We have made a lot of good progress toward reusability and modularity, so even if the classes of the actual individual modules are all inconsistent, we have done a lot. But some good search-and-replace can get us to a modular setup that will help in the future, when we want to add even more of the same module. 106 | 107 | **Naming Conventions** 108 | 109 | Determine what naming convention works best for this module. Do you want to use BEM, or a primary/secondary/tertiary setup, semantic names, or something else you prefer? Write out the naming convention and then create classes for it. 110 | 111 | > Refactoring Tip! Don't remove the old class names from your CSS or HTML quite yet! You can comment them out in the CSS so they don't apply, but leave them for your reference until you're sure that the new ones are working appropriately! 112 | 113 | Now edit the HTML of the buttons to use the new classes; make sure you make any other HTML edits that might be necessary while you're at it! Add the new classes into your CSS and you should have some much prettier code now. Be sure to check your output! 114 | 115 | **Unique IDs or Classes** 116 | 117 | If your module has individual class names/IDs that might have been used in JavaScript to make them work or track events on click, you probably don't want to get rid of those altogether. 118 | 119 | You have a couple options: 120 | 121 | * remove the old CSS classes from the CSS but leave them in the HTML so that the JavaScript still works on them (easiest but ugly classes still exist) 122 | * make the old CSS classes into IDs and edit the JavaScript to use IDs instead of classes, if it's doing that (medium difficultly) 123 | * refactor the IDs into a consistent naming scheme and edit the JavaScript (preferred, but most difficult) 124 | 125 | Now you can remove the old class names from your CSS. 126 | 127 | 128 | #### Step 6: Apply Variables 129 | 130 | Now that we know our refactored class names, how our `%extend` is working, and the unique styles are applied, let's do a pass to see what those unique styles—colors, backgrounds, icons, fonts, etc—actually are. 131 | 132 | Your module may just use existing variables from `colors.scss` or your grid or what not. 133 | 134 | It might also be worthwhile to create variables strictly for your module. 135 | 136 | For example, if you have a button module with classes `.button-primary`, `.button-secondary`, etc, you might want to make variables like so: 137 | 138 | // Primary Buttons (Submit) 139 | $button_primary_background: $turquoise; 140 | $button_primary_color: lighten($button_primary_background,45%); 141 | 142 | // Secondary Buttons (Edit) 143 | $button_secondary_background: $purple; 144 | $button_secondary_color: lighten($button_secondary_background,45%); 145 | 146 | Or you could apply grid, typography, or sizing variables, depending on what your module is. 147 | 148 | Now go back and apply those variables! 149 | 150 | Now is a good time to fix up things like inconsistent background colors or hover colors, highlighting, borders, etc. Visual errors are much easier to fix up now, when you can automate how they change. 151 | 152 | **Check your Output** 153 | 154 | Be sure to check your output and make sure everything is working! 155 | 156 | I'm willing to bet you didn't save yourself that many lines of code from the original—so it's not a huge reduction in CSS file size—but the maintainability, class naming consistency, readability, and future-proofing of the code is drastically improved. 157 | 158 | If everything looks good, congrats, you can stop here! Or you can take it one step Sassier and make a mixin to do some of the more repetive work. 159 | 160 | #### Step 7: Create Mixins/Extends/Maps 161 | 162 | In this—optional—step we're going to take all the redundant code in our unique classes and make a mixin to do the hard work for us. Some modules really benefit from this; in others, there's really no point. You have to determine for yourself if it's valuable to you. 163 | 164 | If you're rewriting CSS properties for multiple unique versions of a module—such as color, background-color, borders or box-shadows, hover states, etc—you might want to make a mixin, so you can change all those styles in _one line_? 165 | 166 | Create a mixin with arguments for any of the properties we want to change on the fly. Be sure to name them clearly! 167 | 168 | Then replace your unique styles with an `@include` that contains the style values you want. 169 | 170 | **Output Size** 171 | 172 | When adding a mixin or an extend, I like to go back and see if it's saving me code. 173 | 174 | Check on your old output and your new. In some cases you'll save yourself tons of lines of CSS by using a mixin (compared to adding more CSS or unique lines) but sometimes you won't. Make sure your mixin is valuable to you! 175 | 176 | ## Good Job! 177 | -------------------------------------------------------------------------------- /exercise/buttons-exercise/README.md: -------------------------------------------------------------------------------- 1 | # Button Refactoring Exercise 2 | 3 | "Buttons are the Sass community's Hello World." —Eric Suzanne (I think?) at SassConf last year 4 | 5 | Well, it's true. They're easily refactorable, pretty much every site or app has some, and everyone understands their purpose. Plus, they can be as simple or complex as required, so there's a lot of room to play! 6 | 7 | ## Your Job 8 | 9 | If you didn't bring your own project code to work on, or just prefer to do a pre-made exercise, your job is to refactor this button partial. 10 | 11 | 12 | 13 | ## Files and Folders 14 | 15 | ### /1-original-css-html 16 | 17 | This folder contains some super-messy pure CSS and HTML of some buttons. There are a few types, and a disabled state button, but they have varying class names and a lot of redundant and/or competing styles. (It was really painful to write this so badly on purpose!) 18 | 19 | ### /2-shared-scss-nesting 20 | 21 | This folder has an empty `.scss` and `.html` file you. You'll do Steps 2, 3, & 4 in this folder and files. 22 | 23 | ### /3-change-classes 24 | 25 | Copy over what you have so far; in this folder you'll be editing the HTML! You'll do Step 4 here. 26 | 27 | ### /4-mixins-extends 28 | 29 | Copy over the files you have from folder 3. This is a spot to continue to refactor or add Sass complexity; you'll do Step 5, Create Mixins here. 30 | 31 | 32 | 33 | ## Instructions 34 | 35 | ### Compiling 36 | 37 | We recommend just using the Sass command line compilation for this project. You can do it in each folder separately so you can see the differences in your output along the way. CodeKit or similar is also recommended. If you need help with compilation just yell—or ask a tablemate! 38 | 39 | ### Steps to Refactor 40 | 41 | 1. Extract partial 42 | 2. Find repeating patterns 43 | 3. Create/extract base class/extend 44 | 4. Apply Nesting 45 | 5. Edit HTML Classes 46 | 6. Apply Variables 47 | 7. Create Mixins/Extends/Maps 48 | 49 | #### Step 1: Extract Partial. 50 | 51 | If you are doing this in your own code, you'd have to find all the different places in your CSS that you had button code, and put them all into a file, and import that from your manifest. Then you want to check and make sure you didn't break anything! 52 | 53 | If you're doing this exercise, this step has already been done for you in folder `/1-original-css-html` by creating `buttons-original.scss` and dumping all the button CSS into it. (We don't have a manifest to import from in this exercise so we're just linking to the CSS file directly.) 54 | 55 | I'm choosing to add `-original` to this file so that later I can make a `buttons.scss` file and import that, and then switch them on/off to make sure my new code is doing the same stuff as the old code. 56 | 57 | There's some button HTML and some pretty ugly CSS. Poke around in it a little bit, see what's going on. Can you make a list of some of the things that are wrong with the CSS/HTML? Visually, where there are discrepancies, can you guess what was intended? 58 | 59 | (We've grouped all the button HTML into one file for the purposes of this exercise, but in your own project that will not be the case.) 60 | 61 | 62 | #### Step 2: Find Repeating Patterns 63 | 64 | In folder `/2-shared-scss-nesting`, copy over the HTML. We won't touch that junk quite yet. 65 | 66 | Look for repeating patterns or problems in the CSS file: 67 | 68 | * selector duplication that implies an inheritance relationship 69 | * repeating patterns relating to the colors, typography, or iconography 70 | * complex nesting or selector chaining 71 | * a CSS class that can function as a consistent base class 72 | * plain ol' duplicated CSS of any type 73 | * states (active, disabled, etc) that should be combined 74 | * IDs or classes for JavaScript that may also have styles 75 | 76 | #### Step 3: Create or Extract Base Class/Extend 77 | 78 | We've created a blank `buttons.scss` file so that we can copy over clean CSS into it without getting lost in the old code. This also helps us make sure we didn't lose anything—and we can toggle the old and new CSS on and off to see if everything looks OK. 79 | 80 | **Extracting Base Class** 81 | 82 | First, extract a base class. Most likely it'll be `.button`. Copy over all the repeated styles that you might want all buttons to share. 83 | 84 | > "I decided to call it `.feedback` because all of the class names in use described a type of user feedback and this class was not in use already." — Chris Eppstein, Digg refactor post 85 | 86 | Compile your new file—now you'll probably have completely unstyled buttons. Time to mess with the HTML! 87 | 88 | > Refactoring Tip! Delete or comment out the lines in the old styles once you remove them, to help you keep track. All that should be left are unique styles. 89 | 90 | For now let's just add the base class to all the HTML buttons. We can clean this up even more going forward, but first let's make sure that our button styles are applying as we wanted them to. 91 | 92 | **Creating an Extend** 93 | 94 | If that's looking good, let's change our base class from a class to a placeholder extend. 95 | 96 | Now you can take all the original different button classes and `@extend %button` on all of them. Remove class `button` from your HTML. 97 | 98 | Compile and check it out—should be exactly the same. 99 | 100 | Be sure to compare the output between when you did it with a CSS class and placeholder extend! 101 | 102 | **Adding Unique Styles** 103 | 104 | You can now add back in the unique styles to each individual button—applying colors, text colors, etc, to each class so that they look the same as they did before. 105 | 106 | #### Step 4: Apply Nesting 107 | 108 | Figure out what you can nest inside the parent `%button`—or under each individual button class. `:hover` and `:active` states should be pretty obvious. Anything else? 109 | 110 | Use the `&` parent selector to nest, and don't forget you can do it three ways, depending on a) what output you want and b) what makes for the most understandable code: 111 | 112 | /* Output is: .feedback .test */ 113 | .feedback { 114 | .test { } 115 | } 116 | 117 | /* Output is: .feedback .test */ 118 | .text { 119 | .feedback & { } 120 | } 121 | 122 | /* Output is: .feedback.positive */ 123 | .feedback { 124 | &.positive { } 125 | } 126 | 127 | 128 | #### Step 5: Edit HTML Classes 129 | 130 | Copy everything over into folder `/3-change-classes`. Now we're going to actually clean up that horrible HTML. 131 | 132 | We have made a lot of good progress toward reusability and modularity, so even if the classes of the actual buttons are all inconsistent, we have done a lot. But some good search-and-replace can get us to a modular setup that will help in the future, when we want to add even more buttons. 133 | 134 | **Naming Conventions** 135 | 136 | Determine what naming convention works best for these buttons. Do you want to use BEM, or a primary/secondary/tertiary setup, or something else you prefer? Write out the naming convention and then create classes for it. 137 | 138 | Add in the unique styles again into the new classes. Now is a great time to make sure your hover, active, etc states are consistent—or exist! Be sure to nest those, if you need to. 139 | 140 | > Refactoring Tip! Don't remove the old class names from your CSS or HTML quite yet! You can comment them out in the CSS so they don't apply, but leave them for your reference until you're sure that the new ones are working appropriately! 141 | 142 | Now edit the HTML of the buttons to use the new classes; make sure you make any other HTML edits that might be necessary while you're at it! Add the new classes into your CSS and you should have some much prettier code now. Be sure to check your output! 143 | 144 | **Unique IDs or Classes** 145 | 146 | Most likely, by looking at the HTML, we can see that the buttons had individual names that might have been used in JavaScript to make them work or track events on click. We probably don't want to get rid of those altogether. 147 | 148 | You have a couple options: 149 | 150 | * remove the old CSS classes from the CSS but leave them in the HTML so that the JavaScript still works on them (easiest but ugly classes still exist) 151 | * make the old CSS classes into IDs and edit the JavaScript to use IDs instead of classes, if it's doing that (medium difficultly) 152 | * refactor the IDs into a consistent naming scheme and edit the JavaScript (preferred, but most difficult) 153 | 154 | Now you can remove the old class names from your CSS. 155 | 156 | 157 | #### Step 6: Apply Variables 158 | 159 | Now that we know our refactored class names, how our `%extend` is working, and the unique styles are applied, let's do a pass to see what those unique styles—colors, backgrounds, icons, fonts, etc—actually are. 160 | 161 | Assuming you already have some variables in a `colors.scss` file, you can go ahead and replace things like `#fff` with `$white`. 162 | 163 | But now what about all the colors we have for the backgrounds, shadows, etc? How do we name these colors? `turquoise`, `turquoise-light`, `turquoise-dark`? Then we have a zillion variables for variations for the same color. Those names don't give us a lot of insight into what the colors are for. So let's take our variable naming one more level abstract. 164 | 165 | Create variables strictly for the button colors and name them the same as our classes. For example, if my naming convention is primary/secondary: 166 | 167 | // Primary Buttons (Submit) 168 | $button_primary_background: $turquoise; 169 | $button_primary_color: lighten($button_primary_background,45%); 170 | 171 | // Secondary Buttons (Edit) 172 | $button_secondary_background: #993399; 173 | $button_secondary_color: rgb(213,121,204); 174 | 175 | Now go back and apply those to the classes, rather than putting the hex colors directly in. You can do this for way more than colors! What about backgrounds, hover states, borders, shadows, or typography styles? Take it as far as makes sense for your buttons. 176 | 177 | Now is a good time to fix up things like inconsistent background colors or hover colors, highlighting, borders, etc. Visual errors are much easier to fix up now, when you can automate how they change. 178 | 179 | **Check your Output** 180 | 181 | Be sure to check your output and make sure everything is working! 182 | 183 | How many lines of code is your `.scss` file now? Compare to how many lines of code your original `.css` file was. I'm willing to bet you didn't save yourself that many lines of code from the original—so it's not a huge reduction in CSS file size—but the maintainability, class naming consistency, readability, and future-proofing of the code is drastically improved. 184 | 185 | If everything looks good, congrats, you can stop here! Or you can take it one step Sassier and make a mixin to do some of the more repetitive work. 186 | 187 | #### Step 7: Create Mixins/Extends/Maps 188 | 189 | Copy everything over into folder `/4-mixins`. 190 | 191 | In this—optional—step we're going to take all the redundant code in the unique button classes and make a mixin to do the hard work for us. 192 | 193 | We're rewriting CSS properties for color, background-color, borders or box-shadows, text-shadows, and then possibly changing them again for hover states. What if we could do that in _one line_? 194 | 195 | Create a mixin with arguments for any of the properties we want to change on the fly. Be sure to name them clearly! 196 | 197 | Then replace your unique styles with an `@include` that contains the style values you want. 198 | 199 | **Disabled State** 200 | 201 | Let's assume any button can become disabled. Then we could apply a disabled class—without replacing the original classname—to any button and it would grey it out and make it not clickable. 202 | 203 | Can you make your mixin check if the button has a disabled state? 204 | 205 | **Output Size for more Buttons** 206 | 207 | When adding a mixin or an extend, I like to go back and see if it's saving me code. 208 | 209 | Go back into the original folder with the original junky CSS and HTML. Make 5-6 more buttons. Give them each a unique class (`.button-1`, `.button-2` etc will suffice, as this is just a test) and then copy some CSS for each of them. How many more lines of code is that? 210 | 211 | Now in your new mixin-ified Sass code, add 6 more buttons in your HTML. How many more lines of code is that in your output? 212 | 213 | ## Good Job! 214 | --------------------------------------------------------------------------------