Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

add css next/preprocessor sample

  • Loading branch information...
commit 885b61270199ab5eb235a7ab0d6ebcb1ed67a258 1 parent dd40b9d
@geraldb geraldb authored
Showing with 387 additions and 0 deletions.
  1. +387 −0 samples/csspre.textile
View
387 samples/csspre.textile
@@ -0,0 +1,387 @@
+title: CSS Next - CSS Preprocessors
+
+h1. CSS Next - CSS Preprocessors
+
+Lightning Talk, May 2012 - Gerald Bauer
+
+
+h1. What's CSS?
+
+CSS => Cascading Style Sheets
+
+Ice Breakers:
+
+* What's missing in CSS?
+* Are you using any CSS preprocessors?
+
+
+
+h1. Dynamic CSS
+
+CSS preprocessors extend "standard" CSS with:
+
+* Variables
+* Functions and Operations
+* Nested Rules
+* Mixins
+* And much more (Interpolation, Conditionals, Looping, Imports, Keyword Arguments, etc.)
+
+
+h1. CSS Variables
+
+Define variables:
+
+{{{
+$bingo-text: white;
+$bingo-background: green;
+}}}
+
+Use variables:
+
+{{{
+.bingo {
+ background-color: $bingo-background;
+ color: $bingo-text;
+}
+}}}
+
+Becomes (compiled to "standard" CSS):
+
+{{{
+.bingo {
+ background-color: white;
+ color: green;
+}
+}}}
+
+Not just colors:
+
+{{{
+$base-font-size: 18px;
+$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}}}
+
+
+
+h1. CSS Functions and Operations
+
+Yes, you can. Use standard math operations (+, -, *, /, and %) for numbers - even with units.
+For colors, use functions for changing the lightness, hue, saturation, and more.
+
+
+{{{
+#navbar {
+ $navbar-width: 800px;
+ $navbar-items: 5;
+ $navbar-color: #ce4dd6;
+
+ width: $navbar-width;
+ border-bottom: 2px solid $navbar-color;
+
+ li {
+ float: left;
+ width: $navbar-width/$navbar-items - 10px;
+
+ background-color: lighten($navbar-color, 20%);
+ &:hover {
+ background-color: lighten($navbar-color, 10%);
+ }
+ }
+}
+}}}
+
+Becomes (compiled to "standard" CSS):
+
+{{{
+#navbar {
+ width: 800px;
+ border-bottom: 2px solid #ce4dd6;
+}
+
+#navbar li {
+ float: left;
+ width: 150px;
+ background-color: #e5a0e9;
+}
+
+#navbar li:hover { background-color: #d976e0; }
+}}}
+
+
+
+h1. CSS Nested Rules
+
+{{{
+#header {
+ h1 {
+ font-size: 26px;
+ font-weight: bold;
+ }
+ p { font-size: 12px;
+ a { text-decoration: none;
+ &:hover { border-width: 1px }
+ }
+ }
+}
+}}}
+
+Becomes (compiled to "standard" CSS):
+
+{{{
+#header h1 {
+ font-size: 26px;
+ font-weight: bold;
+}
+#header p {
+ font-size: 12px;
+}
+#header p a {
+ text-decoration: none;
+}
+#header p a:hover {
+ border-width: 1px;
+}
+}}}
+
+
+h1. CSS Mixins
+
+{{{
+.slide {
+ background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Webkit (Chrome 11+) */
+ background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Mozilla Firefox */
+ background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* IE 10+ */
+ background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Opera */
+ background-image: linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); /* Proposed W3C Markup */
+}
+}}}
+
+Use mixin for vendor "prefix-free" code:
+
+{{{
+.slide {
+ @include linear-gradient(top left, #FFFFFF, #00A3EF);
+}
+}}}
+
+Define mixin for reuse:
+
+{{{
+@mixin linear-gradient($pos, $start-color, $end-color) {
+ background-image: -webkit-linear-gradient($pos, $start-color 0%, $end-color 100%);
+ background-image: -moz-linear-gradient($pos, $start-color 0%, $end-color 100%);
+ background-image: -ms-linear-gradient($pos, $start-color 0%, $end-color 100%);
+ background-image: -o-linear-gradient($pos, $start-color 0%, $end-color 100%);
+ background-image: linear-gradient($pos, $start-color 0%, $end-color 100%);
+}
+}}}
+
+
+h1. Reuse - yes you can. Use pre-built Mixin libraries
+
+Bourbon includes pre-built mixins for:
+
+* Animations
+* Background Image
+* Background Size
+* Border Image
+* Border Radius
+* Box Shadow
+* Box Sizing
+* Columns
+* Flex Box
+* Inline Block
+* Linear Gradient
+* Radial Gradient
+* Transform
+* Transitions
+* And many more
+
+What is Bourbon?
+
+Bourbon is a free, open source mixin library (see "@github.com/thoughtbot/bourbon@":https://github.com/thoughtbot/bourbon).
+
+
+
+h1. Imports
+
+Use @import@ directive to include libraries or your own stylesheets. Example:
+
+{{{
+@import "bourbon"; // 3rd party css mixin library
+
+@import "settings"; // global color settings using variables
+
+@import "flash";
+@import "navbar";
+@import "button";
+@import "breadcrumb";
+
+...
+}}}
+
+
+h1. Yes, you can. CSS Programming
+
+Simple Button:
+
+{{{
+@mixin simple($base-color, $grayscale: false) {
+ $color: hsl(0, 0, 100%);
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ @if $grayscale == true {
+ $border: grayscale($border);
+ $inset-shadow: grayscale($inset-shadow);
+ $stop-gradient: grayscale($stop-gradient);
+ $text-shadow: grayscale($text-shadow);
+ }
+
+ border: 1px solid $border;
+ @include border-radius (3px);
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline-block;
+ font-size: 11px;
+ font-weight: bold;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: 7px 18px;
+ text-decoration: none;
+ text-shadow: 0 1px 0 $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover {
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+
+ @if $grayscale == true {
+ $base-color-hover: grayscale($base-color-hover);
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
+ }
+
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ }
+
+ &:active {
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+ @if $grayscale == true {
+ $border-active: grayscale($border-active);
+ $inset-shadow-active: grayscale($inset-shadow-active);
+ }
+
+ border: 1px solid $border-active;
+ @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+ }
+}
+}}}
+
+
+
+h1. Alternative CSS Preprocessors
+
+* Sass => "@sass-lang.com@":http://sass-lang.com
+
+* Less => "@lesscss.org@":http://lesscss.org
+
+* Stylus => "@learnboost.github.com/stylus@":http://learnboost.github.com/stylus
+
+* Others
+
+
+
+h1. Usage - Server Side and Client Side
+
+h3. Server
+
+{{{
+$ sass styles.sass styles.css
+}}}
+
+or
+
+{{{
+$ lessc styles.less > styles.css
+}}}
+
+
+h3. Browser (Client-Side)
+
+1) Link @.less@ stylesheets with the @rel@ set to @stylesheet/less@:
+
+{{{
+<link rel="stylesheet/less" type="text/css" href="styles.less">
+}}}
+
+2) Add @less.js@ library:
+
+{{{
+<script src="less.js" type="text/javascript"></script>
+}}}
+
+
+
+
+
+
+
+h1. "Official" CSS3 Variables
+
+Upcoming Module for CSS3 Variables => "@dev.w3.org/csswg/css-variables@":http://dev.w3.org/csswg/css-variables
+
+Example:
+
+Define variables:
+
+{{{
+:root { var-color: blue; }
+div { var-color: green; }
+#alert { var-color: red; }
+}}}
+
+
+Use variables:
+
+{{{
+* { color: var(color); }
+}}}
+
+Includes calculations:
+
+{{{
+one { var-foo: 10px; }
+two { var-bar: calc(var(foo) + 10px); }
+three { var-foo: calc(var(bar) + 10px); }
+}}}
+
+
+
+h1. Examples in the Wild
+
+* Twitter Bootstrap (HTML/CSS/JS Templates) => "@twitter.github.com/bootstrap@":http://twitter.github.com/bootstrap
+
+See "Using LESS with Bootstrap Page":http://twitter.github.com/bootstrap/less.html
+
+
+* Wettpool
+
+See "Style Page":http://wettpool.herokuapp.com/style
+
+
+
+h1. The End - Thank You
+
+Questions? Comments?
Please sign in to comment.
Something went wrong with that request. Please try again.