<hr>
<p class="subtitle is-size-4 is-family-secondary">
    <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 <span class="has-text-primary">principles</span>, <span class="has-text-turquoise">style</span> and <span class="has-text-claim">components</span> together.
</p>
<hr>
<div class="columns is-multiline">
    <div class="column is-full">
        <a href="#/approach" class="box is-raised has-background-grey-lighter hover-to-popping">
            <div class="box">
                    <img src="media/principles.png" width="70" class="no-zoom"/>
                    <hr class="is-smaller">
                    <div>
                        <div class="title is-4 has-text-dark has-text-weight-medium">Principles</div>
                    </div>
            </div>
        </a>
    </div>
    <div class="column is-half">
        <a href="#/color" class="box is-raised has-background-gradient-2 hover-to-popping">
            <div class="box">
                <img src="media/style.png" width="56" class="no-zoom"/>
                <hr class="is-smaller">
                <div>
                    <div class="title is-4 has-text-white has-text-weight-medium">Style & Colors</div>
                </div>
            </div>
        </a>
    </div>
    <div class="column is-half">
        <a href="#/avatar" class="box is-raised has-background-gradient-3 hover-to-popping">
            <div class="box">
                <img src="media/components.png" width="60" class="no-zoom"/>
                <hr class="is-smaller">
                <div>
                    <div class="title is-4 has-text-white has-text-weight-medium">Components</div>
                </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="subtitle">Install BDS in your project using the npm package <strong>biings-ds</strong>.</div>

    npm install biings-ds
<hr class="is-small">

<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-raised is-shadowless 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-raised is-shadowless 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">
    <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-dark is-beefy">Start contributing</a>
        </div>
    </div>
</div>