@snyk-mktg/brand-ui

v2.6.2

Published

9 days ago

The official style library for Snyk’s BrandUI Design System

0High
0Medium
0Low

jonpekk

rodrigorafaelsantos7

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

Note: BrandUI 2.0 contains breaking changes.

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, JS, and Typescript production files by running the yarn build command. This will build CSS files in a css and js directory in the dist directory. To test out development locally:

Option 1:

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

Option 2:

The second (and preferred) option is to use Yarn to connect this project locally to the local project you are import this package to.

To link this package Yarn, simple run yarn link. This will add this package to your local Yarn registry. To remove it, run yarn unlink.
In your other local project, run yarn link @snyk-mktg/brand-ui. This will link this package to your project. Yarn will hook into the package imports in your local project.
When you are finished with the local project, make sure to run yarn unlink @snyk-mktg/brand-ui to disconnect it in the registry. It's also suggest to also run yarn install --force and to delete and file cache (ie .next directory in Next.js).

Making changes to variables

If any SCSS variables are changed, make sure to replicate those changes manually to the src/js/utilities and src/utilities/types fiels if they include the same values. Unfortunately, at this moment, there is no automatic way to extract variables for sass package over version 1.8.2. This is due to how Dart Sass changed the way varaibles are imported via the @use rule (which replaced the @import rule).

Using Snyk BrandUI

Snyk BrandUI is compiled both as a whole bundle and into individual files for production in the dist folder.

More documentation to come for how to use BrandUI

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme