# Randstad Human Forward front-end prototype - multitheme setup

This project is the multitheme setup front-end code based on the randstad Human Forward web components.

&nbsp;

## install beforehand
```
nodejs
```
- Create an [NPM account](https://www.npmjs.com/)
- Ask [permission to use the package](https://docs.google.com/forms/d/e/1FAIpQLSdXJ7X7z9mvIiZnsCICsYVAz8iM25ixBB3MC5h_2iyk0ItHIw/viewform)
- [Login into your NPM account on the CLI](https://docs.npmjs.com/creating-a-new-npm-user-account#testing-your-new-account-with-npm-login)


&nbsp;

## How to use

1. Run `npm i @randstad-design/orbit-multitheme`, this will install the components in your node_modules folder.
2. Depending on the architecture of your project, you can import from the /dist or /src folder. The dist folder has a compiled assets/css/`human-forward.css` and assets/js/`human-forward.js` file ready to use.
3. HTML examples can be found on `https://randstad.design/components/`

## Updates/ new versions
Once a new version has been released, we will update you via our distribution list.


&nbsp;

## HTML structure snippet
Example of the basic HTML with the implemented HTML.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=".../assets/css/human-forward.css">

    <link rel="stylesheet" href="/...assets/css/your-own-stylesheet.css">
  </head>
  <body>

    <!-- Example: https://randstad.design/components/web/my-randstad/header-welcome/ -->
    <header class="header header--s header--welcome bg-brand--off-white">
      <div class="header__wrapper wrapper">
        <div class="header__content header__content--l content-block">
          <p class="content-block__eyebrow text--alternative">
            <span data-rs-custom-greeting></span>, developer
          </p>
          <h1 class="content-block__title">
            welcome to
            <em>randstad design</em>
          </h1>
        </div>
        <div class="media-block media-block--contain">
          <img src=".../assets/image/components/my-randstad/headers/coffee.svg" alt="">
        </div>
      </div>
    </header>
    <!-- End example -->

    <script type="text/javascript" src=".../assets/js/vendor/forEach.js"></script>
    <script type="text/javascript" src=".../assets/js/vendor/picturefill.js"></script>
    <script type="text/javascript" src=".../assets/js/vendor/svgxuse.js"></script>
    <script type="text/javascript" src=".../assets/js/human-forward.js"></script>

    <script type="text/javascript" src=".../assets/js/your-own-script.js"></script>
  </body>
</html>
```

&nbsp;


#

## BEM convention
We use the BEM naming convention at randstad. Read [more](http://getbem.com/naming/) about BEM.

&nbsp;

## styleguide
In the [styleguide](https://randstad.design/styleguide) section you can find:

* grid & breakpoints
* spacings
* text sizes & font
* colors
* icons

&nbsp;

## browser support
for more information go to: [randstad.design/getting-started/browser-support/](https://randstad.design/getting-started/browser-support/)


&nbsp;

# RELEASE NOTES

##0.4.0
the following Spherion components/elements were added:
  - Meta content
  - Color mapping
  - Footer
  - Form elements
  - Popover large
  - Modals
  - Link list
  - Promotional text
  - Badges
  - Contact person
  - Notification toast

##0.3.0
the following Spherion components/elements were added:
  - Meet the Team

##0.2.0
the following Spherion components/elements were added:
   - Colors
   - Buttons
   - Navigation
   - Blocks
   - Image assets
   - Typography and Fonts
   - Body Copy
   - Meta content location
   - Accordion
   - Blogs - article overview
   - Cards - job
   - Related jobs
   - Split view - photo