{"id":17772592,"url":"https://github.com/jamesplease/responsive-stylus-mixins","last_synced_at":"2025-07-17T08:39:06.607Z","repository":{"id":57354852,"uuid":"60315604","full_name":"jamesplease/responsive-stylus-mixins","owner":"jamesplease","description":"Responsive mixins for Stylus","archived":false,"fork":false,"pushed_at":"2016-06-03T05:41:28.000Z","size":5,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-08T10:22:45.312Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/jamesplease.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":"2016-06-03T03:27:32.000Z","updated_at":"2021-05-07T15:44:03.000Z","dependencies_parsed_at":"2022-09-26T16:31:33.169Z","dependency_job_id":null,"html_url":"https://github.com/jamesplease/responsive-stylus-mixins","commit_stats":null,"previous_names":["jmeas/responsive-stylus-mixins"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jamesplease/responsive-stylus-mixins","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fresponsive-stylus-mixins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fresponsive-stylus-mixins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fresponsive-stylus-mixins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fresponsive-stylus-mixins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesplease","download_url":"https://codeload.github.com/jamesplease/responsive-stylus-mixins/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fresponsive-stylus-mixins/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265586046,"owners_count":23792844,"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-10-26T21:39:55.812Z","updated_at":"2025-07-17T08:39:06.588Z","avatar_url":"https://github.com/jamesplease.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# responsive-stylus-mixins\n\nResponsive mixins for Stylus\n\n### Installation\n\n```\nnpm install responsive-stylus-mixins\n```\n\nThen, wherever you define mixins for your Stylus:\n\n```styl\n@import 'path/to/responsive-stylus-mixins'\n```\n\nFrom that point on, you can use these mixins in your Stylus.\n\n### Motivation\n\nI find the media query API to be a bit clunky. The query needs to wrap the thing\nbeing styled, when I'd rather it be the other way around.\n\nResponsive states, to me, are similar to any other states of an element, like\na hover state. And I'd like to define them similarly, too. Wouldn't it be\nnice if you could do:\n\n```styl\n.my-thing\n  width 200px\n\n  +and-on-small-screens()\n    width 100%\n```\n\nThese mixins provide you with a similar API to the above.\n\n### Mixins\n\n#### `+respond-below( $width )`\n\nSpecify styling below `$width`. Useful if you want to, say, hide something\njust on a mobile device.\n\n```styl\n.my-thing\n  width 200px\n\n  +respond-below(600px)\n    width 100%\n```\n\n#### `+respond-above( $width )`\n\nSpecify styling above `$width`. Useful for targeting larger screens only.\n\n```styl\n.my-thing\n  width 100%\n\n  +respond-above(600px)\n    width 500px\n```\n\n#### `+respond-between( $minWidth, $maxWidth )`\n\nSpecifies styling that takes affect between the two provided widths.\n\n```styl\n.my-thing\n  width 200px\n\n  +respond-between(600px, 1000px)\n    display none\n```\n\n### Recommended Usage\n\nI often set breakpoints the for my app as variables. For instance, I might have:\n\n```styl\n$md-screen = 768px\n$lg-screen = 1080px\n```\n\nThen, I make it a habit to only use these specified breakpoints in the mixins.\nThis keeps the app's responsive aspects consistent and simple.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fresponsive-stylus-mixins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesplease%2Fresponsive-stylus-mixins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fresponsive-stylus-mixins/lists"}