CSS and Other Cool Stuff

Slide 1

Slide 1 text

Ricardo Vazquez, UI/UX Designer @iamrvazquez

Slide 2

Slide 2 text

I love art, I love code, I love coding art™

Slide 3

Slide 3 text

design

Slide 4

Slide 4 text

design matters

Slide 5

Slide 5 text

design matters LOT a

Slide 6

Slide 6 text

TheGreat discontent

Slide 7

Slide 7 text

Design must be useful, aesthetic, discrete, lasting, useful. Most importantly, good design must be as little as possible.

Slide 8

Slide 8 text

WeARE DESIGNERS

Slide 9

Slide 9 text

WhO Code...

Slide 10

Slide 10 text

style.css

Slide 11

Slide 11 text

global.css

Slide 12

Slide 12 text

bits.css typography.css layout.css footer.css ui.css modules.css

Slide 13

Slide 13 text

S e p a r a t e your CSS, or I’m coming after you.

Slide 14

Slide 14 text

bits.css typography.css layout.css footer.css ui.css modules.css global.css

Slide 15

Slide 15 text

@import ‘bits.css’ @import ‘ui.css’ @import ‘typography.css’

Slide 16

Slide 16 text

Wishful Thinking

Slide 17

Slide 17 text

Sass Me up

Slide 18

Slide 18 text

OMFG WTH IS SASS?

Slide 19

Slide 19 text

NBD.

Slide 20

Slide 20 text

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

Slide 21

Slide 21 text

A computer program that modifies data to conform with the input requirements of another program.

Slide 22

Slide 22 text

SASS

Slide 23

Slide 23 text

SASS CSS

Slide 24

Slide 24 text

CSS MAGIC SASS

Slide 25

Slide 25 text

SASS + CSS = MAGIC

Slide 26

Slide 26 text

THe OTHERS

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

I used to Drink the hard stuff

Slide 31

Slide 31 text

Let’s get Started

Slide 32

Slide 32 text

Variables

Slide 33

Slide 33 text

$siteBg = #B9C1C7 $labelBg = #02ADEA $moduleClr = #AEAFB0

Slide 34

Slide 34 text

span display: inline-block background: $labelBg margin: 5px 5px 0 0

Slide 35

Slide 35 text

NESTING

Slide 36

Slide 36 text

.photo-details display: none &.active display: block h4 color: $blue font-size: 14px font-family: $helvetica font-weight: bold text-transform: uppercase .select width: 236px

Slide 37

Slide 37 text

.photo-details.active h4 .select width: 236px

Slide 38

Slide 38 text

Don’t. Repeat. YOURSELF.

Slide 39

Slide 39 text

BE A Designer

Slide 40

Slide 40 text

MIXxxINS

Slide 41

Slide 41 text

@mixin underline-on-hover( ) text-decoration: none &:hover text-decoration: underline

Slide 42

Slide 42 text

=underline-on-hover( ) text-decoration: none &:hover text-decoration: underline

Slide 43

Slide 43 text

a:link color: $active background: $buttonBg padding: 5px 10px +underline-on-hover

Slide 44

Slide 44 text

String Interpolation in CSS?

Slide 45

Slide 45 text

HELL YES

Slide 46

Slide 46 text

=vendorize($property, $value) -webkit-#{$property}: $value -moz-#{$property}: $value -ms-#{$property}: $value -o-#{$property}: $value #{$property}: $value

Slide 47

Slide 47 text

+vendorize(appearance, none)

Slide 48

Slide 48 text

+vendorize(appearance, none) +vendorize(box-sizing, border-box)

Slide 49

Slide 49 text

+vendorize(appearance, none) +vendorize(box-sizing, border-box) +vendorize(animation-play-state, paused)

Slide 50

Slide 50 text

v =group( ) &:before, &:after content: "\0020" display: block height: 0 overflow: hidden &:after clear: both

Slide 51

Slide 51 text

v EXtending

Slide 52

Slide 52 text

.sidebar-box margin: 0 0 10px 0 background: $bg padding: 10px .sidebar-auth-box @extend .sidebar-box input[type=text] padding: 10px border: 1px solid #ccc

Slide 53

Slide 53 text

Simple, right?

Slide 54

Slide 54 text

Still, we shouldn’t be spending our time writing mixins and extending all over the place. There’s gotta be something better.

Slide 55

Slide 55 text

COMPASS i’m lost... get me a

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

Slide 58

Slide 58 text

@import "compass/css3/border-radius" @import "compass/css3/transition" @import "compass/css3/opacity" @import "compass/css3/box-shadow" @import "compass/css3/text-shadow"

Slide 59

Slide 59 text

+single-box-shadow (rgba(0,0,0,0.3),0px,1px,3px,false,true)

Slide 60

Slide 60 text

ADMIT I Must

Slide 61

Slide 61 text

on UI A WORD and UX

Slide 62

Slide 62 text

Our vision is optimized to see structure Know your user State visualization Focus Help User testing Aesthetics

Slide 63

Slide 63 text

And LOGIC Emotion

Slide 64

Slide 64 text

Envision your users, and design logically; it will yield emotion if you let it breathe.