v1.0.5

Changelog

Fix an edge case with BEM mixins where using a pseudo-element selector within a modifier would generate the wrong class for the nested elements.

---

@include b('block') {
  @include m('highlighted:nth-child(2n)') {
      @include e('item') {
        background-color: color(border, light);
      }
  }

// SAME AS

@include b('block') {
  @include m('highlighted') {
    &:nth-child(2n)') {
      @include e('item') {
        background-color: color(border, light);
      }
    }
  }

Before
The generated class name for the item element: .block--highlighted:nth-child(2n) .block--highlighted__item is wrong.

After
The class .block--highlighted:nth-child(2n) .block__item is properly returned for the edge case defined above.

v1.0.2

Changelog

• Update scss linter gem and settings
• Fix color function bug where passing an unknown value would return the colors map instead of the actual param value
• Fix bug where disabled button styles would override the current styles instead of extending on top of them
• Prevent overriding border style on button hover state, only change the border color

v1.0.0

Changelog

What's New

• Simplified file structure (core, tools, global, components)
• Clearly define hierarchy based on component function and dependencies (core functions are standalone, tools only use core, global only use tools and core and so on.)
• Unified output where property values are returned by functions consistently, instead of combining functions and variables (e.g use radius(round) instead of $border-radius-rounded, or font(weight, bold) instead of $font-weight-bold / gutter() instead of $column-gutter or %gutter__all).
• Removed BEM naming conventions from base components to avoid confusion (e.g instead of modifiers like %row--middle we now have %row-middle)
• The only places where BEM structure is used are the more complex components like button-group or notifications, where we have to name specific elements like button-group__item or notification__action.
• Remove single-property 'atom' placeholders and allow everyone to call CSS property with a settings value as a param instead (this avoids creating an unnecessary abstraction) E.g %border__bottom is now border-bottom: 1px solid color(border);.
• None of the properties enforce a DOM structure, the placeholders are intended to be applied on any kind of format and markup
• New flex grid (%row and %col).
• Simplified buttons system that use only base, primary and secondary instead of success, warning, danger, info and inverted styles.

File structure

• Moved stylesheets into CORE, TOOLS, GLOBAL and COMPONENTS based on dependency
• Created a deprecated components graveyard, with code that is to be ported over to the apps
• Removed global variables, making all settings component-specific
• Removed external library dependencies (like font-awesome)

Component structure

• Follow the same content structure for each and every stylesheet:
  • Settings map / function to retrieve settings
  • Private and public mixins
  • Private placeholders
  • Exports mixin that encapsulates dynamically generated placeholders to avoid duplicating the logic in case of multiple inclusion

v0.9.24

Changelog

• Removed bower, neat and normalize dependencies
• Extracted font-awesome and Paint icon font into styles/dependencies

To upgrade from 0.9.23 to 0.9.24 you need to manually include bower_components/paint/styles/dependecies before the core in your paint-loader file.
To use with npm, you need to manually include dependencies like font-awesome and the paint-icons font.

v0.9.23

Changelog

• Update file structure to separate core, settings, tools, globals and components.
• Adds small tweaks to fix a couple of urgent specificity issues

v0.9.19

New Icons

v0.9.18

0.9.18

0.9.16

v0.9.16

Merge branch 'release/new-icons'

v0.9.14

Allow passing pseudo-selectors instead of modifiers

@include bem-block('pseudo-block') {
  &:hover {
    @include bem-element('element-name') {
      @include bem-modifier('element-modifier') { }
    }
  }
}

v0.9.11

Changelog

• Add functions to automatically generate formatted BEM class names
• Restructure functions into separate components
• Updates dependencies to the latest versions
• Fixes compilation bug by moving all styles to a single folder