@snyk-mktg/brand-ui

v1.0.16

Published

an hour ago

The official style library for Snyk’s BrandUI Design System

Downloads

165

0High
0Medium
0Low

tim.lisiecki

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 the css 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 gulp watchStyles task runs before starting to make your changes.
Make your changes and the jsonVariables task will keep the variables.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'
			),
		},
	},
};

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme