{"id":19142159,"url":"https://github.com/eldoy/vcss","last_synced_at":"2026-06-10T17:30:16.966Z","repository":{"id":57391148,"uuid":"329033472","full_name":"eldoy/vcss","owner":"eldoy","description":"Semantic and minimal CSS library","archived":false,"fork":false,"pushed_at":"2023-07-03T10:12:48.000Z","size":700,"stargazers_count":2,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T20:17:10.800Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/eldoy.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2021-01-12T15:42:49.000Z","updated_at":"2023-07-03T10:11:50.000Z","dependencies_parsed_at":"2024-09-26T16:13:14.653Z","dependency_job_id":null,"html_url":"https://github.com/eldoy/vcss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldoy%2Fvcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldoy%2Fvcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldoy%2Fvcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eldoy%2Fvcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eldoy","download_url":"https://codeload.github.com/eldoy/vcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240223207,"owners_count":19767594,"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":[],"created_at":"2024-11-09T07:26:08.473Z","updated_at":"2026-06-10T17:30:16.917Z","avatar_url":"https://github.com/eldoy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VCSS\n\nSemantic and minimal CSS library, only about 2.5Kb gzipped and minified.\n\nInspired by [marx](https://mblode.github.io/marx/) and [sanitize](https://csstools.github.io/sanitize.css/) but with extras:\n\n* Different defaults, more light weight\n* More SCSS variables and colors\n* Extra tag styles and utilities\n* Lots of tweaks and bug fixes\n* Mobile first\n\n[Check out the demo](https://eldoy.github.io/vcss/)\n\n### Usage\n\nIf you're using plain CSS you can just include the `dist/vcss-min.css` file.\n\nIf you're using SCSS:\n```bash\nnpm i vcss.css\n```\n\nand then include in app with:\n```scss\n@import '../node_modules/vcss.css/scss/vcss.scss`\n```\n\n### Variables\n\nHere's the list of available variables at the moment (as found in `scss/_variables.scss`):\n\n```scss\n// Colors\n$primary: #44f !default;\n$text: #111 !default;\n$white: #fff !default;\n$black: #000 !default;\n$light: #dfdfdf !default;\n$dark: #5a5a5a !default;\n$highlight: #ffa !default;\n$danger: #f55 !default;\n$line: #eaeaea !default;\n$disabled: #fafafa !default;\n$medium: #ccc !default;\n$preserve: #fafafa !default;\n$button: #efefef !default;\n$small: #999 !default;\n\n// Basic stylings\n$border: 1px solid $line !default;\n$border-radius: 4px !default;\n\n// Padding\n$xs-pad: 4px !default;\n$sm-pad: 8px !default;\n$md-pad: 16px !default;\n$lg-pad: 20px !default;\n$xl-pad: 40px !default;\n\n// Breakpoints\n$xl-breakpoint: 1140px !default;\n$lg-breakpoint: 960px !default;\n$md-breakpoint: 600px !default;\n$sm-breakpoint: 400px !default;\n$xs-breakpoint: 360px !default;\n\n// Links\n$link-color: $primary !default;\n$link-hover-color: darken($link-color, 10%) !default;\n\n// Buttons\n$button-background-color: $button !default;\n$button-border-radius: $border-radius !default;\n$button-color: $text !default;\n$button-padding: $sm-pad $md-pad !default;\n$button-border: 1px solid $medium !default;\n$button-font-size: 1rem !default;\n$button-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n$button-hover-background-color: darken($button, 7.5%) !default;\n$button-active-background-color: darken($button, 10%) !default;\n$button-focus-outline: 0 !default;\n$button-focus-shadow: 0 0 0 0.2rem fade_out($primary, 0.75) !default;\n$button-disabled-background-color: $button !default;\n\n// Forms\n$label-color: $dark !default;\n$label-font-size: 90% !default;\n$label-line-height: 2 !default;\n$input-border: 1px solid $medium;\n$input-focus-background-color: #fff !default;\n$input-focus-border-color: mix($primary, #fff) !default;\n$input-focus-outline: 0 !default;\n$input-focus-shadow: 0 0 0 0.2rem fade_out($primary, 0.75) !default;\n$input-outline: 1px thin $line !default;\n$input-disabled-background-color: $disabled !default;\n$input-readonly-background-color: $disabled !default;\n$input-invalid-border-color: darken($danger, 10%) !default;\n$input-invalid-color: $danger !default;\n$input-focus-invalid-outline-color: $danger !default;\n\n// Font\n$sans-serif: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\" !default;\n$serif: Georgia, Times, 'Times New Roman', serif !default;\n$monospace: Menlo, Monaco, Consolas, 'Courier New', monospace !default;\n$font-family: $sans-serif !default;\n\n// Typography\n$font-size: 16px !default;\n$font-size-small: ceil(($font-size * 0.85)) !default;\n$font-size-h1: 40px !default;\n$font-size-h2: 32px !default;\n$font-size-h3: 25px !default;\n$font-size-h4: 18px !default;\n$font-size-h5: 16px !default;\n$font-size-h6: 80% !default;\n$line-height: 1.6 !default;\n```\n\nMIT licensed. Enjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feldoy%2Fvcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feldoy%2Fvcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feldoy%2Fvcss/lists"}