how to be a css badass
(sort of)
Why you should know css
- You can make things that look AWESOME
- Be both a developer AND a designer
- And... why not? Add it to your skillset
css fundamentals
(in short)
display
Three primary types:
inline
inline-block
block
Padding
Internal element space
It is used to ensure content is not at the edges of the given element
Margin
External element spacing
It is commonly used to separate elements visually
Floats
This is a very useful property in CSS, but it can be tricky
Commonly used for news / articles
other alignments
Aligning text to the center
- line-height
- text-align
- vertical-align
Aligning child elements
with margins
margin: 0px auto;
Making elements scrollable
The overflow property
You can specify the direction of the overflow
- overflow-x, overflow-y
/* Adds vertical scrolling */
overflow-y: auto;
/* Hides any overflow */
overflow: hidden;
Only takes effect when the height of the child elements
becomes greater than the height of the parent element
Positioning elements
relative
absolute
fixed
Leaves a gap for the element
Does not leave any space for the element
Stays at the same position even when scrolling
done with the basics!
Advanced Css
this is the cooler stuff
Checkout this CSS3 Spinner
Keyframes
It's the CSS3 way to define animations
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
}
@keyframes spin {
0% { do something; }
25% { do another thing; }
...
100% { get to final "frame" of the animation; }
}
transform everything!
Using those animations
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
Put this into the element you want to animate
spinner's css
Breakdown
- Starts out as 100x100px square
- Border-radius turns it into a circle with no background
- 2 / 4 borders are the same color and the others are transparent
- Creates an illusion
- Start the animation on it
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
}
.spin {
width: 100px;
height: 100px;
background: transparent;
border-radius: 100%;
border-bottom: 2px solid tranparent;
border-left: 1px solid transparent;
border-right: 4px solid #9B59B6;
border-top: 3px solid #9B59B6;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
Design Frameworks
get your designs finished faster!
bootstrap
foundation
semantic-ui
what are the benefits?
grid system
- Every framework has it
- Structure your elements neatly
- Show / Hide elements when needed
- Define how many columns in a row the
element takes
ready-to-go components
Buttons
Navigation Bars / Menus
Form styling and grouping
Pagination
Labels
Lists
Modal Boxes
Tooltips
Colors
which one should i use?
it doesn't matter
Css preprocessors
use them!
Sass / scss
less
stylus
Why should i use them?
It helps make your CSS more modular
Let's take the Spinner and modularize it
- Color and size variables
/* LESS Example */
@spin-color: #9B59B6;
@spin-size: 100px;
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
}
.spin {
width: @spin-size;
height: @spin-size;
background: transparent;
border-radius: 100%;
border-bottom: 2px solid tranparent;
border-left: 1px solid transparent;
border-right: 4px solid @spin-color;
border-top: 3px solid @spin-color;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
override frameworks
This is an example of overriding bootstrap's LESS variables
- Ends up changing EVERY component that uses that variable
- Change color scheme quickly
/* Bootstrap has these variables:
* @brand-primary
* @brand-success
* @brand-info
* @brand-warning
* @brand-danger
* and many more
*/
@brand-primary: green;
@brand-info: purple;
@brand-danger: red;
any questions?
https://github.com/rgoomar/CSS-Crash-Course
CSS Badass
By Rishi Goomar
CSS Badass
- 2,954