Need help with csstyle?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

geddski
880 Stars 39 Forks Other 105 Commits 24 Opened issues

Description

MOVED TO https://github.com/csstyle/csstyle a modern approach for crafting beautifully maintainable stylesheets

Services available

!
?

Need anything else?

Contributors list

# 84,085
CSS
Shell
C
spine
83 commits
# 44,484
composa...
indenta...
CSS
Vue.js
7 commits
# 250,898
PHP
Shell
blade-t...
laravel...
2 commits
# 575,689
CSS
HTML
1 commit
# 512,153
CSS
HTML
1 commit
# 1,234
JavaScr...
Babel
package...
reactjs
1 commit
# 59,302
Laravel
PHP
tailwin...
laravel...
1 commit
# 63,807
Rails
Bootstr...
C++
C
1 commit
# 3,767
CSS
React
React N...
mdl
1 commit
# 533,219
PHP
Laravel
gists
Shell
1 commit
# 35,624
PHP
Laravel
Compose...
alfred
1 commit

csstyle

csstyle

Clean, simple, for styling the web.

Check out the docs and examples on csstyle.io

You can use csstyle with either Sass or postcss.

Getting Started

  1. Setup your project with either Sass or Postcss. If you're using Sass make sure you have the latest stable SASS (3.4).

  2. Add

    id="csstyle"
    to your html or body element. This is necessary so that components with their parts and options can nest indefinitely yet always be overridden by tweaks.
  3. Download csstyle from npm:

    npm install csstyle --save
    

    or from bower:

    bower install csstyle --save
    
  4. If you're using Sass, import into your stylesheets:

    scss
    @import 'csstyle';
    

If you're using postcss, add csstyle as a plugin:

js
postcss([require('postcss-nested'), require('csstyle')]);
Be sure to include postcss-nested and csstyle in that order.

Now you're set and can start creating components with options & parts, adding in tweaks as needed. Enjoy!

Customizing Styling Conventions

csstyle lets you change the style conventions to whatever suits your style.

Default Symbols

  • options
    :
    \--
  • parts
    :
    __
  • tweaks
    :
    \+
  • rootId
    :
    csstyle

With SASS

Override the defaults using SASS variables. -

options
:
$csstyle-option-symbol
-
parts
:
$csstyle-part-symbol
-
tweaks
:
$csstyle-tweak-symbol
-
rootId
:
$csstyle-root-id

Example:

scss
  $csstyle-part-symbol: '\\/';
  $csstyle-root-id: 'app';

With Postcss

Override the defaults by calling the cssytle function with an options object. -

options
:
optionSymbol
-
parts
:
partSymbol
-
tweaks
:
tweakSymbol
-
rootId
:
rootId

Example:

  require('../csstyle')({optionSymbol: '\\-', partSymbol: '\\/', rootId: 'app'})

IMPORTANT NOTE All characters besides

_
need to be escaped! However, if you are using dashes, only the first one needs to be escaped. Use two backslashes to properly escape. For example to use a forward slash to separate parts, set $csstyle-part-symbol to
\\/
. The generated CSS classes will then be escaped with a single backslash.

FAQ

Can I use this with Libsass?

Yes. Libsass version 3.2.0 or greater fully supports csstyle.

How do parts react to component states like hover?

In Sass you can append a

&
to a selector or pseudo-selector to have it applied to the parent context. So for example to have a
part
react when the
component
gets hovered:
@include component(capacitor){
  background: red;

@include part(flux){ background: orange; }

&:hover & { @include part(flux){ background: blue; } } }

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.