https://altinn.github.io/designsystem-styleguide

https://altinn.github.io/designsystem-styleguide

Last synced: 10 days ago
JSON representation

• Host: GitHub
• URL: https://altinn.github.io/designsystem-styleguide
• Owner: Altinn
• License: mit
• Archived: true
• Created: 2017-08-07T07:37:51.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-12-01T11:27:20.000Z (about 1 year ago)
• Last Synced: 2024-08-24T02:02:03.533Z (4 months ago)
• Language: CSS
• Size: 73.9 MB
• Stars: 5
• Watchers: 21
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ux-design-styles - Altinn Design System - The design system is based on so-called atomic design methodology, where instead of designing pages design components that can be assembled and reused in different web solutions. (Guidelines/Styleguides)

README

        
# designsystem-styleguide

This repository contains the code for our "storefront" of the Design System. It is made  using Brad Frost's [Style Guide Guide](https://github.com/bradfrost/style-guide-guide). Altinn is using [Pattern Lab](https://github.com/pattern-lab/patternlab-node) to develop frontend-code for web components. You can find our Design System repository [here](https://github.com/Altinn/DesignSystem).

Pattern Lab serves as our "workshop" for frontend developers (based on atomic design), while this is our "storefront".

A gulp-task is exporting all the components from Pattern Lab to this storefront, and creates a better display of the final components.

## Setup

1. Download or clone the files.

2. In the command line, navigate to the root of the project and run the `jekyll serve` command. This will build the static site and watch for changes.

3. Visit `http://127.0.0.1:4000/` in your browser to see the style guide.

## Export Patterns from Pattern Lab

To import the latest components from Pattern Lab into the storefront, go to the repository “Designsystem” (Pattern Lab), run `gulp style-guide-export` in console. All the patterns will show up in “designsystem-styleguide” > “patterns”.

If you are going to include a new component, create a new md-file in the folder “components”. The new md-file must be updated with correct path to the pattern.