CFObjective: Bend Minds With CSS and JavaScript - Adrian Pomillio
May 16, 2013
Bend Minds With CSS and JavaScript - Adrian Pomillio
3D animations are cute, but I build business apps!
Let's take a look at transitions/animations, how to incorporate that into business apps that are more practical
The Four Horsemen -- why you see "css is only for designers" a lot
CSS Core - Four Horsemen
1. Box Model
"something is 200px wide" in CSS. and borders of 5px and padding of 5px, how big is it really?
Answer: it depends on your box model
width: -- that's the viewport within that component
THEN it's "right padding plus left padding plus left border plus right border"
then you get into "well it's not 200px so i'll try 198...194...etc"
Now in CSS3 we have "box sizing"
-- says "you're going to INCLUDE the box padding / margin in the width of your box
CanIUse.com (3rd time today I've heard someone recommend this)
2. Positioning
"i can't get things to line up, and they jump all over the screen"
when you say "position:absolute" and it floats to the top-left corner
position looks to the "next parent" to see where it should go
so you're always building "a box within a box"
make a UI widget
set it to position: relative
then set the things INSIDE it to "position: absolute" so you get very fine control over the layout
3. Floats
floats don't make the parent "grow"
so we started using "clearfix"
-- this is a dirty hack, that shoves in some content as the last element in a box to make it explode
the floating of an element INSIDE an element does NOT expand the HEIGHT of the parent
...gotta use a clear fix hack to fix this (sadly)
4. Specificity
look at the CSS of most websites
div p a b span.highlight {}
...stuff like that
as your sites grow, you add things into CSS.
have to be disciplined to fight this one.
the more specific the rules are, the harder it is to change elements
Changing stuff --
Transforms
scale / rotate
can use it to "shake" a disabled button if it gets clicked on, more UI info that it's a disabled button
Transitions
-- a way to change a property from start to finish
"great, so i go get this from jquery.com and i put a function on it and i'm done, right?"
yes. but javascript will be slower than css. always.
they can tune and tweak javascript, but it won't be as fast as a native rendering css thing in the browser (which is CSS)
there are plugins for jQuery that will check if a browser does/doesn't support something and it will try to switch between doing that feature in JS or CSS for you.
transitionend
-- an event
-- can listen for it, etc
propertyName
elapsedTime
--when 1 thing is done, kick off something else, etc.
Animations
IE10, Chrome, Firefox, Android all support this
below IE10, still have to use jQuery
but for IE10, you can use CSS Animations
animation-name
animation-duration
animation-iteration-count
animation-timing-function
animation-delay
animation-direction
other events:
animationstart, animationend, etc
Parallax Scrolling
where things "shift in the background"
Repaints / Reflows
-- when you're adding/removing elements, you take a performance hit
translate3d
-- can offset your translations, animations, etc and move it to the GPU
translate3d(0,0,0)
---even tho that doesn't DO anything, it offloads that CSS rule onto the GPU
---it's not MEANT to do that, and this may go away in the future. don't bank the whole future of your app on that
Thomas Fuchs wrote more info on this topic.
CSS Filters
-blur items in a list, so they're still ON the screen, but clearly canceled/disabled/whatever
-blur a button to show it's disabled, etc
No tools that are good at writing this css for you, just takes some remembering the syntax
Doesn't take a lot of typing to implement any of these rules.
No "step debugger" for this yet. Debugging can be a challenge.
Right now, use Chrome Developer Tools
IntelliJ has some CSS features that help too.
Large projects, lots of CSS -- check out smacss.com
3D animations are cute, but I build business apps!
Let's take a look at transitions/animations, how to incorporate that into business apps that are more practical
The Four Horsemen -- why you see "css is only for designers" a lot
CSS Core - Four Horsemen
1. Box Model
"something is 200px wide" in CSS. and borders of 5px and padding of 5px, how big is it really?
Answer: it depends on your box model
width: -- that's the viewport within that component
THEN it's "right padding plus left padding plus left border plus right border"
then you get into "well it's not 200px so i'll try 198...194...etc"
Now in CSS3 we have "box sizing"
-- says "you're going to INCLUDE the box padding / margin in the width of your box
CanIUse.com (3rd time today I've heard someone recommend this)
2. Positioning
"i can't get things to line up, and they jump all over the screen"
when you say "position:absolute" and it floats to the top-left corner
position looks to the "next parent" to see where it should go
so you're always building "a box within a box"
make a UI widget
set it to position: relative
then set the things INSIDE it to "position: absolute" so you get very fine control over the layout
3. Floats
floats don't make the parent "grow"
so we started using "clearfix"
-- this is a dirty hack, that shoves in some content as the last element in a box to make it explode
the floating of an element INSIDE an element does NOT expand the HEIGHT of the parent
...gotta use a clear fix hack to fix this (sadly)
4. Specificity
look at the CSS of most websites
div p a b span.highlight {}
...stuff like that
as your sites grow, you add things into CSS.
have to be disciplined to fight this one.
the more specific the rules are, the harder it is to change elements
Changing stuff --
Transforms
scale / rotate
can use it to "shake" a disabled button if it gets clicked on, more UI info that it's a disabled button
Transitions
-- a way to change a property from start to finish
"great, so i go get this from jquery.com and i put a function on it and i'm done, right?"
yes. but javascript will be slower than css. always.
they can tune and tweak javascript, but it won't be as fast as a native rendering css thing in the browser (which is CSS)
there are plugins for jQuery that will check if a browser does/doesn't support something and it will try to switch between doing that feature in JS or CSS for you.
transitionend
-- an event
-- can listen for it, etc
propertyName
elapsedTime
--when 1 thing is done, kick off something else, etc.
Animations
IE10, Chrome, Firefox, Android all support this
below IE10, still have to use jQuery
but for IE10, you can use CSS Animations
animation-name
animation-duration
animation-iteration-count
animation-timing-function
animation-delay
animation-direction
other events:
animationstart, animationend, etc
Parallax Scrolling
where things "shift in the background"
Repaints / Reflows
-- when you're adding/removing elements, you take a performance hit
translate3d
-- can offset your translations, animations, etc and move it to the GPU
translate3d(0,0,0)
---even tho that doesn't DO anything, it offloads that CSS rule onto the GPU
---it's not MEANT to do that, and this may go away in the future. don't bank the whole future of your app on that
Thomas Fuchs wrote more info on this topic.
CSS Filters
-blur items in a list, so they're still ON the screen, but clearly canceled/disabled/whatever
-blur a button to show it's disabled, etc
No tools that are good at writing this css for you, just takes some remembering the syntax
Doesn't take a lot of typing to implement any of these rules.
No "step debugger" for this yet. Debugging can be a challenge.
Right now, use Chrome Developer Tools
IntelliJ has some CSS features that help too.
Large projects, lots of CSS -- check out smacss.com