Skip to main content

Home/ CSS Evangelist/ Group items tagged prefix

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

No More Need For Some CSS3 Vendor Prefixes | MightyMeta - 0 views

www.mightymeta.co.uk/...-for-some-css3-vendor-prefixes

css css3 vendor webdesign

shared by Vernon Fowler on 06 Jan 12 - No Cached
  • Safari (5% of global share) still requires a prefix for box-shadow
  • Hopefully some of the other more exciting CSS3 properties such as transform will follow suit soon.
Vernon Fowler

Prevent Long URL's From Breaking Out of Container | CSS-Tricks - 0 views

css-tricks.com/...from-breaking-out-of-container

typography webdesign css links

shared by Vernon Fowler on 19 Feb 14 - No Cached
  • a width
    • Vernon Fowler
      Vernon Fowler on 19 Feb 14
       
      I didn't need a width. Float:left was enough. Tested in IE10.
  • -ms-word-break: break-all;
    • Vernon Fowler
      Vernon Fowler on 19 Feb 14
       
      Shouldn't need the IE prefixed version as according to http://caniuse.com/#search=word-break that browser has had support all along.
  • float:left
Vernon Fowler

Choosing great variable names - 0 views

thesassway.com/...variable-naming

variable namespace name sass scss css webdesign DIG252

shared by Vernon Fowler on 19 Jun 14 - No Cached
  • try to choose semantic names for your variables
  • describe its function or purpose
  • // Better $brand-color: red; $accent-color: yellow;
  • ...3 more annotations...
  • postfix color names with -color:
  • add a prefix like header- or footer- for specific sections: // Header $header-height: 100px; $header-background-color: $color-brand; // Footer $footer-height: 200px; $footer-background-color: #aaa;
  • I like to keep all my variables in a single file, called _config.scss, that I include in my primary stylesheet using the @import directive.
Vernon Fowler

Sass Style Guide | CSS-Tricks - 0 views

css-tricks.com/sass-style-guide

sass scss styleguide css webdesign DIG252

shared by Vernon Fowler on 18 Jun 14 - No Cached
  • List @extend(s) First
  • List "Regular" Styles Next
  • List @include(s) Next
  • ...9 more annotations...
  • All Vendor Prefixes Use @mixins
  • Global and Section-Specific Sass Files Are just Table of Contents In other words, no styles directly in them. Force yourself to keep all styles organized into component parts.
  • If you find yourself using a number other than 0 or 100% over and over, it likely deserves a variable.
  • List Vendor/Global Dependancies First, Then Author Dependancies, Then Patterns, Then Parts
  • In Deployment, Compile Compressed
  • Comments get stripped when compiling to compressed code, so there is no cost.
  • Partials are named _partial.scss
  • Variablize All Colors Except perhaps white and black.
  • In your global stylesheet, @import a _shame.scss file last.
Vernon Fowler

A Complete Guide to Flexbox | CSS-Tricks - 0 views

css-tricks.com/...a-guide-to-flexbox

flexbox CSS css3 layout responsive webdesign sass mixin vendor prefix IE10

shared by Vernon Fowler on 22 Mar 14 - No Cached
  • flex-direction
  • flex-wrap
  • space-around: items are evenly distributed in the line with equal space around them
  • ...6 more annotations...
  • justify-content
  • align-items
  • flex-start: cross-start margin edge of the items is placed on the cross-start line
  • stretch (default): stretch to fill the container (still respect min-width/max-width)
  • Note: this property has no effect when the flexbox has only a single line.
  • flex-grow
1 - 9 of 9
Showing 20▼ items per page