{"id":15041512,"url":"https://github.com/trykickoff/scss","last_synced_at":"2025-04-14T20:21:00.843Z","repository":{"id":35529143,"uuid":"39799976","full_name":"TryKickoff/scss","owner":"TryKickoff","description":"SCSS source for Kickoff ","archived":false,"fork":false,"pushed_at":"2017-06-07T15:53:40.000Z","size":102,"stargazers_count":13,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T15:03:54.108Z","etag":null,"topics":["kickoff","scss","scss-framework"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TryKickoff.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","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":"2015-07-27T21:59:43.000Z","updated_at":"2025-01-16T07:46:42.000Z","dependencies_parsed_at":"2022-09-08T15:23:18.105Z","dependency_job_id":null,"html_url":"https://github.com/TryKickoff/scss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TryKickoff%2Fscss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TryKickoff%2Fscss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TryKickoff%2Fscss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TryKickoff%2Fscss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TryKickoff","download_url":"https://codeload.github.com/TryKickoff/scss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952344,"owners_count":21188427,"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":["kickoff","scss","scss-framework"],"created_at":"2024-09-24T20:46:11.041Z","updated_at":"2025-04-14T20:21:00.820Z","avatar_url":"https://github.com/TryKickoff.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kickoff Sass (.scss) source\n\u003e Find out more at http://trykickoff.com/learn/css.html\n\n### The purpose of this repo is to separate the main CSS framework from the main kickoff repo. This is so that the CSS can be included into any project regardless of project type i.e. a React/Angular/Vue/Drupal/etc/etc project.\n\nKickoff's CSS framework is based on Sass, and this repo does not deal with compilation, only the source files.\n\n## Installation\n\n```sh\nnpm install -S @kickoff/scss\n\n# or\n\nyarn add @kickoff/scss\n```\n\n### Install the dependencies alongside the scss source\nThis might be useful if you want to update some of the 3rd party Sass dependencies (like our utils or include-media) and not Kickoff's scss source.\n\n```sh\nnpm install -S @kickoff/scss kickoff-utils.scss kickoff-grid.css kickoff-fluidVideo.css include-media normalize.css\n\n# or\n\nyarn add @kickoff/scss kickoff-utils.scss kickoff-grid.css kickoff-fluidVideo.css include-media normalize.css\n```\n\n### Copy to your project directory\nOnce installed, copy the `node_modules/@kickoff/scss` directory to your main project directory\n\n## Dependencies\n### Kickoff's external Sass modules\n* [kickoff-utils.scss](https://github.com/TryKickoff/kickoff-utils.scss) - Kickoff's Sass utility functions and mixins\n* [kickoff-grid.css](https://github.com/TryKickoff/kickoff-grid.css) - our Sass grid framework\n* [kickoff-fluidVideo.css](https://github.com/TryKickoff/kickoff-fluidVideo.css) - Simple fluid-width videos using only CSS\n\n### 3rd party Sass modules\n* [include-media](https://include-media.com) is used for improved media queries, [see below](#media-queries) for more about this\n* [normalize.css](https://github.com/JohnAlbin/normalize-scss) - Normalize.css is now imported using a Sass port of the library\n\n### Important Sass files\n\nIt’s important to become familiar with **all of these files** so you can make full use of the framework.\n\n#### [kickoff.scss](https://github.com/TryKickoff/scss/blob/master/kickoff.scss)\nAll roads lead to here. This is the base SCSS file and is the hook by which Grunt compiles the projects CSS. `kickoff.scss` is compiled to `/assets/dist/css/kickoff.css` and is used on Internet Explorer 9+, Chrome, Safari, Firefox and Opera.\n\n#### [_global.scss](https://github.com/TryKickoff/scss/blob/master/_global.scss)\nThis file contains all styles that do not obviously fit within any other scss partial. For example, we include our body's background styles and the main `.l-container` styles. **Try not to fill this up with all your styles though.** Your Sass should be written in a modular way, and so the majority of your Sass should be organised within the `components`, `partials` or `views` directories.\n\n#### [_helper-classes.scss](https://github.com/TryKickoff/scss/blob/master/_helper-classes.scss)\nThis file contains a bunch of helper styles, like `.clearfix` (for clearing floats), `.ir` for using background image replacement, `.is-hidden` etc.\n\n## Sass Variables\nWe take full advantage of Sass' variables and there are two key files that should be edited at the start of development on any new Kickoff project. These are `scss/_variables.scss` and `scss/_color-palette.scss`.\n\n#### [_variables.scss](https://github.com/TryKickoff/scss/blob/master/_variables.scss)\nThis is where you define your global Sass variables. Here you can define your:\n\n* **Global typographic styles** — including font choices and typographic scale.\n* **Responsive breakpoints** — we try not to target specific devices or device types with these variables.  Instead they should be set with the design in mind. The `$breakpoints` sass map, contains our default breakpoints, these are used by the grid and can be referenced by using the `bp(mid)` sass function. See how to use the breakpoints when using our mixins, [below](#responsive).\n\n#### [_color-palette.scss](https://github.com/TryKickoff/scss/blob/master/_color-palette.scss)\nText colour, link colours, background colour, form fields and various component colours can all be set in this file.\n\n\u003chr class=\"sectionSplitter\"\u003e\n\u003ca name=\"usefulclasses\"\u003e\u003c/a\u003e\n\n## Useful CSS classes \u0026 styles\n\n* `.l-container`: found in `/assets/src/scss/_global.scss`, this class controls the main content 'column' on your site.\n* `.btn`: found in `/assets/src/scss/components/_buttons.scss` for buttons. See the possible modifiers on the [components demo page](/demos/components.html#buttons)\n* Anchor links (`a`) are styled in `/assets/src/scss/components/_links.scss`\n* `.l-mb0` or `.l-mt0`: for zeroing any `margin-bottom/top` values. See also the other helper classes in `/assets/src/scss/_helper-classes.scss`\n* `.clearfix`: for clearing floats. See also the other helper classes in `/assets/src/scss/_helper-classes.scss`\n* `.h1`, `.h2`, `.h3`, `.h4`: font-sizing helper classes for headings\n\n\u003chr class=\"sectionSplitter\"\u003e\n\u003ca name=\"responsive\"\u003e\u003c/a\u003e\n\n## Responsive\nKickoff does not enforce a mobile first approach to CSS, but it is encouraged and it takes a fairly unique approach to responsive sites.\n\n### Media queries\n#### Media queries v8.0.0 and above\n**Kickoff v8.0.0 introduced a new mixin library to handle media-queries**. This library, [include-media](http://include-media.com/) allows for a more simple syntax and better control of media-queries. There is just one mixin call that takes a few different options:\n\n#### Example\n```scss\n// The keywords below are from the $breakpoints map in _variables.scss\n\n// Equivalent to min-width query\n@include media(\"\u003emid\") {\n\twidth: 50%;\n}\n\n// Equivalent to min-width and max-width query\n@include media(\"\u003enarrow\", \"\u003c=wide\") {\n\twidth: 50%;\n}\n\n// Equivalent to min-width\n@include media(\"\u003e200px\") {\n\twidth: 50%;\n}\n```\n\n#### Better media query example\nRather than having all of your media queries for different widths stored in separate scss files or placed at the bottom of each SCSS partial, we suggest making use of Sass' nested media queries.\n\nThis means that all styles related to an element are together, for example:\n\n```scss\na {\n\tpadding: 1em;\n\n\t@include media('\u003e800') {\n\t\tpadding: 2em;\n\t}\n}\n```\n\n## CSS Naming scheme\nKickoff uses a bespoke naming scheme for classnames, inspired loosely by the [BEM naming scheme](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).\n\nThis obviously isn’t compulsory to use in your own Kickoff projects, but is documented here as guidance, and is what we use across our Kickoff projects.\n\n```scss\n/* Descriptors use camel-casing if more than one word: e.g. twoWords */\n.form {\n\t...\n}\n\n/* ========= */\n\n/* Child elements use single hyphens: - */\n.form-controlGroup {\n\t...\n}\n\n/* ========= */\n\n/* Modifier element use a double hyphen: -- */\n.form {\n\t...\n}\n.form--horizontal {\n\t...\n}\n\n/* ========= */\n\n/* Element state: .is- or .has- */\n.is-active {\n\t...\n}\n\n/* ========= */\n\n/* Sass variables use dash-case */\na {\n\tcolor: $color-primary;\n}\n```\n\n---\n\n### Elements, components, partials \u0026 views\nWe use a similar philosophy to [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) but instead of atoms, molecules, organisms \u0026 templates we use elements, components, partials \u0026 views; below is out distinction.\n\n#### Elements\nElements are single elements.\n\n#### Components\nComponents are small, self-contained files that concern one type of thing, that crucially, are reusable. For example, lists, forms etc. We have included quite a few in the [components](https://github.com/TryKickoff/scss/blob/master/components/) directory: [buttons](https://github.com/TryKickoff/scss/blob/master/components/_buttons.scss) \u0026 [forms](https://github.com/TryKickoff/scss/blob/master/components/_forms.scss) for example, but you should add your components there too. Please [browse through](https://github.com/TryKickoff/scss/blob/master/components/) the included components to see what Kickoff offers, or see some of them in action in our [demo area](../demos/).\n\n#### Partials\nPartials are partial parts of a page, like a masthead, sidebar or footer. They typically have multiple 'components' inside them and can also be reusable. The [partials](https://github.com/TryKickoff/scss/blob/master/partials/) directory should contain style partials, like `_footer.scss` or `_masthead.scss`.\n\n#### Views\nUsed for entire views (or pages). Usually these files consist of small tweaks that only concern a particular view. The [views](https://github.com/TryKickoff/scss/blob/master/views/) directory should contain view-specific styles that don't fit into their own module, think `_home.scss` or `_recipe-page.scss` for example. **N.b.** We recommend that it is better to make reusable components rather than styling based on a view.  Therefore, the styles in this folder *should* be minimal.\n\n### Mixins \u0026 Functions\nWe make use of a lot of these, but they are not stored within the repo. Please visit [github.com/TryKickoff/kickoff-utils.scss](https://github.com/TryKickoff/kickoff-utils.scss) to find out more about them. If you need your own, please create a relevant `functions` or `mixins` directory for whichever you need.\n\n---\n\n## Upgrade path\nAs with anything Kickoff-related, it can be tricky to upgrade because this dependency shouldn't be treated like standard dependencies, it should be treated as another part of your codebase. With that in mind, updating to a newer version of this should be done with great care because local changes will be overwritten by the new update. Remember that after each update, you will need to copy these files into your project directory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrykickoff%2Fscss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrykickoff%2Fscss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrykickoff%2Fscss/lists"}