Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css on-steroids

190 views

Published on

Training for beginners provided to internal teams at Intralinks about the use of scss and other tools

Resources in this presentation:
- Nyan cat: http://www.easyfreepatterns.com/download-pattern.php?id=185818
- Sass vs scss: http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
- Sass: http://sass-lang.com/guide
- Bootstrap example: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_type.scss
- Sass conditionals and loops example: https://nex.intralinkslabs.com
- Bootstrap button example:
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L3059
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_buttons.scss#L68
- Compass: http://compass-style.org/
- Bootstrap: http://getbootstrap.com/
- scss lint: https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md
- Wireframes: http://www.sketchappsources.com/free-source/1884-responsive-wireframe-template-sketch-freebie-resource.html
- Pusheen cat! pusheen.com
- Project example:
- ITCSS: https://twitter.com/itcss_io


Published in: Software
  • Be the first to comment

Css on-steroids

  1. 1. CSS with superpowers By @flaviaza
  2. 2. Agenda 1. How we’ll have fun today 2. Why scss will make you happy 3. Bootstrap is your best friend 4. Lets install the ingredients 5. Get in that bowl!
  3. 3. 1. Where is the fun? • We’ll work in teams • We’ll play a game (winners will enjoy delicious cookies and get some geeky stickers)
  4. 4. Rules for teams • 3-5 members • At least 1 member of 2 different IL teams (sharks, avengers, ux)
  5. 5. So... where is my cookie? • You win by being a good mate and sharing your knowledge. EASY as it sounds • Your team wins by building the coolest project! (team prizes will be given at the team activity organized by Tony )
  6. 6. 2. Don’t worry, be sassy
  7. 7. Interpreted language that spits CSS But... Sass or Scss??
  8. 8. I’m lazy. I don’t want to type everything over and over. SASS: An extension of CSS h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { font-weight: normal; line-height: 1; color: #777; } h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6 { small, .small { font-weight: normal; line-height: 1; color: $headings-sm- color; } } Plane CSS Awesomely with SCSS Meww... NEZTING!!
  9. 9. SASS: An extension of CSS CSS is pretty simple, no programmatic language at all. .folders-tree ul li>.tree-item{padding-left:15px} .folders-tree ul ul li>.tree-item{padding-left:30px} .folders-tree ul li .folder-new{padding-left:40px} .folders-tree ul ul ul li>.tree-item{…} .folders-tree ul ul li .folder-new{…} .folders-tree ul ul ul ul li>.tree-item{…} .folders-tree ul ul ul li .folder-new{…} .folders-tree ul ul ul ul ul li>.tree-item{…} .folders-tree ul ul ul ul li .folder-new{…} .folders-tree ul ul ul ul ul ul li>.tree-item{…} .folders-tree ul ul ul ul ul li .folder-new{…} .folders-tree ul ul ul ul ul ul ul li>.tree-item{…} .folders-tree ul ul ul ul ul ul li .folder-new{…} .folders-tree ul ul ul ul ul ul ul ul li>.tree- item{…} .folders-tree ul ul ul ul ul ul ul li .folder-new{…} .folders-tree ul ul ul ul ul ul ul ul ul li>.tree- item{…} .folders-tree ul ul ul ul ul ul ul ul li .folder- new{…} … @for $i from 1 through 10 { $nested_ul: $nested_ul + "ul ”; #{$nested_ul}li > .tree-item { padding-left: $i * $indent- initial; } @if $i != 1 { $form_ul: $form_ul + "ul ”; #{$form_ul}li .folder-new { padding-left: $i * $indent; } } } Plane CSS Awesomely with SCSS
  10. 10. SASS: An extension of CSS CSS is pretty dumb, it makes you repeat things over and over. .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-default:focus, .btn-default.focus { color: #333; background-color: #e6e6e6; border-color: #8c8c8c; } .btn-default:hover { color: #333; ... .btn-default { @include button-variant($btn- default-color, $btn-default-bg, $btn- default-border); } ----------------------------------- @mixin button-variant($color, $background, $border) { color: $color; background-color: $background; border-color: $border; ... Plane CSS Awesomely with SCSS
  11. 11. SASS: An extension of CSS • In large projects is sooo easy to screw it with plane CSS. • With a pre-processor is easier to read and work with, scale and maintain. Don’t you agree? Meww
  12. 12. SASS: An extension of CSS • Fully CSS-compatible • Language extensions such as variables, nesting, and mixins • Many useful functions for manipulating colors and other values • Advanced features like control directives for libraries • Well-formatted, customizable output
  13. 13. But I’m ztill lazy...
  14. 14. It’s chock full of the web’s best reusable patterns. Nice... Less work to do
  15. 15. But But... Still a lot of work to do!
  16. 16. 3. Bootstrap! HTML, CSS, and JS framework for developing responsive, mobile first projects on the web Yeah... We have our own JS framework
  17. 17. And what about quality, standards, scale and working in large teams?
  18. 18. Keep your code clean and readable
  19. 19. 4. Getting ready 1. Clone the repo 2. Install Ruby, npm, grunt 3. Install Sass, compass, scss_lint gems 4. Run npm install 5. Get bootstrap-sass git submodule: Go to assets/core/ and run git submodule init && git submodule update
  20. 20. Ready? Lets take a look at - Repository structure - ITCSS - Patterns and best practices
  21. 21. 5. Get in that bowl! • Covers wireframe requirements and have a cool design and meaningful content. • Passes w3c markup validation • Passes scss-lint validation • Passes accessibility validation • Follows bootstrap patterns • Can be comfortably navigated with the screen reader • Have and use a new (css) component, mixin, function and placeholder • Have at least one commit of each member of the team • Have a clean commit log and no merge commits -except for pull requests merges- (muahaha..) Create a responsive webpage that:
  22. 22. Wireframes
  23. 23. 5. Awards categories • Best design and UX • Best and valid code • Best use of Bootstrap and itcss • Best accessibility • Cleanest git log • If time there will be a demo of what was done at the end of today’s session. • Final presentation must be done by the end of next Wednesday • Winners will be announced by the end of next week.

×