@snyk-mktg/brand-ui v1.0.11
Snyk BrandUI 🐾 🖥 💻 📱
Welcome to BrandUI, the official styles library for Snyk’s Marketing design system.
Note: This is the successor to the previous prototype, Snyk MarketingUI (aka "SMUi").
Documentation
The full documentation can be found at https://brand-ui.snyk.marketing/.
Getting Started with the Styles Library
Setting it up
Install Snyk BrandUI with either npm
:
npm i @snyk-mktg/brand-ui
or yarn
:
yarn add @snyk-mktg/brand-ui
Compiling it
Compile Snyk BrandUI CSS by running the gulp
command. This will build CSS files in a css
directory at the root of this project. To test out development locally:
- Install the Live Server extension in VSCode. This can be found in the Recommended Extensions in the extensions tab.
- Create an
index.html
file at the root of this project. Add this template to the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snyk BrandUI Test area</title>
<link rel="stylesheet" href="dist/css/dev/index.css">
</head>
<body class="snyk-brand-ui">
<main>
<section class="brandui-section">
<div class="brandui-container">
<div class="max-w-6 marg-h-auto txt-center">
<h1 class="txt-page-title">BrandUI Testing Area</h1>
<p class="txt-body">Use this as a testing area when creating SCSS styles</p>
</div>
</div>
</section>
<section class="brandui-section">
<div class="brandui-container">
<!-- Test inside this container -->
</div>
</section>
</main>
</body>
</html>
- You can now add some HTML with BrandUI classes to the section.
- Run
yarn gulp
. This will compile the CSS in thecss
directory and watch for any changes to.scss
files.
Making changes to variables
Snyk BrandUI is set up to export its variables from the _variables.scss
file to a variables.json
file to be leveraged through a js import/export. If any changes need to be made to the variables you must:
- Run
yarn gulp
so that the gulpwatchStyles
task runs before starting to make your changes. - Make your changes and the
jsonVariables
task will keep thevariables.json
file up to date. - Ensure that the
variables.json
file is included in your commits.
Using Snyk BrandUI
Snyk BrandUI is compiled both as a whole bundle and into broken down sections.
Snyk BrandUI can be used through its design tokens, (CSS
class names) or through mixin
includes
of custom BrandUI functions, which can be referenced from the official documentation. Once you have access to Snyk BrandUI, you can access the styles as follows:
import './node_modules/@snyk-mktg/brand-ui/dist/scss/[index | index-wrapped | core | brand | atoms].scss';
If you are using WebPack
, then you can reference the styles through an alias as follows:
module.exports = {
resolve: {
alias: {
'@snyk-mktg/brand-ui': path.resolve(
__dirname,
'./node_modules/@snyk-mktg/brand-ui/dist/scss/[index | index-wrapped | core | brand | atoms].scss'
),
},
},
};
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
9 months ago
9 months ago
10 months ago
10 months ago