{"id":15011630,"url":"https://github.com/ifycode-experiments/less-css-helper-library","last_synced_at":"2025-10-03T20:32:02.148Z","repository":{"id":52823189,"uuid":"350570486","full_name":"Ifycode-experiments/less-css-helper-library","owner":"Ifycode-experiments","description":"Helper library for css, less and frontend projects. Built-in css styles are stored in classes for reuse.","archived":true,"fork":false,"pushed_at":"2021-10-19T12:51:15.000Z","size":434,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-17T10:45:09.857Z","etag":null,"topics":["css-framework","css-library","less-css","less-framework","library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@code-collabo/less-css-helper-library","language":"Less","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ifycode-experiments.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-23T03:42:51.000Z","updated_at":"2023-04-07T05:34:44.000Z","dependencies_parsed_at":"2022-08-17T15:45:35.801Z","dependency_job_id":null,"html_url":"https://github.com/Ifycode-experiments/less-css-helper-library","commit_stats":null,"previous_names":["code-collabo/less-css-helper-library"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ifycode-experiments%2Fless-css-helper-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ifycode-experiments%2Fless-css-helper-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ifycode-experiments%2Fless-css-helper-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ifycode-experiments%2Fless-css-helper-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ifycode-experiments","download_url":"https://codeload.github.com/Ifycode-experiments/less-css-helper-library/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235184549,"owners_count":18949260,"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-framework","css-library","less-css","less-framework","library"],"created_at":"2024-09-24T19:41:21.972Z","updated_at":"2025-10-03T20:32:01.784Z","avatar_url":"https://github.com/Ifycode-experiments.png","language":"Less","readme":"|IMPORTANT NOTICE|\n|--|\n|Hi, contribute to the [styles-library](https://github.com/code-collabo/styles-library) instead, which will replace this less-css-helper-library. The scss-library is still in development. Collabo style-library repo/project will contain both SCSS and LESS and also be production suitable. You could also help with [documentation](https://code-collabo.gitbook.io/scss-helper-library/). |\n\n# less-css-helper-library\n\n\n![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat) ![GitHub Repo stars](https://img.shields.io/github/stars/code-collabo/less-css-helper-library) ![GitHub forks](https://img.shields.io/github/forks/code-collabo/less-css-helper-library) ![GitHub issues](https://img.shields.io/github/issues/code-collabo/less-css-helper-library?color=red) ![GitHub pull requests](https://img.shields.io/github/issues-pr/code-collabo/less-css-helper-library?color=goldenrod)\n\n\nThe [less-css-helper-library](https://github.com/code-collabo/less-css-helper-library) for css, less and frontend projects. Related (css) key value pairs often used together are stored in css classes for easy use, reuse and to help quickly structure your projects. ***Built-in css styles*** are made accessible in your projects just by adding a class to an html element.\n\n \n## Styles \u0026 classes\nThe library provides some [reset styles](https://github.com/code-collabo/less-css-helper-library/blob/main/less/01-base/reset.less) and classes which you can apply on html elements.\n\n#### [display-related](https://github.com/code-collabo/less-css-helper-library/blob/main/less/02-style/display.less) classes:\n* `.block` \n* `.block-auto`\n* `.b-container` \n* `.grid`\n* `.grid-auto-1-auto-row` \n* `.flex` \n* `.flex-auto` \n* `.flex-space-btw` \n* `.flex-space-btw-auto` \n* `.flex-center` \n* `.flex-j-center` \n* `.flex-a-center` \n* `.x-auto` \n* `.img-wrapper` \n* `.img-wrapper-rounded` \n* `.img-default`\n\n#### [Color-related](https://github.com/code-collabo/less-css-helper-library/blob/main/less/02-style/color.less) classes:\n***Note:*** _Color-related classes may not necessarily use built-in values_. For now, only class names for text \u0026 buttons are included based on common trend.\n* `.error`\n* `.error-bold`\n* `.btn-default`\n* `.btn-transparent`\n* `.btn-danger`\n \n## How to use\nInstall the npm package or use the cdn option.\n\n#### Install [npm package](https://www.npmjs.com/package/@code-collabo/less-css-helper-library):\n`npm i @code-collabo/less-css-helper-library`\n\nReference the library in your project with:\n\n`node_modules/@code-collabo/less-css-helper-library/css/styles.css` - _For css project_.\n\n`node_modules/@code-collabo/less-css-helper-library/less/styles.less` - _For less project_.\n\nYou can just _reference both_ in case you need to switch from `css` to `less` \u0026 vice versa. Make sure to add the reference(s) before that of your own css and/or less files.\n\nIf you are using less in an angular project for example, reference the one for less or both in the styles array in your angular.json file. You also need to import it at the top of your main .less file like so:\n\n`@import 'node_modules/@code-collabo/less-css-helper-library/less/styles.less';`\n\n#### Using CDN:\nFor projects that don't use nodejs, add the css cdn as href value for your link tag in the .html file. Make sure to add this before the other link tags used to reference your own css styles.\n\n`\u003clink rel=\"stylesheet\" href=\"https://code-collabo.github.io/less-css-helper-library/css/styles.css\"\u003e`\n\n#### Class names:\nFrom the class names, it's easy to tell what they do. See effect when added to an html element below:\n* `.block` only sets display to block.\n* `.grid` only sets display to grid. \n* `.flex` only sets display to flex.\n* `.flex center` sets display to flex, justify-content \u0026 align-items are set to center. \n* `.flex-j-center` only sets display to flex \u0026 justify-content to center.\n* `.flex-a-center` only sets display to flex \u0026 justify-content to center.\n* `.flex-space-btw` sets display to flex \u0026 justify-content to space-between.\n* Class names with ***suffix*** `-auto` uses same styles as their look-alikes above, but make use of `margin: 0 auto;`. When applied on an element (with width changed to less than 100%), the element is horizontally centered. \n* `.b-container` uses same style as `block-auto`, but with width set \u0026 is ***responsive*** already. To be used on the body element or html element(s) acting as outermost containers.\n* ***Exception:*** `x-auto` sets overflow to auto.\n* `.grid-auto-1-auto-row` sets display to grid, grid-template-rows to `auto 1fr auto`, grid-template-columns to `1fr` \u0026 also sets the height of the element to 100%.\n* `.img-wrapper` has same qualities of `.flex-center`, but with overflow set to hidden - to be used on the parent of an `img` element.\n* `.img-wrapper-rounded` has same qualities of `.img-wrapper` but with border-radius set to 50% - to be used on the parent of an `img` element.\n* `.img-default` is same as our [reset style](https://github.com/code-collabo/less-css-helper-library/blob/main/less/01-base/reset.less) for images. It sets an `img` element's max-width to 100% and height to auto. ***Note:*** An `img` element inside a parent that uses `.img-wrapper` or `.img-wrapper-rounded` must be set to the reset style, therefore always add the `.img-default` class to such img element.\n* `.error` and `.error-bold` are for text, while other color-related classes are for buttons.\n\nYou have total control over what the width of the element (and margin in the case of `-auto`) should be. More details \u0026 tutorial coming soon on this topic.\n\n## How to contribute\nThe library is maintained by just one person at the moment - [@Ifycode](https://github.com/Ifycode). Meaning that more features will be added only when needed. If you like and have started using the library in your projects but doesn't contain what you need (yet), you can help speed up the process by raising it as an issue or send a pull request. \n\n***Please take note of the following:***\n* Group property-value pairs that are related or are often used together in one class so that it is reusable.\n* The styles or classes (names) you propose must give good idea of the property-value pairs stored in it. \n* Styles or classes proposed must be usable in any section inside the body of html documents.\n* Do not make changes directly in the `main` or `develop` branches. See [development environment \u0026 git workflow](https://github.com/code-collabo/node-mongo-docs/issues/2) on how to make changes to the code base and submit pull request.\n\n## Technologies\n[\u003cimg alt=\"CSS 3\" width=\"25px\" src=\"https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/css/css.png\" /\u003e](https://github.com/code-collabo/less-css-helper-library) [\u003cimg alt=\"less\" height=\"20px\" src=\"http://lesscss.org/public/img/less_logo.png\" /\u003e](https://github.com/code-collabo/less-css-helper-library) [\u003cimg alt=\"node js\" height=\"25px\" src=\"https://nodejs.org/static/images/logos/nodejs-new-pantone-black.svg\" /\u003e](https://github.com/code-collabo/less-css-helper-library)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fifycode-experiments%2Fless-css-helper-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fifycode-experiments%2Fless-css-helper-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fifycode-experiments%2Fless-css-helper-library/lists"}