This is the Unbabel Design System Styles library.

Table of Contents

• Table of Contents
• Install
• Usage
  • Uncompiled version
• UI preview
• Guidelines
• How to release a new version
• Disclosure

Install

1) Install it using npm

npm i --save @unbabel/samora-styles@latest

2) Add Erik Meyer's CSS reset to your App, which can be found here, so that all CSS styles are rendered properly.

Usage

There are currently 4 (tested) ways of using Samora:

Uncompiled version

Install Samora via NPM, saving it as a dependency

npm i @unbabel/samora-styles --save

Import globally to an app using webpack:

{
    css: {
        extract: false,
        loaderOptions: {
            scss: {
                prependData: `@import "@unbabel/samora-styles/dist/scss/main.scss";`
            }
        }
    }
}

Import globally via cdn

<script src="https://cdn.jsdelivr.net/npm/@unbabel/samora-styles@latest/dist/css/main.css"></script>
<script src="https://cdn.jsdelivr.net/npm/@unbabel/samora-styles@latest/dist/scss/main.scss"></script>

<script src="https://unpkg.com/@unbabel/samora-styles@latest/dist/css/main.css"></script>
<script src="https://unpkg.com/@unbabel/samora-styles@latest/dist/scss/main.scss"></script>

So you can use it in your templates:

<div class="row">
    <div class="col-xs-12 col-md-4">
        <h1>Lorem Ipsum</h1>
        <p class="text--caption text--light">dolor sit amet</p>
    </div>
    <div class="col-xs-12 col-md-4">
        <div class="m-2">consectetur adipiscing elit</div>
    </div>
</div>

UI preview

The library preview can be found here

Guidelines

Be sure to follow Samora Operational Guidelines on the Frontend Tribe's wiki

How to release a new version

At the moment this is a manual process. Steps to release are:

• Make sure you're using node 14 or later
• Make sure your logged in npm login on unbabel nextgen account. (If you you're not, check your 1Password account under Unbabel/Devs tab for the nextgen credentials to access npm)
• MR into main branch
• once the MR is approved and merged, checkout to main branch
• pull the latest changes
• npm run build:production (it runs super fast)
• npm run release -- <major | minor | patch>

Disclosure

Samora primary font preference it's a proprietary font-family called 'Avenir Next World'.

Because of copyrights we are not including the font in this package, but if you are part of Unbabel, you can access the font at this link.