• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Structure Your SASS   BADcamp 2013
 

Structure Your SASS BADcamp 2013

on

  • 579 views

So you've heard of SASS, maybe you're using it already. Look how pretty it makes your code! That is until you get a list, in a block, that comes from a view, that also uses some mixins and a media ...

So you've heard of SASS, maybe you're using it already. Look how pretty it makes your code! That is until you get a list, in a block, that comes from a view, that also uses some mixins and a media query. How does the SASS code structure fit in with your Drupal theme? What if you want to use your own grid? Should you put those rules in a separate stylesheet or maybe a partial? (Wait, what's a partial??)

This session will cover:

- How to most effectively use SASS variables, mixins, extends, partials, and more
- An intro to how the popular Zen base theme uses SASS out-of-the-box
- How to use SASS to make your theme (and your design!) more semantic
- An intro to SMACSS (Scalable and Modular Architecture for CSS)
- How to easily go from prototype to theme, without duplicating your work

And will raise even more questions, such as:

- Where did all these media queries come from? And..
- Where did my line numbers go and how do I get them back?!

The target audience is proficient in CSS and interested in making the most out of the SASS (Syntactically Awesome Stylesheets) for their next Drupal theme or project.

Statistics

Views

Total Views
579
Views on SlideShare
576
Embed Views
3

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 3

https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Structure Your SASS   BADcamp 2013 Structure Your SASS BADcamp 2013 Presentation Transcript

    • Structure Your SASS Drupal.org Github Twitter } penguininja
    • CSS: What’s the Problem? ● ● ● ● Coding Standards Predictability Reusability Semantic Markup
    • Enter SMACSS (Scalable and Modular Architecture for CSS) Jonathan Snook : smacss.com
    • SMACSS Basics ● General to Specific ● Identify Patterns ● Modules as Standalone Components ● Increase Semantics
    • SMACSS Organization 1. 2. 3. 4. 5. Base Layout Module State Theme
    • Still Some Issues... ● Non-Semantic Classes ● Not enough control over Drupal markup Semantic Class Names : css-tricks.com/semantic-class-names
    • Make it Better with SASS Semantic Grids Zen Grids zengrids.com The Semantic Grid System semantic.gs Simple Semantic Grid : github.com/penguininja/simple-semanticgrid
    • Semantic Grids $max-width: 960px; article { @include column(9); } aside { @include column(3); }
    • Make it Better with SASS Use Mixins ● Increased Reusability ● Cleaner Module Code ● Style Tile Integration
    • Make it Better with SASS Use Partials to Reduce Number of Stylesheets While Staying Modular
    • SASS Partials @import “base”; @import “layout”; @import “navigation”; @import “widget”;
    • Make it Better with SASS ● Nest Media Queries ● Group All Module Styles Together
    • Media Queries .widget { width: 50%; } @media screen and (max-width: 600px) { width: 100%; }
    • Example: Zen 5.4
    • Don’t Panic!
    • Questions? Drupal.org Github Twitter } penguininja