component-styles
Awesome component style tool
Last updated 3 years ago by anichols .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install component-styles 
SYNC missed versions from official npm registry.

Component Styles v1.0.0

TODO: Add description

Installation

npm install component-styles

@import 'path/to/node_modules/component-styles'

Features

  1. Component
- [Nested component](#nested-component)
- [Sibling component (adjacent)](#sibling-component-adjacent)
- [Sibling component (general)](#sibling-component-general)
- [Child component (direct descendant)](#child-component-direct-descendant)
  1. Element
- [Sibling element (adjacent)](#sibling-element-adjacent)
- [Sibling element (general)](#sibling-element-general)
- [Child element (direct descendant)](#child-element-direct-descendant)
  1. Modifier
- [Parent modifier](#parent-modifier)
- [Component modifier](#component-modifier)
  1. Pseudo
- [Parent pseudo](#parent-pseudo)
- [Component pseudo](#component-pseudo)
  1. Utility

Component

Basic usage
+component('Button')
  // 1

+component('Panel', 'Card')
  // 2
.Button {
  /* 1 */
}
.Panel,
.Card {
  /* 2 */
}

Back to Features

Nested component
+component('Card')
  +component('Icon')
    // 1
.Card .Icon {
  /* 1 */
}

Back to Features

Sibling component (adjacent)
+component('Card')
  +sibling-component('Panel')
    // 1

  +sibling-component('Panel', 'Avatar')
    // 2
.Card + .Panel {
  /* 1 */
}
.Card + .Panel,
.Card + .Avatar {
  /* 2 */
}

Back to Features

Sibling component (general)
+component('Card')
  +general-sibling-component('Panel')
    // 1

  +general-sibling-component('Panel', 'Avatar')
    // 2
.Card ~ .Panel {
  /* 1 */
}
.Card ~ .Panel,
.Card ~ .Avatar {
  /* 2 */
}

Back to Features

Child component (direct descendant)
+component('Card')
  +child-component('Panel')
    // 1

  +child-component('Panel', 'Avatar')
    // 2
.Card > .Panel {
  /* 1 */
}
.Card > .Panel,
.Card > .Avatar {
  /* 2 */
}

Back to Features

Element

Basic usage
+component('Panel')
  +element('header')
    // 1

  +element('header', 'footer')
    // 2

  +element('footer')
    +element('text')
      // 3

  +element('header', 'footer')
    +element('text')
      // 4
.Panel-header {
  /* 1 */
}
.Panel-header,
.Panel-footer {
  /* 2 */
}
.Panel-footer-text {
  /* 3 */
}
.Panel-header-text,
.Panel-footer-text {
  /* 4 */
}

Back to Features

Sibling element (adjacent)
+component('Panel')
  +element('header')
    +sibling-element('footer')
      // 1

    +sibling-element('body', 'footer')
      // 2
.Panel-header + .Panel-footer {
  /* 1 */
}
.Panel-header + .Panel-body,
.Panel-footer + .Panel-footer {
  /* 2 */
}

Back to Features

Sibling element (general)
+component('Panel')
  +element('header')
    +general-sibling-element('footer')
      // 1

    +general-sibling-element('body', 'footer')
      // 2
.Panel-header ~ .Panel-footer {
  /* 1 */
}
.Panel-header ~ .Panel-body,
.Panel-footer ~ .Panel-footer {
  /* 2 */
}

Back to Features

Child element (direct descendant)
+component('Panel')
  +child-element('content')
    // 1

  +child-element('header', 'footer')
    // 2
.Panel > .Panel-content {
  /* 1 */
}
.Panel > .Panel-header,
.Panel > .Panel-footer {
  /* 2 */
}

Back to Features

Modifier

Basic usage
+component('Button')
  // 1
  +modifier('primary')
    // 2
    +modifier('active')
    // 3
  +modifier('warning', 'outline')
    // 4
.Button {
  /* 1 */
}
.Button.\*primary {
  /* 2 */
}
.Button.\*primary.\*active {
  /* 3 */
}
.Button.\*warning.\*outline {
  /* 4 */
}

Back to Features

Parent modifier
+component('Panel')
  +element('body')
    +element('list')
      +element('item')
        +element('icon')
          +parent-modifier('primary')
            // 1

          +parent-modifier('primary', 'outline')
            // 2
.Panel-body-list-item.\*primary .Panel-body-list-item-icon {
  /* 1 */
}
.Panel-body-list-item.\*primary.\*outline .Panel-body-list-item-icon {
  /* 2 */
}

Back to Features

Component modifier
+component('Panel')
  +element('body')
    +element('list')
      +element('item')
        +element('icon')
          +component-modifier('primary')
            // 1

          +component-modifier('primary', 'outline')
            // 2

          +modifier('awesome')
            +component-modifier('primary')
              // 3
.Panel.\*primary .Panel-body-list-item-icon {
  /* 1 */
}
.Panel.\*primary.\*outline .Panel-body-list-item-icon {
  /* 2 */
}
.Panel.\*primary .Panel-body-list-item-icon.\*awesome {
  /* 3 */
}

Back to Features

Pseudo

Basic usage
+component('Panel')
  +pseudo('hover')
    // 1
.Panel:hover {
  /* 1 */
}

Back to Features

Parent pseudo
+component('Panel')
  +element('header')
    +element('text')
      +parent-pseudo('hover')
        // 1
.Panel-header:hover .Panel-header-text {
  /* 1 */
}

Back to Features

Component pseudo
+component('Panel')
  +element('header')
    +element('text')
      +component-pseudo('hover')
        // 1
.Panel:hover .Panel-header-text {
  /* 1 */
}

Back to Features

Utility

+utility('hidden')
  // 1
#component-styles .\+hidden {
  /* 1 */
}

Back to Features

Current Tags

  • 1.0.1                                ...           latest (3 years ago)

2 Versions

  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 2
Last Day 1
Last Week 0
Last Month 1
Dependencies (6)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |