css

Cascading Style Sheets

• Basic
  • css :before and :after
  • css box-sizing
  • css display inline-block
  • css filter sepia contrast blur
  • css font-size
  • css opacity
  • css split element into multiple columns
  • CSS text-decoration
  • css text-overflow
  • css textarea resize
  • css transform
  • CSS transition (animation)
  • CSS linear-gradient
  • CSS border-radius
  • CSS box-shadow
  • CSS text-shadow
  • css font styles
• BEM
• CSS Grid
• docs
  • CSS Flexbox layout model
  • css selectors
  • css styles priority (specificity)
• Dev
  • css arrow triangle
  • css centering element (vertical-align)
  • CSS change list bullet color
  • CSS column re-ordering
  • css columns with equal height
  • css fluid-fixed column layout
  • css hover and active states
  • css responsive layout
  • css select (dropdown) custom styles
  • css tooltip
  • Default browser styles
  • Hide placeholder text on focus
  • WebKit custom scrollbars
  • reset.css styles
  • normalize.css styles
  • css width 100% minus 100px
  • css custom font
  • css firefox styles only
  • footer to bottom (sticky footer)
• Nesting
• Sass
  • build custom web-framework with SASS
• Sass vs Less

.class {
    transition: all 0.3s ease;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.7);
    text-shadow: 1px 1px 0px rgba(0,255,0,0.7);
    font-family: 'Lato', Arial, sans-serif;
}

.class {
    -vendor-prefix-something: awesome;
    something: awesome; /* unprefixed property should be the last */
}
 
.class {
    background-color: #baf07c; /* fallback for older browsers */
    background-color: rgba(177,242,52,0.6);
}

helper classes:

.gutter-left {
	padding-left: 10px;
}
.gutter-right {
	padding-right: 10px;
}
.gap {}
.stripe {}
.navbar {}
.menu-wrap {}
.header-wrap {}
.sidebar-wrap {}
.content-wrap {}
.footer-wrap {}
.xs {} // .extra-small {}
.sm {} // .small {}
.md {} // .medium {}
.lg {} // .large {}
.xl {} // .extra-large {}