Modern CSS

An Overview

Created by David Myers / @davidmyers

Organization

Every project needs organization.

Organization:

Files

Organization:

Selectors


body {
	color: #666;
}
.content {
	color: #66f;
}
#specificText {
	color: #f66;
}
						

Organization:

Styles


body {
	border: 1px solid #000;
	color: #666;
	margin: 0 auto;
}
						

CSS3

CSS3 Goodies

Border Radius


.container {
	border-radius: 4px;
	// or
	border-top-left-radius: 2px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 6px;
}
						

CSS3 Goodies

Box Shadow


.container {
	box-shadow: 0px 0px 0px 0px #666;
	-moz-box-shadow: 0px 0px 0px 0px #666;
	-webkit-box-shadow: 0px 0px 0px 0px #666;
}
						

CSS3 Goodies

Text Shadow


h2 {
	text-shadow: 4px 4px 2px 2px #666;
}
						

CSS3 Goodies

Animations


.element-to-animate {
  animation: NAME-YOUR-ANIMATION 5s infinite;
}

@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}						

Responsive Design

  • Percentage-Based Sizes
  • Display
  • Media Queries

Resonsive Design

Percentage-Based Sizes


.card {
	max-width: 300px;
	min-width: 60px;
	width: 25%;
}
.content {
	max-width: 1900px;
	min-width: 300px;
	width: 80%;
}
						

Resonsive Design

Display


.card {
	display: inline-block;
	max-width: 300px;
	min-width: 60px;
	width: 25%;
}
.content {
	display: inline-block;
	max-width: 1900px;
	min-width: 300px;
	width: 80%;
}
						

Resonsive Design

Display - Caveat

Resonsive Design

Media Queries


@media only screen 
and (              min-device-width: 768px) 
and (              max-device-width: 1024px) 
and (                   orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
and (   min--moz-device-pixel-ratio: 2)
and (     -o-min-device-pixel-ratio: 2/1)
and (        min-device-pixel-ratio: 2)
and (                min-resolution: 192dpi)
and (                min-resolution: 2dppx) {
  /* Styles */
}
						

Pre-Processors

Basics

  • What is a pre-processor?
  • Less
  • Sass

Pre-Processors

Variables

Variables are really straightforward and work just like you would expect. Any css property value can be assigned to a variable.


$error = #FF0000;

.error {
	color: $error;
}
						

Pre Processors

Inheritance

Inheritance enables simpler and more readable selectors.


body {
  a {
    &:hover {
      color: green;
    }
  }
}
// or
body a:hover {
  color: green;
}
						

Pre Processors

Mixins

Mixins are best thought of as functions or "include" statements that accept arguments.


@mixin placeholder($color) {
  &::-webkit-input-placeholder { /* WebKit browsers */
    color: $color;
  }
  &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: $color;
    opacity: 1;
  }
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: $color;
    opacity: 1;
  }
  &:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: $color;
  }
}

input {
  .error {
    @include placeholder($error);
  }
}
						

Resources