Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/denali-design/denali-css
Themeable CSS framework of Denali UI components
https://github.com/denali-design/denali-css
css denali design-system hacktoberfest scss ui ui-components
Last synced: 4 days ago
JSON representation
Themeable CSS framework of Denali UI components
- Host: GitHub
- URL: https://github.com/denali-design/denali-css
- Owner: denali-design
- License: mit
- Created: 2019-07-25T00:34:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-08T22:52:33.000Z (over 1 year ago)
- Last Synced: 2024-12-17T18:40:59.065Z (18 days ago)
- Topics: css, denali, design-system, hacktoberfest, scss, ui, ui-components
- Language: SCSS
- Homepage: https://denali-design.github.io/denali-css
- Size: 5.85 MB
- Stars: 85
- Watchers: 19
- Forks: 19
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: Code-of-Conduct.md
Awesome Lists containing this project
README
# Denali CSS Library
[](https://www.npmjs.com/package/denali-css)
[![Build Status][status-image]][status-url]
[](https://denali-design.slack.com/app_redirect?channel=general)
[](https://github.com/denali-design/denali-css/blob/master/LICENSE.md)
## Table of contents
- [Background](#background)
- [Quick Start](#quick-start)
- [Install](#install)
- [Browser support](#browser-support)
- [Versioning](#versioning)
- [Contribute](#contribute)
- [License](#license)
---
## Background
The Denali System Language was created by the Platforms and Technology Design team at Yahoo as a scalable method for designing and developing visually consistent and functional internal products. Denali’s CSS framework allows developers to implement the Denali System Language in their projects. The framework is lightweight and flexible. It supports theming through custom variables which means the visual appearance of Denali’s components can be easily adapted to fit the visual style of any brand. Additionally, components are framework independent allowing you to take what you need and leave the rest.
You can view the Denali’s entire component library on [www.denali.design](https://denali.design/).
## Quick Start
Check out our [guide](https://denali-design.github.io/denali-css/?path=/story/get-started-installation--page).
## Install
#### Prerequisites
You will need the following installed to run the site:
1. [Node](https://nodejs.org/en/)
2. [NPM](https://www.npmjs.com/)
3. [Ruby](https://www.ruby-lang.org/)
4. [Dart Sass](http://compass-style.org/)
> Note: This guide assumes you have the prerequisites installed locally and will not go over install instructions for them. Refer to their websites for guidance if necessary.
#### Installation
Clone or download this repository.
```
denali-system-language/denali-css.git
```
Use any command line tool and navigate to where you downloaded the repository.
```
cd path-to-folder/denali-css
```
Use NPM to install packages.
```
npm install
```
###### Compile SCSS
Watch for SCSS changes
```
npm run sass-watch
```
Build SCSS minified files
```
npm run sass-build
```
###### Storybook Docs
To view storybook docs use the command below.
```
npm run storybook
```
###### SCSS & Storybook
To watch SCSS files and build storybook docs at the same time
```
npm run start
```
## Browser Support
Learn more about the browsers and devices we support [here](https://denali.design/browsers).
- **Chrome** on Android, Windows, macOS, and Linux
- **Firefox** on Windows, macOS, and Linux
- **Safari** on iOS and macOS
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the tags on this [repository](https://github.com/denali-design/denali-css/tags).
## Contribute
To start contributing to Denali, have a look at our guidelines, as well as pointers on where to start making changes, in our [contributing guide](https://github.com/denali-design/denali-css/blob/master/CONTRIBUTE.md).
## Maintainers
- **Chas Turansky** [email protected]
- **Jon Kilroy** [email protected]
- **Anusha Ganti** [email protected]
- **Trevor Greenleaf** [email protected]
## License
Code licensed under the MIT license. See [LICENSE file](https://github.com/denali-design/denali-css/blob/master/LICENSE.md) for terms.
[status-image]: https://cd.screwdriver.cd/pipelines/3067/badge
[status-url]: https://cd.screwdriver.cd/pipelines/3067