Storybook Blueprint is a reusable component library that helps Storybook contributors build UIs faster. The goal is to make building durable UIs more productive and satisfying.
Want to include Blueprint Components into your project? To utilize blueprint iconography and component CSS, download a free open source CSS file, copy and paste the stylesheet before all other stylesheets, then upload the blueprint icon fonts to the fonts folder.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Blueprint Iconography CSS -->
<style>
@font-face {
font-family: 'blueprint';
src: url('./fonts/blueprint.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
</style>
<!-- Blueprint CSS -->
<link href="./blueprint.min.css" rel="stylesheet" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Project blueprint - defining the Emeritus design standards, We'll need to follow a few steps to get the build process set up in our environment.
1. Let’s run the following commands to clone the application locally:
git clone https://github.com/emeritus-tech/blueprint.git2. Take a look in your file system, and you will see a new directory named 'blueprint' after the cloned project.
3. To build this project, you need to have the following package installed:
yarn4. The command above will make the following changes to your local environment:
5. Depending on your framework, first, build your app and then check that everything worked by running:
yarn storybook --theme=theme-1
yarn storybook --theme=theme-26. It will start Storybook locally and output the address. it will automatically open the address in a new browser tab based on theme selection, and you'll be greeted by a welcome screen.