@dollarshaveclub/ui
Advanced tools
UI is a CSS framework for interfaces commonly built at Dollar Shave Club. View the Storybook here.
UI can be used in many ways. You can import the scss directly into your project, you may include the css file in your HTML, and you can even import React components.
Get started with a base template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://unpkg.com/@dollarshaveclub/ui/dist/ui.css"
/>
<title>UI</title>
</head>
<body>
<h1 class="ui-text__h1">Hello, World!</h1>
<button class="ui-btn ui-btn--lg">Get Started</button>
</body>
</html>
Install UI via NPM
npm i --save-dev @dollarshaveclub/ui
You are free to include node_modules/ui/dist/ui.css in your project however you see fit.
If you wish to import it via SASS, you must first specify the ui scss src folder as an includePath in your sass build configuration
// Your sass build may be different. Reference SASS includePaths for more information
const sassOptions = {
includePaths: ['./node_modules'],
}
Then you may import variables or mixins via sass
// Import UI Config or Mixins
@import '@dollarshaveclub/ui/scss/config/colors';
@import '@dollarshaveclub/ui/scss/mixins/breakpoints';
If you are using a webpack loader to transpile es6:
import BreadcrumbsLarge from '@dollarshaveclub/ui/components/breadcrumbs/large'
If you're looking to import transpiled components:
import BreadcrumbsLarge from '@dollarshaveclub/ui/dist/components/breadcrumbs/large'
Developing with ui locally is easy.
nvm use # Ensure you're on the correct version of node
npm i # Install node dependencies
npm run build # Compile CSS and transpile react components
npm start # Start Storybook
UI accepts JS or TSX files for writing components. If DSC standards are used for inheriting repositories (like Face-landing in example), TypeScript (TSX) components can be imported as expected. Specifying TSX may be required to successful import components but that is it!
import foo from 'bar' // or
import foo from 'bar.tsx'
If Typescript is being used, an interface is defined to describe the "type" of code that is written. If JSX is used, Prop-types creates similar functionality. It is recommended that Typescript is used because Typescript offers fully featured Type checking without post Transpilation side affects. Prop-types helps describe a code interface but does not define it. Plus, Prop-types can leave artifacts in built code.
type Crumb = {
active?: boolean
empty?: boolean
label: string
link?: string
}
Crumb.propTypes = {
active: PropTypes.boolean,
empty: PropTypes.boolean,
label: PropTypes.string,
isRequired,
link: PropTypes.string,
}
Link UI to your application like you would any other package
cd ~/code/ui
npm link
cd <my-repo>
npm link @dollarshaveclub/ui
Linting is required to merge any branch to master. They not only dictate any style guides we'd like to adhere to, but help enforce various rules such as nesting depth and use of hex colors.
The linting rules are still a work in progress. Please read the contributing section if you want to add or modify any rules.
apm install linter-stylelint # Install the StyleLint for Atom
npm run lint # Run all linters
npm run eslint # Lint JavaScript
npm run stylelint # Lint SCSS
UI is used across several repos. Use this command to see what version everyone is using
npm run dependents
Update your version number in package.json before you merge your feature branch into master. Circle will publish the updated version on npm and rebuild our documentation in gh-pages
UI comes with a CLI with useful scripts to help you implement and develop with it.
$ ui validate -f my-styles.css # Checks to see that your CSS is using valid UI classes
& ui validate --reverse -f my-styles.css # Checks to see that UI contains the classes in your styles, useful for catching custom UI styles in your app that need to be migrated
How do I use this?
Why does this exist?
Why SCSS?
I am on a different platform than the web and cannot adhere to these standards. What should I do?
BEM is love. BEM is life. Right?
The core difficulties most of us face with CSS are the same things that makes it so powerful; that is largely the cascade. BEM is not meant to be a dogmatic solution to all of our issues. It provides a set of rules that enable us to develop interfaces in equally powerful ways while still managing the cascade.
Not every classname will follow BEM conventions, but that is ok. Most classes tend to do so where applicable. Considerate code review helps thwart oddly specific rules, but also allow strategic advantages in the code.
I want access to the variables and mixins UI provides, not the CSS
ui with npm. Then simply build the src/index.scss file or build your own scss file that imports the desired ui files.Using TypeScript or JavaScript
.tsx extension must be added, within the package.json Jest configuration changes might be required.Importing Icons
fillsresources/images/elements/icons/npm i -g SVGO) and run svgo /path/to/your/svg --pretty to compress your SVG.icons.stories.js.npm run build to build the icon font and view changes in storybook.Branch off of master. Create your modifications and open a Pull Request back into master. Ensure that your scss and Javascript are appropriately linted, and that you've written tests for any additional components. After code and visual review, merge into master to kick off the deploy/publish work.
FAQs
DSC Web UI
The npm package @dollarshaveclub/ui receives a total of 72 weekly downloads. As such, @dollarshaveclub/ui popularity was classified as not popular.
We found that @dollarshaveclub/ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.