{"id":15041523,"url":"https://github.com/nothingrandom/barebones","last_synced_at":"2025-04-14T20:22:38.390Z","repository":{"id":31530487,"uuid":"35095017","full_name":"nothingrandom/barebones","owner":"nothingrandom","description":"🎆 scss based starter for stylesheets, with utilities","archived":false,"fork":false,"pushed_at":"2023-09-22T17:07:13.000Z","size":172,"stargazers_count":7,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T08:41:24.154Z","etag":null,"topics":["barebones","breakpoints","css","palette","scss","scss-framework","scss-library","scss-mixins","stylesheets","utilities","utility"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/nothingrandom.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":"2015-05-05T11:21:05.000Z","updated_at":"2023-09-22T17:07:17.000Z","dependencies_parsed_at":"2022-09-24T22:11:47.214Z","dependency_job_id":null,"html_url":"https://github.com/nothingrandom/barebones","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingrandom%2Fbarebones","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingrandom%2Fbarebones/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingrandom%2Fbarebones/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingrandom%2Fbarebones/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nothingrandom","download_url":"https://codeload.github.com/nothingrandom/barebones/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952775,"owners_count":21188500,"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":["barebones","breakpoints","css","palette","scss","scss-framework","scss-library","scss-mixins","stylesheets","utilities","utility"],"created_at":"2024-09-24T20:46:11.702Z","updated_at":"2025-04-14T20:22:38.369Z","avatar_url":"https://github.com/nothingrandom.png","language":"SCSS","readme":"# barebones\n\u003e barebones is the starting point for stylesheets.\n\n## Installation\nUsing this project is fairly straight forward.\n\nJust drop the contents of the `scss` folder into your `stylesheet` folder and run either `yarn add browser-reset` or `npm install -save browser-reset` to also add my [browser-reset](https://github.com/nothingrandom/browser-reset) project\n\n### What this is\nThis project is a great starting point for writing clean, functional stylesheets using scss.\n\n#### Grid\nThis project includes [flexboxgrid](flexboxgrid.com) as a grid system. [Browser support](https://caniuse.com/#search=flexbox)\n\n#### Color Palettes\nI'm really good at creating a messy array of color variables. This palette system exists to \"fix\" that. Instead of using `$grey`, `$grey-light`, `$grey-lighter`, `$grey-lightest` you can break it down into categories. Your colors file will look a little like this\n\n```\n$palettes: (\n  grey: (\n    base: #808080,\n    light: #959595,\n    lighter: #b5b5b5,\n    lightest: #d5d5d5\n  ),\n);\n```\n\nAnd when you need to color something, you can just do this `color: palette(grey, light)`\n\n#### REM and EM\nThere's REM and EM pixel conversions. `font-size: em(16px)` becomes `1em`\n\n#### Font Family\nGoogling how to include a font package gets a bit irritating. Instead you can use the following syntax `@include font-face('Font Name', '/path/to/font', 400, normal);` and it will generate the font-face from `eot`, `eot?#iefix`, `woff` and `ttf. I use [FontPrep](https://github.com/briangonzalez/fontprep) to convert font files for this.\n\n#### Breakpoints\nModern web means supporting screen sizes of all sorts. I like to build mobile first, so that's the way my breakpoints work.\n\n```\n.class {\n  width: 100px;\n\n  @include breakpoint(md) {\n    width: 500px;\n  }\n\n  @include breakpoint(lg) {\n    width: 1000px;\n  }\n}\n```\n\nYou can find the variables for these in the `scss/_variables` file\n\n#### The rest\nI've done a fairly job of writing a lot of comments in the `scss/_utilities` file, so a quick read through will give a good overview of everything included\n\n\n### Wishlist (and issues)\nAny features you'd like to see? Any features don't work for you? Let me know with the issue tracker.\n\n### Recommendations\n\nI recommend that you use this [scss-lint](https://github.com/nothingrandom/scss-lint-default.yml) config to keep you code clean and tidy.\n\n----------\n\n##### _Made by [Benjamin Grant](http://nothingrandom.com) :)_\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingrandom%2Fbarebones","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnothingrandom%2Fbarebones","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingrandom%2Fbarebones/lists"}