{"id":18974717,"url":"https://github.com/volverjs/style","last_synced_at":"2025-04-19T16:42:33.347Z","repository":{"id":45001446,"uuid":"513207183","full_name":"volverjs/style","owner":"volverjs","description":"Lightweight responsive CSS utility library to accompany @volverjs/ui-vue and static webpages as well.","archived":false,"fork":false,"pushed_at":"2025-03-06T07:12:12.000Z","size":1521,"stargazers_count":12,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-04-10T07:44:39.082Z","etag":null,"topics":["css","css-framework","design","sass","scss"],"latest_commit_sha":null,"homepage":"https://volverjs.github.io/style","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/volverjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-12T16:02:31.000Z","updated_at":"2025-02-26T16:28:36.000Z","dependencies_parsed_at":"2023-10-05T15:44:57.780Z","dependency_job_id":"d56e3a25-272d-411f-ad50-cf01d36df088","html_url":"https://github.com/volverjs/style","commit_stats":{"total_commits":237,"total_committers":7,"mean_commits":"33.857142857142854","dds":"0.42194092827004215","last_synced_commit":"3cbd7db955449f3a5846ac2b3add72e3f34ee2cc"},"previous_names":[],"tags_count":91,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/volverjs%2Fstyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/volverjs%2Fstyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/volverjs%2Fstyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/volverjs%2Fstyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/volverjs","download_url":"https://codeload.github.com/volverjs/style/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249223937,"owners_count":21232833,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-framework","design","sass","scss"],"created_at":"2024-11-08T15:16:02.129Z","updated_at":"2025-04-16T09:34:07.771Z","avatar_url":"https://github.com/volverjs.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n[![volverjs](public/volverjs-style.svg)](https://volverjs.github.io/style)\n\n## @volverjs/style\n\n`backgrounds` `border` `colors` `aspect ratios` `typography`\\\n`easings` `animations` `sizes` `borders` `z-indexes` `media-queries`\\\n`layout` `spacing` `flexbox` `grid` `custom properties` `scss`\n  \n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=volverjs_style\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=volverjs_style) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=volverjs_style\u0026metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=volverjs_style) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=volverjs_style\u0026metric=security_rating)](https://sonarcloud.io/summary/new_code?id=volverjs_style) [![Depfu](https://badges.depfu.com/badges/bb76a99db33bb40379950c71c172e7da/status.svg)](https://depfu.com) [![Depfu](https://badges.depfu.com/badges/bb76a99db33bb40379950c71c172e7da/overview.svg)](https://depfu.com/github/volverjs/style?project_id=38570)\n\n\u003cbr\u003e\n\nmaintained with ❤️ by\n\n\u003cbr\u003e\n\n[![8 wave](public/8wave.svg)](https://8wave.it)\n\n\u003cbr\u003e\n\n\u003c/div\u003e\n\n## Install\n\n```bash\n# pnpm\npnpm add @volverjs/style\n\n# yarn\nyarn add @volverjs/style\n\n# npm \nnpm i -s @volverjs/style\n```\n\n## Usage\n\n```scss\n/* css */\n@import '@volverjs/style';\n\n/* scss */\n@use '@volverjs/style/scss';\n```\n\nor cherry pick what you want\n\n```scss\n/* css */\n@import '@volverjs/style/reset';\n@import '@volverjs/style/props/layout';\n@import '@volverjs/style/utilities/layout';\n@import '@volverjs/style/components/vv-button';\n\n/* scss */\n@use '@volverjs/style/scss/reset';\n@use '@volverjs/style/scss/props/layout';\n@use '@volverjs/style/scss/utilities/layout';\n@use '@volverjs/style/scss/components/vv-button';\n```\n\n## Principles\n\n### 👌 Zero Specificity\n\nEverything is defined with *:where()* so you can override all definitions easily.\n\n### 🎨 Custom properties\n\nAll attributes have a [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (CSS variables) for easy theming.\n\n### 😱 Utility-first + BEM\n\nYou can style utility-first (with [tailwindcss](https://tailwindcss.com) syntax) and use components (*vv-\\** for ex. *vv-button*) written with [BEM](http://getbem.com/introduction/).\n\n## Basic personalization\n\n### Custom props\n\n```css\n@import '@volverjs/style';\n@import url('https://fonts.googleapis.com/css2?family=Open+Sans');\n\n:root {\n  /* custom color brand */\n  --color-brand-hue: 149deg;\n  --color-brand-saturation: 56%;\n  --color-brand-lightness: 53%;\n\n  /* custom font sans */\n  --font-sans: 'Open Sans', sans-serif;\n}\n```\n\n### SCSS\n\n```scss\n@use '@volverjs/style/scss/context' with (\n  // custom color brand \n  $color-brand: #45cb85,\n  //custom font sans\n  $font-family-sans: 'Open Sans', sans-serif\n);\n@use '@volverjs/style/scss';\n\n@import url('https://fonts.googleapis.com/css2?family=Open+Sans');\n```\n\n## Deep override\n\nAll components are written through SCSS maps.\nRoot attributes style the component, submaps *state*, *element*, and *modifier* generates BEM selectors.\n\n```scss\n@use 'sass:map';\n// import volverjs default settings, functions and mixins\n@use '@volverjs/style/scss/context';\n\n// override vv-button map\ncontext.$vv-button: map.deep-merge(\n  context.$vv-button,\n  (\n    // change default button background\n    background: #ddd,\n    state: (\n      hover: (\n        // change default button background on hover\n        background: #aaa\n      )\n    ),\n    modifier: (\n      // add a custom modifier\n      my-error: (\n        background: red\n      )\n    )\n  )\n);\n\n// import volverjs style\n@use '@volverjs/style/scss';\n```\n\n```html\n\u003cbutton type=\"button\" class=\"vv-button vv-button--my-error\"\u003eError\u003c/button\u003e\n```\n\n## Documentation\nTo learn more about `@volverjs/style`, check [its documentation](https://volverjs.github.io/style).\n\n## License\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvolverjs%2Fstyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvolverjs%2Fstyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvolverjs%2Fstyle/lists"}