{"id":13517052,"url":"https://github.com/seek-oss/seek-style-guide","last_synced_at":"2025-10-08T05:31:07.293Z","repository":{"id":48645227,"uuid":"56475150","full_name":"seek-oss/seek-style-guide","owner":"seek-oss","description":"Living style guide for SEEK, powered by React, webpack, CSS Modules and Less.","archived":true,"fork":false,"pushed_at":"2021-07-16T04:23:06.000Z","size":23706,"stargazers_count":307,"open_issues_count":4,"forks_count":46,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-01-18T21:03:41.313Z","etag":null,"topics":["babel","css-modules","front-end","less","react","style-guide","webpack"],"latest_commit_sha":null,"homepage":"https://seek-oss.github.io/seek-style-guide/","language":"JavaScript","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/seek-oss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-18T03:47:28.000Z","updated_at":"2024-10-04T21:54:19.000Z","dependencies_parsed_at":"2022-09-03T14:50:40.547Z","dependency_job_id":null,"html_url":"https://github.com/seek-oss/seek-style-guide","commit_stats":null,"previous_names":[],"tags_count":351,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Fseek-style-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Fseek-style-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Fseek-style-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seek-oss%2Fseek-style-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seek-oss","download_url":"https://codeload.github.com/seek-oss/seek-style-guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235683861,"owners_count":19029079,"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":["babel","css-modules","front-end","less","react","style-guide","webpack"],"created_at":"2024-08-01T05:01:29.084Z","updated_at":"2025-10-08T05:31:01.858Z","avatar_url":"https://github.com/seek-oss.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"## ⚠️ NOTE: This project has been deprecated in favour of [Braid Design System.](https://github.com/seek-oss/braid-design-system)\n\n---\n\n[![Build Status](https://img.shields.io/travis/seek-oss/seek-style-guide/master.svg?style=flat-square)](http://travis-ci.org/seek-oss/seek-style-guide) [![npm](https://img.shields.io/npm/v/seek-style-guide.svg?style=flat-square)](https://www.npmjs.com/package/seek-style-guide) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/) [![Styled with Prettier](https://img.shields.io/badge/styled%20with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n# seek-style-guide\n\nLiving style guide for [SEEK](https://github.com/seek-oss), powered by [React](https://facebook.github.io/react), [webpack](https://webpack.js.org), [CSS Modules](https://github.com/css-modules/css-modules) and [Less](http://lesscss.org/).\n\nIf you're creating a new project from scratch, consider using [sku](https://github.com/seek-oss/sku), our officially supported front-end development toolkit. It's specially designed to get your project up and running as quickly as possible, while simplifying the process of keeping your development environment up to date.\n\nIf you'd instead like to work on a custom webpack project, you can use [seek-style-guide-webpack](https://github.com/seek-oss/seek-style-guide-webpack) to streamline the integration process.\n\n## Installation\n\n```bash\n$ npm install --save seek-style-guide react react-dom react-helmet\n```\n\nOptionally, if not making use of the React components, you can install seek-style-guide by itself:\n\n```bash\n$ npm install --save seek-style-guide\n```\n\n## Upgrading\n\nConsumers can stay up to date by following our [release notes](https://github.com/seek-oss/seek-style-guide/releases), which are published automatically whenever a new release is published to [npm](https://www.npmjs.com/package/seek-style-guide).\n\n## Setup\n\nWrap your app with the `StyleGuideProvider` component to use any of the style guide components. For example:\n\n```js\nimport React, { Component } from 'react';\nimport { StyleGuideProvider } from 'seek-style-guide/react';\n\nexport default class App extends Component {\n  render() {\n    const locale = 'AU';\n    const title = '...';\n    const meta = [{ name: 'description', content: '...' }];\n    const link = [{ rel: 'canonical', href: 'https://www.seek.com.au/' }];\n\n    return (\n      \u003cStyleGuideProvider locale={locale} title={title} meta={meta} link={link}\u003e\n        ...\n      \u003c/StyleGuideProvider\u003e\n    );\n  }\n}\n```\n\n`StyleGuideProvider`'s props are used to set the page head properties using [Helmet](https://github.com/nfl/react-helmet).\n\n## High Level Components\n\nAs much as possible, you should aim to minimise the amount of custom CSS you need to write. This is achieved by leveraging our suite of high level components, which are demonstrated on our [style guide documentation site](https://seek-oss.github.io/seek-style-guide/).\n\n## Low Level Styling\n\nFor more advanced pages, if you need to drop down into Less, the style guide provides a set of mixins and variables to make it easier to stay on brand.\n\nIn any style sheet that depends on the style guide, first import the Less theme by reference.\n\n```less\n@import (reference) '~seek-style-guide/theme';\n```\n\n### Responsive Breakpoint\n\nThe style guide exposes one responsive breakpoint:\n\n```less\n@responsive-breakpoint: 740px;\n```\n\nContent should otherwise be responsive within its container. The set of included components follow this model internally if you'd like to get a sense of what this looks like in practice.\n\n### Color Variables\n\nAs much as possible, colors should be directly imported from the style guide.\n\nThe following colors are provided:\n\n```less\n// Brand colors\n@sk-blue-darker;\n@sk-blue-dark;\n@sk-blue;\n@sk-blue-light;\n@sk-blue-lighter;\n@sk-pink;\n@sk-green;\n@sk-green-light;\n@sk-purple;\n@sk-teal;\n@sk-orange;\n@sk-yellow;\n@sk-yellow-light;\n\n// Partner brand colors\n@sk-business;\n@sk-volunteer;\n@sk-learning-light;\n@sk-learning-medium;\n@sk-learning-dark;\n\n// Grays\n@sk-black;\n@sk-charcoal;\n@sk-mid-gray-dark;\n@sk-mid-gray-medium;\n@sk-mid-gray;\n@sk-mid-gray-light;\n@sk-gray-light;\n@sk-gray-lightest;\n@sk-off-white;\n@sk-white;\n\n// Element colors\n@sk-link;\n@sk-link-visited;\n@sk-focus;\n@sk-footer;\n@sk-background;\n@sk-form-accent;\n@sk-positive-light;\n@sk-positive;\n@sk-info-light;\n@sk-info;\n@sk-critical-light;\n@sk-critical;\n@sk-help-light;\n@sk-help;\n```\n\n### Z-Indexes\n\nTo ensure correct relative elements stacking order, z-index variables are provided:\n\n```less\n@z-index-header-overlay;\n@z-index-header;\n@z-index-page-overlay;\n@z-index-inline-overlay;\n@z-index-negative;\n```\n\n### Accessible Color Variants\n\nThe contrast ratio of certain foreground/background color combinations don't meet the [AA accessibility standards](https://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast) that we aim for. As a result, a suite of accessible variants have been provided:\n\n```less\n@sk-mid-gray-on-white;\n@sk-pink-on-gray-light;\n@sk-learning-dark-on-gray-light;\n@sk-business-on-gray-light;\n@sk-link-on-mid-gray-light;\n@sk-mid-gray-dark-on-gray-light;\n```\n\nPlease note that this list is not exhaustive, so contributions are encouraged. To validate color combinations, we recommend the use of the web-based tool [Accessible Colors](http://accessible-colors.com) by [@moroshko](https://github.com/moroshko).\n\n### Grid Variables\n\nIn order to ensure elements correctly follow the grid, element sizing should always be controlled by the following variables:\n\n```less\n@row-height;\n@gutter-width;\n@column-width;\n@container-width;\n```\n\nWhen defining a document content container:\n\n```less\n.element {\n  max-width: @container-width;\n}\n```\n\nWhen defining heights and vertical padding/margins:\n\n```less\n.element {\n  height: (@row-height * 3);\n  padding-bottom: @row-height;\n  margin-bottom: @row-height;\n}\n```\n\nWhen defining widths and horizontal padding/margins:\n\n```less\n.element {\n  width: (@column-width * 3);\n  padding-right: @gutter-width;\n  margin-right: @column-width;\n}\n```\n\nIt's important to note that any additions to these values (e.g. borders) will need to be negated to maintain rhythm:\n\n```less\n.element {\n  @border-width: 1px;\n  border-bottom: @border-width solid @sk-charcoal;\n  padding-bottom: @row-height - @border-width;\n}\n```\n\n## Advanced Usage\n\n### Babel Plugin\n\n**Note: If you're using [sku](https://github.com/seek-oss/sku), this plugin is already enabled.**\n\nIn order to help you optimise your bundle size, you can use [babel-plugin-seek-style-guide](https://github.com/seek-oss/babel-plugin-seek-style-guide).\n\n```bash\n$ npm install --save-dev babel-plugin-seek-style-guide\n```\n\nThen, add `seek-style-guide` to the plugins list in your Babel config. For example, in `.babelrc`:\n\n```json\n{\n  \"plugins\": [\"seek-style-guide\"]\n}\n```\n\n### Flow Type Checking\n\nWe've opted to include flow type checking in this project. If you're unfamiliar with static type checking you should start by reading React's [overview](https://reactjs.org/docs/static-type-checking.html).\n\nThis is completely opt-in and if you've decided not to use type checking in your project then **there is nothing you need to do**. It shouldn't impact your ability to include the style guide so long as you are using either [sku](https://github.com/seek-oss/sku) or our [webpack decorator](https://github.com/seek-oss/seek-style-guide-webpack).\n\nConversely, if you would like to opt-in to flow types you'll need to ensure that your `.flowconfig` includes a few exclusions and special options.\n\n```\n[ignore]\n.*/node_modules/config-chain/.*\n.*/node_modules/npmconf/.*\n\n[include]\n\n[libs]\n\n[lints]\n\n[options]\n# This is required to prevent errors to less file imports\nmodule.name_mapper.extension='less' -\u003e '\u003cPROJECT_ROOT\u003e/no-declarations.js.flow'\n\n# Good idea to ignore json too\nmodule.name_mapper.extension='json' -\u003e '\u003cPROJECT_ROOT\u003e/no-declarations.js.flow'\n```\n\n\u003e _no-declarations.js.flow_ is just an empty file\n\n## Sketch asset generation\n\nOn every successful build (via `npm test`), `asketch.json` files (i.e. _almost_ Sketch files) are generated by [html-sketchapp](https://github.com/brainly/html-sketchapp) containing document styles and symbols. These are provided via the following JSON files:\n\n- `dist/asketch/document.asketch.json`\n- `dist/asketch/page.asketch.json`\n\nThese can be manually imported into Sketch by [downloading html-sketchapp](https://github.com/brainly/html-sketchapp/archive/master.zip) and installing `asketch2sketch.sketchplugin`.\n\nOnce in Sketch, open the \"Plugins\" menu and select \"From \\*Almost\\* Sketch to Sketch\". Assuming you've run a full build of the style guide via `npm test`, you should now be able to select the `asketch.json` files in `dist/asketch`.\n\n## Contributing\n\nRefer to [CONTRIBUTING.md](./CONTRIBUTING.md).\n\nIf you're planning to change the public API, please [open a new issue](https://github.com/seek-oss/seek-style-guide/issues/new) and follow the provided RFC template in the [GitHub issue template](.github/ISSUE_TEMPLATE.md).\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseek-oss%2Fseek-style-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseek-oss%2Fseek-style-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseek-oss%2Fseek-style-guide/lists"}