<br><br><br>
<h1 class="title is-1 has-text-weight-bold">Biings <span class="has-text-weight-light">DS</span></h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Biings DS</span> is the design system for Biings applications and web pages. It is a series of guidelines used for creating unified experience and UI. Avoid design missteps by combining principles, style and components together.
</p>

<hr class="is-small">

<div class="columns is-multiline">
    <div class="column is-full">
        <a href="#/approach" class="box is-large is-floating has-background-gradient-1 hover-to-popping">
            <img src="media/principles.png" width="65" class="no-zoom" style="margin-bottom: 0.5rem;"/>
            <div>
                <div class="title is-2 has-text-white has-text-weight-light">Principles</div>
                <div class="subtitle is-5 has-text-pink-lighter">Design for HR sustainabilty</div>
            </div>
        </a>
    </div>
    <div class="column is-half">
        <a href="#/color" class="box is-large is-floating has-background-gradient-2 hover-to-popping">
            <img src="media/style.png" width="55" class="no-zoom" style="margin: 0.5rem 0;"/>
            <div>
                <div class="title is-3 has-text-white has-text-weight-light">Style</div>
                <div class="subtitle is-5 has-text-turquoise-lighter">Guidelines and colors to bring a design to life</div>
            </div>
        </a>
    </div>
    <div class="column is-half">
        <a href="#/avatar" class="box is-large is-floating has-background-gradient-3 hover-to-popping">
            <img src="media/components.png" width="65" class="no-zoom"/>
            <div>
                <div class="title is-3 has-text-white has-text-weight-light">Components</div>
                <div class="subtitle is-5 has-text-yellow-lighter">Library of all BDS components</div>
            </div>
        </a>
    </div>
</div>

<hr class="is-visible is-large">

<h2 class="title is-3 has-text-weight-bold">Quick start</h2><br>

<div class="title is-5 is-spaced">Using NPM</div>
<div class="subtitle">Install BDS in your project using the npm package <strong>biings-ds</strong>.</div>

    npm install biings-ds

<br><br>

<div class="title is-5 is-spaced">Manually</div>
<div class="subtitle">Only two files are required to start using BDS:</div>

<a href="https://raw.githubusercontent.com/ForsysInteractive/biings-ds/master/build/bds.css" class="box is-bordered hover-to-well has-text-grey-darker" download><span class="is-monospace has-text-dark">**bds.css**</span><br>The only CSS file you'll need to use Biings DS.</a>
<a href="https://raw.githubusercontent.com/ForsysInteractive/biings-ds/master/build/bds-icons.min.svg" class="box is-bordered hover-to-well has-text-grey-darker" download><span class="is-monospace has-text-dark">**bds-icons.svg**</span><br>An SVG sprite - created with svgstore - that includes all Biings DS icons.</a>

<hr class="is-large">

<div class="box is-bordered is-large">
    <div class="title is-3 has-text-primary has-text-weight-light">Want to contribute?</div>
    <div class="subtitle is-5 has-text-grey-dark">Onboarding for designers and developers wanting to contribute. We welcome all feedback and ideas in order to produce the best possible experience for our users.</div>
    <a href="#/contribute" class="button is-primary">Start contributing</a>
</div>
