{"id":21433088,"url":"https://github.com/beth3346/elr-scss-helpers","last_synced_at":"2025-07-14T13:30:46.202Z","repository":{"id":34247216,"uuid":"173795958","full_name":"Beth3346/elr-scss-helpers","owner":"Beth3346","description":"a collection of css helper classes","archived":false,"fork":false,"pushed_at":"2023-03-04T04:30:25.000Z","size":4863,"stargazers_count":3,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2024-11-06T16:52:10.178Z","etag":null,"topics":["css","css-framework","scss-mixins"],"latest_commit_sha":null,"homepage":"https://elr-scss-helpers.netlify.com","language":"HTML","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/Beth3346.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}},"created_at":"2019-03-04T18:07:51.000Z","updated_at":"2024-07-17T11:37:20.000Z","dependencies_parsed_at":"2023-02-18T13:00:32.924Z","dependency_job_id":null,"html_url":"https://github.com/Beth3346/elr-scss-helpers","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beth3346%2Felr-scss-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beth3346%2Felr-scss-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beth3346%2Felr-scss-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Beth3346%2Felr-scss-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Beth3346","download_url":"https://codeload.github.com/Beth3346/elr-scss-helpers/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225979049,"owners_count":17554682,"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-framework","scss-mixins"],"created_at":"2024-11-22T23:24:49.998Z","updated_at":"2024-11-22T23:24:50.663Z","avatar_url":"https://github.com/Beth3346.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Helpers\n\n[![npm version](http://img.shields.io/npm/v/elr-scss-helpers.svg)](https://www.npmjs.org/package/elr-scss-helpers)\n[![CI](https://github.com/Beth3346/elr-scss-helpers/actions/workflows/node.js.yml/badge.svg)](https://github.com/Beth3346/elr-scss-helpers/actions/workflows/node.js.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![npm](https://img.shields.io/npm/dm/elr-scss-helpers.svg?style=flat)](https://npmjs.com/package/elr-scss-helpers)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/2d768ae3-693a-40d5-b5e1-d5a53aa76bb5/deploy-status)](https://app.netlify.com/sites/elr-scss-helpers/deploys)\n[![last commit](https://img.shields.io/github/last-commit/Beth3346/elr-scss-helpers.svg)](https://github.com/Beth3346/elr-scss-helpers)\n\na library of sass mixins\n\n## Installation\n\nDownload node at [nodejs.org](http://nodejs.org) and install it, if you haven't already.\n\n```sh\nnpm install elr-scss-helpers\n```\n\nor\n\n```sh\nyarn add elr-scss-helpers\n```\n\n## Why\n\nThis package takes a more functional CSS approach to Scss. Using a\nScss mixin allows for easy configuration of your base styles to\nensure that your helpers will match the look and feel of your\nproject.\n\nWhich style you choose can depend a lot on your project and your\nneeds. A functional CSS approach is beneficial in situations where\nyou have a lot of control over your HTML/JSX/Pug... whatever you're\nusing to write markup that eventually becomes HTML. Especially if\nyou are using a component based framework.\n\nKeep in mind that adding non-semantic classes to your HTML will\nresult in tightly coupled markup. If your product manager tells you\nthat now all headlines should be green instead of blue using style\nclasses could make these updates tedious and time consuming. Its for\nthis reason that I will not include classes that apply hard coded\ncolor styles.\n\nUsing a more stylesheet based approach is useful when you don't\nnecessarily have control over your HTML. Like when you're working\nwith a CMS where HTML structure is set in stone or dictated by your\ncontent team.\n\nIts also beneficial to use a more stylesheet based approach when you\nare creating traditional HTML/CSS based applications without a\nframework. If you are not creating reusable components you likely\nhave a lot of HTML that repeats throughout your site. Using a\nstylesheet based approach with a BEM or similar CSS methodology will\nbe much easier to maintain down the road.\n\nI usually find myself using more of a hybrid of these 2 approaches.\nThough I'm leaning towards a more functional approach these days in\nmy React and Vue applications.\n\n## Whats with this \"elr\" prefix?\n\nI have added namespacing to avoid clashes with other frameworks. If\nyou don't like the 'elr' prefix or want to use a brand prefix you are free to change it. Don't make it too long though since you'll be typing it a lot.\n\n```scss\n@include elr-helper-classes(\n  $config: (\n    prefix: \"abc\",\n  )\n);\n```\n\n```html\n\u003cbutton class=\"abc-button\"\u003eButton\u003c/button\u003e\n```\n\n## Helper Classes\n\nThese classes allow for common styles.\n\n### Initialize Helpers\n\n#### Parameters:\n\n- link-color\n  - used for styling link elements\n- color\n  - used for styling text\n- border-radius\n  - used to style buttons\n- accent-color\n- button-color\n  - used to style default buttons\n\n```scss\n@import \"~elr-scss-helpers\";\n\n@include elr-helper-classes(\n  $config: (\n    link-color: blue,\n    color: white,\n    border-radius: 3px,\n    accent-color: green,\n    button-color: blue,\n  )\n);\n```\n\n### Buttons\n\nif you only want to add button helpers\n\n```scss\n@import \"~elr-scss-helpers\";\n@include elr-button-classes(\n  $config: (\n    background-color: blue,\n    border-radius: 3px,\n    width: 250px,\n    color: white,\n  )\n);\n```\n\n```html\n\u003cbutton class=\"elr-button\"\u003eButton\u003c/button\u003e\n```\n\n```html\n\u003cbutton class=\"elr-button-small\"\u003eButton\u003c/button\u003e\n```\n\n```html\n\u003cbutton class=\"elr-button-primary\"\u003eButton\u003c/button\u003e\n```\n\n```html\n\u003cbutton class=\"elr-button-pill\"\u003eButton\u003c/button\u003e\n```\n\n```html\n\u003cbutton class=\"elr-button-ghost\"\u003eButton\u003c/button\u003e\n```\n\n```html\n\u003cbutton class=\"elr-button elr-button-icon\"\u003e\n  \u003cdiv class=\"elr-icon\"\u003e\n    \u003ci class=\"fas fa-arrow-alt-circle-down\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n  \u003cspan class=\"elr-button-text\"\u003eDownload\u003c/span\u003e\n\u003c/button\u003e\n```\n\n```html\n\u003cbutton class=\"elr-button elr-button-icon\"\u003e\n  \u003cdiv class=\"elr-icon\"\u003e\n    \u003ci class=\"fas fa-arrow-alt-circle-down\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n\u003c/button\u003e\n```\n\n```html\n\u003cbutton class=\"elr-button elr-button-icon-round\"\u003e\n  \u003cdiv class=\"elr-icon\"\u003e\n    \u003ci class=\"fas fa-cat\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n\u003c/button\u003e\n```\n\n### Button Group\n\n```html\n\u003cdiv class=\"elr-button-group\"\u003e\n  \u003cbutton class=\"elr-button elr-button-primary elr-button-group-item\"\u003e\n    Button 1\n  \u003c/button\u003e\n  \u003cbutton class=\"elr-button elr-button-primary elr-button-group-item\"\u003e\n    Button 2\n  \u003c/button\u003e\n  \u003cbutton class=\"elr-button elr-button-primary elr-button-group-item\"\u003e\n    Button 3\n  \u003c/button\u003e\n  \u003cbutton class=\"elr-button elr-button-primary elr-button-group-item\"\u003e\n    Button 4\n  \u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Display\n\nif you only want to add display classes. classes for display: flex and display: grid are included in other mixins.\n\n```scss\n@import \"~elr-scss-helpers\";\n@include elr-display-classes;\n```\n\n```html\n\u003cspan class=\"elr-block\"\u003eBlock\u003c/span\u003e\n\u003cdiv class=\"elr-inline\"\u003eInline\u003c/div\u003e\n\u003cspan class=\"elr-inline-block\"\u003eInline Block\u003c/span\u003e\n\u003cspan class=\"elr-display-none\"\u003eThis will be hidden\u003c/span\u003e\n```\n\n### Flex\n\nif you only want to add flex classes\n\n```scss\n@import \"~elr-scss-helpers\";\n@include elr-flex-classes;\n```\n\n### Layout\n\nif you only want to add layout classes\n\n```scss\n@import \"~elr-scss-helpers\";\n@include elr-layout-classes;\n```\n\n### Positioning\n\nif you only want to add positioning classes\n\n```scss\n@import \"~elr-scss-helpers\";\n@include elr-positioning-classes;\n```\n\n### List\n\nif you only want to add list classes\n\n```scss\n@import \"~elr-scss-helpers\";\n@include elr-list-classes;\n```\n\n### Responsive\n\nif you only want to add responsive classes\n\n```scss\n@import \"~elr-scss-helpers\";\n@include elr-responsive-classes;\n```\n\n### Typography\n\nif you only want to add typography classes\n\n```scss\n@import \"~elr-scss-helpers\";\n@include elr-typography-classes;\n```\n\n### Background\n\nif you only want to add background classes\n\n```scss\n@import \"~elr-scss-helpers\";\n@include elr-background-classes;\n```\n\n## Action Helper Classes\n\nThese helper classes are more suited to interactive applications that need to provide a lot of feedback to\nviewers.\n\n## License\n\nSEE LICENSE IN LICENSE.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeth3346%2Felr-scss-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeth3346%2Felr-scss-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeth3346%2Felr-scss-helpers/lists"}