{"id":21525824,"url":"https://github.com/bkwld/stylus-library","last_synced_at":"2026-01-28T06:05:40.794Z","repository":{"id":44787780,"uuid":"46827591","full_name":"BKWLD/stylus-library","owner":"BKWLD","description":"Stylus utility mixins","archived":false,"fork":false,"pushed_at":"2022-02-17T04:19:33.000Z","size":58,"stargazers_count":7,"open_issues_count":4,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-05T10:02:05.681Z","etag":null,"topics":["mixins","stylus","utilities"],"latest_commit_sha":null,"homepage":null,"language":"Stylus","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/BKWLD.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}},"created_at":"2015-11-25T00:39:05.000Z","updated_at":"2022-05-14T06:45:13.000Z","dependencies_parsed_at":"2022-09-19T07:13:06.651Z","dependency_job_id":null,"html_url":"https://github.com/BKWLD/stylus-library","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fstylus-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fstylus-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fstylus-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fstylus-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BKWLD","download_url":"https://codeload.github.com/BKWLD/stylus-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085008,"owners_count":20395523,"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":["mixins","stylus","utilities"],"created_at":"2024-11-24T01:38:36.931Z","updated_at":"2026-01-28T06:05:40.713Z","avatar_url":"https://github.com/BKWLD.png","language":"Stylus","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bukwild Stylus Library\n\nComponents:\n\n- **index.styl** - The package.json `main`, this glob loads all mixins from the \"lib\" directory.  It also imports other stylus npm dependencies.  These dependencies are generally functions and mixins that have utility for all projects.\n- **lib/** - Contains .styl files that define functions / imports. None of these files should contain any css selectors.  Read the comments within the individual files for details.\n- **boilerplate.styl** - CSS rules that are intended to be loaded after a CSS reset or normalize on a project.  Essentially, this is a set of global Bukwild conventions.\n\n## Settings\n\nSee [index.styl](index.styl) for some default vars.\n\n## Recommendations\n\n- Install https://github.com/WICG/focus-visible\n\n## Examples\n\n#### Fluid\n\n`fluid()` uses media queries + viewport units to scale property values between an upward and lower limit as the viewport is resized.\n\n```styl\n.btn\n  fluid padding, 20\n```\n\nPadding will be 20px when the viewport is 1440px wide (`fluid-default-max-break`) and 14px (`fluid-auto-min-size-factor`) when the viewport is 375px wide (`fluid-default-min-break`), linearly interpolated in between.\n\n```styl\n.btn\n  fluid padding, 20, 10\n```\n\nPadding will be 20px when the viewport is 1440px wide and **10px** when the viewport is 375px wide, linearly interpolated in between.\n\n```styl\n.btn\n  fluid(padding, 20, 10, min-break: 768px)\n```\n\nPadding will be 20px when the viewport is 1440px wide and 10px when the viewport is **768px** wide, linearly interpolated in between.\n\n\n```styl\n.btn\n  fluid(padding, 20, 10, min-break: 768px, max-break: 1024px)\n```\n\nPadding will be 20px when the viewport is **1024px wide** and 10px when the viewport is 768px wide, linearly interpolated in between.\n\n\n```styl\nbody\n  fluid(--site-pad, 20, 10)\n.btn\n  padding calc(10px + var(--site-pad))\n```\n\nUse fluid to set a CSS custom variable that can be used inside of a `calc`.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fstylus-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkwld%2Fstylus-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fstylus-library/lists"}