Skip to main content

Home/ CSS Evangelist/ Group items tagged styleguide

Rss Feed Group items tagged

Vernon Fowler

bjankord/Style-Guide-Boilerplate - 0 views

  • I recommend creating a directory named style-guide in your site's root directory. I think it would be awesome if I could go to anysite.com/style-guide/ and check out that site's style guide.
  • You should be able to go to yoursite.com/style-guide/ and see how your live site's CSS affects base elements.
  • Below the custom styles for the boilerplate, you will add in your own custom stylesheet(s) which you use on your live site.
  • ...1 more annotation...
  • To create custom patterns like buttons, breadcrumbs, alert messages, etc., create a new .html file and add your HTML markup into the file. Save the file as pattern-name.html into the markup/patterns directory inside of your style-guide directory.
Vernon Fowler

Sass Style Guide | CSS-Tricks - 0 views

  • 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.
1 - 7 of 7
Showing 20 items per page