{"id":15583857,"url":"https://github.com/rushenn/css-responsive-display-utilities","last_synced_at":"2025-03-29T08:43:58.745Z","repository":{"id":167002532,"uuid":"195277966","full_name":"rushenn/css-responsive-display-utilities","owner":"rushenn","description":"Responsive CSS display classes to show/hide elements","archived":false,"fork":false,"pushed_at":"2019-07-07T18:01:17.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-05T03:18:15.055Z","etag":null,"topics":["css","css-classes","css-display-utlities","media-query","responsive-classes"],"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/rushenn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2019-07-04T17:11:16.000Z","updated_at":"2022-06-11T06:11:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"c41a1ae1-6d16-4724-b4ef-a972f41fedea","html_url":"https://github.com/rushenn/css-responsive-display-utilities","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"7a8b9fa8c19d2ae9c94d9249c27afba09275cb6b"},"previous_names":["rushenn/css-responsive-display-utilities"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rushenn%2Fcss-responsive-display-utilities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rushenn%2Fcss-responsive-display-utilities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rushenn%2Fcss-responsive-display-utilities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rushenn%2Fcss-responsive-display-utilities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rushenn","download_url":"https://codeload.github.com/rushenn/css-responsive-display-utilities/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246162109,"owners_count":20733354,"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-classes","css-display-utlities","media-query","responsive-classes"],"created_at":"2024-10-02T20:21:32.514Z","updated_at":"2025-03-29T08:43:58.725Z","avatar_url":"https://github.com/rushenn.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Responsive Display Utilities\nResponsive CSS display utility classes to show/hide content by device via media query.\n\n## Installation\n```bash\n$ npm install css-responsive-display-utilities --save\n```\n## Usage\n\nTo use css-responsive-display-properties in your website, simply load the stylesheet in to your website's `\u003chead\u003e`\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"css-responsive-display-utilities.min.css\"\u003e\n\u003c/head\u003e\n```\n\nand use required CSS class with any elements.\n\n```html\n\u003cdiv class=\"h-sm\"\u003e\n  Stay hidden when the screen size is in between 576px - 768px\n\u003c/div\u003e\n```\n\n## Available classes\n\n### Hidden Classes\n\n| Type        | Class    | Description            |\n|-------------|--------------|------------------------|\n| Hidden      | `.h-xs`      | Hidden only on xs      |\n|             | `.h-sm`      | Hidden only on sm      |\n|             | `.h-md`      | Hidden only on md      |\n|             | `.h-lg`      | Hidden only on lg      |\n|             | `.h-xl`      | Hidden only on xl      |\n| Hidden Up   | `.h-sm-up`   | Hidden on sm and above |\n|             | `.h-md-up`   | Hidden on md and above |\n|             | `.h-lg-up`   | Hidden on lg and above |\n|             | `.h-xl-up`   | Hidden on xl and above |\n| Hidden Down | `.h-sm-down` | Hidden on sm and below |\n|             | `.h-md-down` | Hidden on md and below |\n|             | `.h-lg-down` | Hidden on lg and below |\n|             | `.h-xl-down` | Hidden on xl and below |\n\n### Visible Classes\n\n| Type         | CSS Class                                                   | Description             |\n|--------------|-------------------------------------------------------------|-------------------------|\n| Visible      | `.v-xs-[block \\| inline-block \\| flex \\| inline-flex]`      | Visible only on xs      |\n|              | `.v-sm-[block \\| inline-block \\| flex \\| inline-flex]`      | Visible only on sm      |\n|              | `.v-md-[block \\| inline-block \\| flex \\| inline-flex]`      | Visible only on md      |\n|              | `.v-lg-[block \\| inline-block \\| flex \\| inline-flex]`      | Visible only on lg      |\n|              | `.v-xl-[block \\| inline-block \\| flex \\| inline-flex]`      | Visible only on xl      |\n| Visible Up   | `.v-sm-up-[block \\| inline-block \\| flex \\| inline-flex]`   | Visible on sm and above |\n|              | `.v-md-up-[block \\| inline-block \\| flex \\| inline-flex]`   | Visible on md and above |\n|              | `.v-lg-up-[block \\| inline-block \\| flex \\| inline-flex]`   | Visible on lg and above |\n|              | `.v-xl-up-[block \\| inline-block \\| flex \\| inline-flex]`   | Visible on xl and above |\n| Visible Down | `.v-sm-down-[block \\| inline-block \\| flex \\| inline-flex]` | Visible on sm and below |\n|              | `.v-md-down-[block \\| inline-block \\| flex \\| inline-flex]` | Visible on md and below |\n|              | `.v-lg-down-[block \\| inline-block \\| flex \\| inline-flex]` | Visible on lg and below |\n|              | `.v-xl-down-[block \\| inline-block \\| flex \\| inline-flex]` | Visible on xl and below |\n\n## License\n\nCSS Responsive Display Utilities is licensed under the MIT license. (http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frushenn%2Fcss-responsive-display-utilities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frushenn%2Fcss-responsive-display-utilities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frushenn%2Fcss-responsive-display-utilities/lists"}