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 {}