0.1.17 • Published 4 months ago

@volverjs/style v0.1.17

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

volverjs

@volverjs/style

backgrounds border colors aspect ratios typography\ easings animations sizes borders z-indexes media-queries\ layout spacing flexbox grid custom properties scss

Quality Gate Status Maintainability Rating Security Rating Depfu Depfu

maintained with ❤️ by

8 wave

Install

# pnpm
pnpm add @volverjs/style

# yarn
yarn add @volverjs/style

# npm 
npm i -s @volverjs/style

Usage

/* css */
@import '@volverjs/style';

/* scss */
@use '@volverjs/style/scss';

or cherry pick what you want

/* css */
@import '@volverjs/style/reset';
@import '@volverjs/style/props/layout';
@import '@volverjs/style/utilities/layout';
@import '@volverjs/style/components/vv-button';

/* scss */
@use '@volverjs/style/scss/reset';
@use '@volverjs/style/scss/props/layout';
@use '@volverjs/style/scss/utilities/layout';
@use '@volverjs/style/scss/components/vv-button';

Principles

👌 Zero Specificity

Everything is defined with :where() so you can override all definitions easily.

🎨 Custom properties

All attributes have a custom properties (CSS variables) for easy theming.

😱 Utility-first + BEM

You can style utility-first (with tailwindcss syntax) and use components (*vv-* for ex. vv-button*) written with BEM.

Basic personalization

Custom props

@import '@volverjs/style';
@import url('https://fonts.googleapis.com/css2?family=Open+Sans');

:root {
  /* custom color brand */
  --color-brand-hue: 149deg;
  --color-brand-saturation: 56%;
  --color-brand-lightness: 53%;

  /* custom font sans */
  --font-sans: 'Open Sans', sans-serif;
}

SCSS

@use '@volverjs/style/scss/context' with (
  // custom color brand 
  $color-brand: #45cb85,
  //custom font sans
  $font-family-sans: 'Open Sans', sans-serif
);
@use '@volverjs/style/scss';

@import url('https://fonts.googleapis.com/css2?family=Open+Sans');

Deep override

All components are written through SCSS maps. Root attributes style the component, submaps state, element, and modifier generates BEM selectors.

@use 'sass:map';
// import volverjs default settings, functions and mixins
@use '@volverjs/style/scss/context';

// override vv-button map
context.$vv-button: map.deep-merge(
  context.$vv-button,
  (
    // change default button background
    background: #ddd,
    state: (
      hover: (
        // change default button background on hover
        background: #aaa
      )
    ),
    modifier: (
      // add a custom modifier
      my-error: (
        background: red
      )
    )
  )
);

// import volverjs style
@use '@volverjs/style/scss';
<button type="button" class="vv-button vv-button--my-error">Error</button>

Documentation

To learn more about @volverjs/style, check its documentation.

License

MIT

0.1.17

4 months ago

0.1.16

5 months ago

0.1.15

8 months ago

0.1.14

9 months ago

0.1.12

9 months ago

0.1.13

9 months ago

0.1.12-beta.21

9 months ago

0.1.12-beta.20

10 months ago

0.1.12-beta.17

1 year ago

0.1.12-beta.16

1 year ago

0.1.12-beta.19

12 months ago

0.1.12-beta.18

1 year ago

0.1.12-beta.15

2 years ago

0.1.12-beta.14

2 years ago

0.1.12-beta.11

2 years ago

0.1.12-beta.10

2 years ago

0.1.12-beta.13

2 years ago

0.1.12-beta.12

2 years ago

0.1.12-beta.9

2 years ago

0.1.12-beta.8

2 years ago

0.1.12-beta.7

2 years ago

0.1.11

2 years ago

0.1.11-beta.4

2 years ago

0.1.11-beta.2

2 years ago

0.1.11-beta.3

2 years ago

0.1.12-beta.6

2 years ago

0.1.12-beta.5

2 years ago

0.1.12-beta.2

2 years ago

0.1.12-beta.1

2 years ago

0.1.12-beta.4

2 years ago

0.1.12-beta.3

2 years ago

0.1.10

2 years ago

0.1.11-beta.1

2 years ago

0.1.10-beta.1

2 years ago

0.1.9

2 years ago

0.1.9-beta.1

2 years ago

0.1.9-beta.2

2 years ago

0.1.9-beta.5

2 years ago

0.1.9-beta.6

2 years ago

0.1.9-beta.3

2 years ago

0.1.9-beta.4

2 years ago

0.1.9-beta.9

2 years ago

0.1.9-beta.7

2 years ago

0.1.9-beta.8

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.4

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.2-beta.31

3 years ago

0.1.2-beta.30

3 years ago

0.1.2-beta.29

3 years ago

0.1.2-beta.28

3 years ago

0.1.2-beta.27

3 years ago

0.1.2-beta.26

3 years ago

0.1.2-beta.25

3 years ago

0.1.2-beta.24

3 years ago

0.1.2-beta.23

3 years ago

0.1.2-beta.22

3 years ago

0.1.2-beta.21

3 years ago

0.1.2-beta.20

3 years ago

0.1.2-beta.19

3 years ago

0.1.2-beta.18

3 years ago

0.1.2-beta.17

3 years ago

0.1.2-beta.16

3 years ago

0.1.2-beta-14

3 years ago

0.1.2-beta-13

3 years ago

0.1.2-beta-12

3 years ago

0.1.2-beta.11

3 years ago

0.1.2-beta.10

3 years ago

0.1.2-beta.9

3 years ago

0.1.2-beta.8

3 years ago

0.1.2-beta.7

3 years ago

0.1.2-beta.6

3 years ago

0.1.2-beta.5

3 years ago

0.1.2-beta.3

3 years ago

0.0.0

3 years ago