ds-living-styleguide
v1.0.13
Published
Living Styleguide serves as a styleguide and component library for doubleSlash
Downloads
1,277
Keywords
Readme
Living Styleguide
This library provides components, colors and fonts according to the doubleslash style. The components are created by using storybook, angular and bootstrap.
A detailed documentation can be found here: https://doubleslash.style
Milestones
Version 1.0.13
- Inputfield - Max, Min & Step & Required Inputs ✅
Version 1.0.11
- Event Binding: changed names to avoid conflicts
Version 1.9
Atoms
- Input fields with max, min and step
Molecules
- Implementation of multiselect & resettable Dropdowns
Version 1.7
- Release of new clickcolor ($ds-clickable: #00759e) to ensure a11y
- New Category: Styles ✅
Styles
- Color Palette update ✅
- Elevations ✅
- doubleSlash Icon Collection
- Typography & List
Version 1.0
- Migration to WebComponets
Atoms
- Buttons
- Checkboxes and Parent Checkbox, Radio Button
- Images
- Input Fields & Textareas
- Jumpmarks & Scrollbars
- Linkbox & Links, Infobox
Molecules
- Dropdown
- Switch
Organisms
- Alert, - Dialog
- Cookie Banner
- Footer
Styles
- Color Palette
- doubleSlash Icon Collection
- Typography & Lists
Web-Components
Utilize web components, including buttons, checkboxes, and many other elements, in your web applications.
Installation
`npm install ds-living-styleguide`
Import web-component.js and styles.scss in angular.json:
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/ds-living-styleguide/assets",
"output": "assets"
}
],
"styles": [
"node_modules/ds-living-styleguide/styles/styles.scss",
"src/styles.scss"
],
"scripts": [
"node_modules/ds-living-styleguide/lib/web-components.js"
]
To use fonts, import them from node_modules into your styles.scss:
`@font-face {
font-family: 'Inter';
src:
url ('../node_modules/ds-living-styleguide/assets/fonts/Inter-Regular.ttf') format('truetype'),
url('../node_modules/ds-living-styleguide/assets/fonts/Inter-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Inter';
src:
url ('../node_modules/ds-living-styleguide/assets/fonts/Inter-SemiBold.ttf') format('truetype'),
url('../node_modules/ds-living-styleguide/assets/fonts/Inter-SemiBold.woff') format('woff');
font-weight: bold;
font-style: normal;
}`
To use webcomponents import:
`schemas: [CUSTOM_ELEMENTS_SCHEMA]`
Example implementation of button as webcomponent:
<web-ds-button (buttonClicked)="yourMethod()" type="primary">Button