<hr>
<h1 class="title is-2 is-spaced">Get started with BDS</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">BDS</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-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-grey-lighter">Colors and guidelines</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 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-3 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>

<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 is-family-sans-serif">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 is-family-sans-serif">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 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 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>

<div class="box is-large is-bordered is-white">
    <div class="columns is-marginless is-vcentered">
        <div class="column is-7">
            <div class="title is-4 has-text-weight-semibold">Want to contribute?</div>
            <div class="subtitle is-6 has-text-grey-dark">Onboarding for designers and developers wanting to contribute.</div>
        </div>
        <div class="column is-5 has-text-right">
            <a href="#/contribute" class="button is-rounded is-info is-beefy is-outlined">Start contributing</a>
        </div>
    </div>
</div>