Snyk-marketingui NPM

snyk-marketingui

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-marketingui

or yarn:

yarn add snyk-marketingui

Compiling 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.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>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 the css directory and watch for any changes to .scss files.

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.scss

Compiled CSS Files Structure

css
├── atoms.css
├── atoms.css.map
├── core.css
├── core.css.map
├── index.css
└── index.css.map

Snyk 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: