Snyk MarketingUI 🐾 🖥 💻 📱
Welcome to Snyk MarketingUI, the official design token styles library for Snyk’s MarketingUI Design System.
Documentation
The full documentation can be found at https://snyk.marketing/snyk-marketingui.
Getting Started with the Styles Library
Setting it up
Install Snyk MarketingUI with either npm:
npm i snyk-marketinguior yarn:
yarn add snyk-marketinguiCompiling it
Compile Snyk MarketingUI 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 Recommneded Extensions in the extensions tab.
- Create an
index.htmlfile 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>SMUi Test area</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body class="snyk-marketingui">
<main>
<section class="smui-section">
<div class="smui-container">
<div class="max-w-6 marg-h-auto txt-center">
<h1 class="txt-page-title">Smui Testing Area</h1>
<p class="txt-body">Use this as a testing area when creating SCSS styles</p>
</div>
</div>
</section>
<section class="smui-section">
<div class="smui-container">
<!-- Test inside this container -->
</div>
</section>
</main>
</body>
</html>
- You can now add some HTML with SMUi classes to the section.
- Run
yarn gulp. This will compile the CSS in thecssdirectory and watch for any changes to.scssfiles.
Using Snyk MarketingUI
Snyk MarketingUI is compiled both as a whole bundle and into broken down sections based on the following structure:
Sass Files Structure
scss
├── atoms
│ ├── _announcement-bar.scss
│ ├── _avatar.scss
│ ├── _button.scss
│ ├── _checkbox.scss
│ ├── _chip.scss
│ ├── _dropdown.scss
│ ├── _input.scss
│ ├── _product-logos.scss
│ ├── _radios.scss
│ ├── _rich-text.scss
│ ├── _snyk-logos.scss
│ ├── _switch.scss
│ ├── _tabs.scss
│ ├── _tag.scss
│ ├── _wave.scss
│ └── index.scss
├── common
│ ├── _functions.scss
│ ├── _variables.scss
│ └── index.scss
├── core
│ ├── _animation.scss
│ ├── _baseline.scss
│ ├── _color.scss
│ ├── _elevation.scss
│ ├── _icons.scss
│ ├── _layout.scss
│ ├── _shape.scss
│ ├── _spacing.scss
│ ├── _typography.scss
│ ├── .DS_Store
│ └── index.scss
├── atoms.scss
├── core.scss
└── index.scssCompiled CSS Files Structure
css
├── atoms.css
├── atoms.css.map
├── core.css
├── core.css.map
├── index.css
└── index.css.mapSnyk MarketingUI can be used through its design tokens, (CSS class names) or through mixin includes of custom SMUi functions, which can be referenced from the official documentation. Once you have access to Snyk MarketingUI, you can access the styles as follows:
import './node_modules/snyk-marketingui/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-marketingui': path.resolve(__dirname, './node_modules/snyk-marketingui/scss/[index | index-wrapped | core | brand | atoms].scss'),
},
},
};