This is the Unbabel Design System Styles library.
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.
There are currently 4 (tested) ways of using Samora:
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>
The library preview can be found here
Be sure to follow Samora Operational Guidelines on the Frontend Tribe's wiki
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>
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.