• Save
Getting started with scss and bootstrap
Upcoming SlideShare
Loading in...5
×
 

Getting started with scss and bootstrap

on

  • 1,160 views

From the CSS Processor Madness meetup event:

From the CSS Processor Madness meetup event:

http://www.meetup.com/socalwdd/events/66952482/

by Charles Mata



Statistics

Views

Total Views
1,160
Views on SlideShare
1,160
Embed Views
0

Actions

Likes
3
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Getting started with scss and bootstrap Getting started with scss and bootstrap Presentation Transcript

  • Getting Started withSCSS and Bootstrap
  • Why we chose SCSS and Bootstrap● CSS is valid SCSS, making the transition from one to the other very smooth.● Bootstrap offers a solid start to both basic and responsive websites ○ Need to support mobile traffic, including tablets of varying resolutions● Cross browser compatible● UI elements are uniformly styled
  • Prerequisites / What to DownloadDownload and unzip Twitter Bootstraps default packageand latest version of jQueryhttp://twitter.github.com/bootstraphttp://www.jquery.comIf you dont have ruby and ruby gems installed, becomefriends with the person closest to you who does have thetools installed and who smells nice.Or just follow along on-screen.$> gem install sass
  • What well be doing● Using Bootstrap as a reset / base stylesheet● Using SCSS to write our own custom styles on top of Bootstrap ○ Variables ○ Mix-ins
  • Thank youThanks to all for joining this event with Oversee.net and theSouthern California Web Designers and Developers! oooo$$$$$$$$$$$$oooo oo$$$$$$$$$$$$$$$$$$$$$$$$o oo$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o o$ $$ o$ o $ oo o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$o $$ $$ $$o$ oo $ $ "$ o$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$o $$$o$$o$ "$$$$$$o$ o$$$$$$$$$ $$$$$$$$$$$ $$$$$$$$$$o $$$$$$$$ $$$$$$$ $$$$$$$$$$$ $$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$$$ """$$$ "$$$""""$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ "$$$ $$$ o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ "$$$o o$$" $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$o $$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$" "$$$$$$ooooo$$$$o o$$$oooo$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ o$$$$$$$$$$$$$$$$$ $$$$$$$$"$$$$ $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ $$$$"""""""" """" $$$$ "$$$$$$$$$$$$$$$$$$$$$$$$$$$$" o$$$ "$$$o """$$$$$$$$$$$$$$$$$$"$$" $$$ $$$o "$$""$$$$$$"""" o$$$ $$$$o o$$$" "$$$$o o$$$$$$o"$$$$o o$$$$ "$$$$$oo ""$$$$o$$$$$o o$$$$"" ""$$$$$oooo "$$$o$$$$$$$$$""" ""$$$$$$$oo $$$$$$$$$$ """"$$$$$$$$$$$ $$$$$$$$$$$$ $$$$$$$$$$" "$$$""
  • SCSS vs SASS vs CSS/* SCSS */ /* SASS */ /* CSS */$blue: #3bbfce; $blue: #3bbfce .content-navigation {$margin: 16px; $margin: 16px border-color: #3bbfce; color: #2b9eab;.content-navigation { .content-navigation } border-color: $blue; border-color: $blue color: color: darken($blue, 9%) .border { darken($blue, 9%); padding: 8px;} .border margin: 8px; padding: $margin / 2 border-color: #3bbfce;.border { margin: $margin / 2 } padding: $margin / 2; border-color: $blue margin: $margin / 2; border-color: $blue;}
  • Pros of SCSS vs SASSSCSS SASS● More expressive ● More concise (multiple rules on one line) ● Easier to read● Encourages proper rule ● Doesnt care about nesting semi-colons● Inline documentation is a bit easier● Syntax highlighting tends to work out of the box● Closer to CSS syntaxsource: http://thesassway.com/articles/sass-vs-scss-which-syntax-is-better