{"id":27302407,"url":"https://github.com/steinathan/helper-css","last_synced_at":"2026-02-04T03:07:06.240Z","repository":{"id":143990227,"uuid":"278445208","full_name":"steinathan/helper-css","owner":"steinathan","description":"Common CSS helper classes. Needed often with plain Bootstrap.","archived":false,"fork":false,"pushed_at":"2017-06-02T19:58:25.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-12T02:39:04.247Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steinathan.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":"2020-07-09T18:48:53.000Z","updated_at":"2021-10-19T14:13:24.000Z","dependencies_parsed_at":"2024-06-12T08:56:08.147Z","dependency_job_id":"76ad0afe-d3d5-4dd9-bd8e-12cc83c9579d","html_url":"https://github.com/steinathan/helper-css","commit_stats":null,"previous_names":["steinathan/helper-css"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steinathan%2Fhelper-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steinathan%2Fhelper-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steinathan%2Fhelper-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steinathan%2Fhelper-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steinathan","download_url":"https://codeload.github.com/steinathan/helper-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248507253,"owners_count":21115563,"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":"2025-04-12T02:39:06.734Z","updated_at":"2026-02-04T03:07:06.171Z","avatar_url":"https://github.com/steinathan.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Helper CSS\n\nCommon CSS helper classes. Focus on missing padding and margin styles in Bootstrap 3.\n\n## Install\n\nInstall with Npm or Bower\n\n### npm\n\nTo install with npm run\n\n```\n$ npm install helper-css --save\n```\n\n### Bower\n\nTo install with Bower run\n\n```\n$ bower install helper-css --save\n```\n\n## Usage\n\nInclude `helper-css.min.css` style in your page and start using css helper classes.\n\n### CSS Helper Classes\n\nCSS helper classes cover four areas - margin, padding, text and general.\n\n#### CSS Helpers for margin and Padding\n\nAll _margin_ and _padding_ have properties for distances 0, 5, 10, 15, 20, 30, 40, 50, 60, 80, 100, 150 and 200 px.\n\nMargin classes starts with `m`, padding classes starts `p`. \n\nFollowing is the number that represents space in pixels and (optional) direction. Direction can be `top`, `lft`, `rgt` and `btm`.\n\nExample:\n\n* `m0`: assigns `margin: 0` property\n* `m50lft`: assigns `margin-left: 50px` property\n* `p10`: assigns `padding: 10px` property\n* `p20btm`: assigns `padding-bottom: 20px` property\n* `p10top p10btm m20rgt`: assigns `padding-top: 10px; padding-bottom: 10px; margin-right: 20px` property\n\n#### CSS Helpers for Text\n\nText CSS Helpers contain set of text styling classes for text display and size.\n\n*Text Display*\n\n* `text-strong`: assigns `font-weight: bold` property\n* `text-strike`: assigns `text-decoration: line-through` property\n\n*Text Size*\n\nText size can be adjusted by using `text-\u003csize\u003e` where `\u003csize\u003e` can take _t-shirt_ value: xs, s, m, l, xl, xxl.\n\n* `text-xs`: assigns `font-size: 70%` property\n* `text-s`: assigns `font-size: 85%` property\n* `text-m`: assigns `font-size: 100%` property\n* `text-l`: assigns `font-size: 115%` property\n* `text-xl`: assigns `font-size: 130%` property\n* `text-xxl`: assigns `font-size: 145%` property\n\n---\n\nAs any other classes, helper classes can be combined together.\n\n### Usage example:\n\nFor given `div` element:\n\n```\n\u003cdiv class=\"m0 p20top p10rgt p50btm p10lft text-s\"\u003e\n    ...\n\u003c/div\u003e\n```\n\noutput would be the same as:\n\n```\n\u003cdiv style=\"margin:0; padding: 20px 10px 50px 10px; font-size: 80%;\"\u003e\n    ...\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteinathan%2Fhelper-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteinathan%2Fhelper-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteinathan%2Fhelper-css/lists"}