Anderson-Juhasc

$button-color: #ff6600;

%button-base {
	@include adjust-font-size-to(14px, 1.5);
	@include inline-block;
	@include border-radius(6px);
	font-weight: bold;
	padding: 3px 30px;
	position: relative;
	text-decoration: none;

Anderson-Juhasc

★ SESSION VIDEO & DESCRIPTION

http://bit.ly/R6GPPD

--------------------------------------------------

★ DESIGN ARTICLES

Principles of User Interface Design
http://bokardo.com/principles-of-user-interface-design

Anderson-Juhasc

//
// Selector-prefix
// =================================================

//
// @mixin selector-prefix([$prefix], [$propertie], [$values]);
// cria de maneira fácil @extend-Only Selectors, por exemplo: %fz-10px, %fz-20px, %fz-4em...
//
// uso: @include selector-prefix([$prefixo_dos_seletores], [$propriedade], [$valores]);
// exemplo: @include selector-prefix(mr, margin-right, 4px 10px 18px 1em);

Anderson-Juhasc

OOCSS vs OOSass

note that this requires Sass 3.2 alpha or higher

OOCSS is awesome because it helps us organize our style sheets in clean and simple ways but it can be far too rigid for the new responsive web. How can we use preprocessors to preserve both flexibility and cleanliness of code? Can these objects be abstracted to our preprocessors?

Lets first take a look at three column widths in OOCSS to see how they compare.

CSS

Anderson-Juhasc

Anderson-Juhasc

http://cwebbdesign.tumblr.com/post/23666803241/scalable-and-maintainable-css-approaches

CSS Wizardy Guide https://github.com/csswizardry/CSS-Guidelines/blob/master/CSS%20Guidelines.md

Github Styleguide: https://github.com/styleguide/css

Wat? Semantic .. http://css-tricks.com/semantic-class-names/

Anderson-Juhasc

// https://gist.github.com/gists/2879137
// this is for Compass 0.12

/* put this file in your assets/stylesheets/ folder
 *
 * Example main.scss:
 * @import "compass";
 * @import "icons/*.png";
 * @include all-icons-sprites;
 *

Anderson-Juhasc

$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");

@mixin sprite-background($name) {
  background-image: sprite-url($sprites);
  background-position: sprite-position($sprites, $name);
  background-repeat: no-repeat;
  display: block;
  height: image-height(sprite-file($sprites, $name));
  width: image-width(sprite-file($sprites, $name));

Anderson-Juhasc

$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");

@mixin sprite-background($name) {
  background-image: sprite-url($sprites);
  background-position: sprite-position($sprites, $name);
  background-repeat: no-repeat;
  display: block;
  height: image-height(sprite-file($sprites, $name));
  width: image-width(sprite-file($sprites, $name));

Anderson-Juhasc

@import "_mixins.scss";

@mixin app($dpi) {

  header {
    position: relative;

    header .logo {
      // Center in header
      @include sprt-box-centered($dpi, logo);