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

1. CSS with
superpowers
By @flaviaza

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. 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. Rules for teams
• 3-5 members
• At least 1 member of 2 different IL
teams (sharks, avengers, ux)

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. 2. Don’t worry, be
sassy

7. Interpreted language
that spits CSS
But...
Sass or Scss??

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. 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. 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. 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. 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. But I’m ztill
lazy...

14. It’s chock full of the
web’s best reusable
patterns.
Nice...
Less work to do

15. But But...
Still a lot of work
to do!

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. And what about
quality,
standards, scale
and working in
large teams?

18. Keep your code
clean and
readable

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. Ready?
Lets take a look at
- Repository structure
- ITCSS
- Patterns and best
practices

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. Wireframes

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.