<br>
<h1 class="title is-1">Biings <span class="has-text-weight-light">Design System</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 components and guidelines used for creating unified UI.
    Avoid creating your own CSS code by combining components and modifiers together.
</p>

<hr class="is-small">

<div class="columns is-multiline is-mobile is-variable">
    <div class="column is-half-desktop is-full-tablet">
        <a href="#/avatar" class="box is-bordered is-relaxed is-link">
            <img src="media/components.png" width="80" class="no-zoom"/>
            <div>
                <div class="title is-3 has-text-primary has-text-weight-light">Components</div>
                <div class="subtitle is-6">A library of all BDS components.</div>
            </div>
        </a>
    </div>
    <div class="column is-12 is-hidden-desktop"></div>
    <div class="column is-half-desktop is-full-tablet">
        <a href="#/color" class="box is-bordered is-relaxed is-link">
            <img src="media/style.png" width="80" class="no-zoom"/>
            <div>
                <div class="title is-3 has-text-primary has-text-weight-light">Colors</div>
                <div class="subtitle is-6">Color brings a design to life.</div>
            </div>
        </a>
    </div>
    <div class="column is-12 is-hidden-desktop"></div>
    <div class="column is-half-desktop is-full-tablet">
        <a href="#/voice" class="box is-bordered is-relaxed is-link">
            <img src="media/voice.png" width="80" class="no-zoom"/>
            <div>
                <div class="title is-3 has-text-primary has-text-weight-light">Voice & Tone</div>
                <div class="subtitle is-6">Good design starts with good copy. Voice expresses our personality.</div>
            </div>
        </a>
    </div>
    <div class="column is-half-desktop is-full-tablet">
        <a href="#/illustration" class="box is-bordered is-relaxed is-link">
            <img src="media/layout.png" width="75" class="no-zoom"/>
            <div>
                <div class="title is-3 has-text-primary has-text-weight-light">Illustrations</div>
                <div class="subtitle is-6">What makes complex ideas more accessible.</div>
            </div>
        </a>
    </div>
</div>

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

<h2 class="title is-3">Quick start</h2><br>

<div class="has-text-weight-bold">Using NPM</div>

Install BDS in your project using the npm package <strong>biings-ds</strong>.

<br>

    npm install biings-ds

<br><br>

<div class="has-text-weight-bold">Manually</div>

Only two files are required to start using BDS:

<hr class="is-small">

<a href="https://raw.githubusercontent.com/ForsysInteractive/biings-ds/master/build/bds.css" class="box is-bordered is-link" download><span class="is-monospace">**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 is-link" download><span class="is-monospace">**bds-icons.svg**</span><br>An SVG sprite - created with svgstore - that includes all Biings DS icons.</a>

<hr>

<div class="box is-bordered is-relaxed">
    <div class="title is-spaced is-3 has-text-weight-light has-text-primary"><a href="#/readme">How to contribute</a></div>
    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.<br><br>Check out the <a href="#/readme">**Readme**</a> file to get started.
</div>
