bulma-extensions/bulma-badge/src/demo/index.html

Set of extensions for Bulma.io CSS Framework

---
layout: default
route: index
fixed-navbar: false
title: Quick-Start
subtitle: Display a badge element in front of another Bulma element with different colors.
---


{% capture component_include_css %}
<link href="~bulma-badge/dist/css/bulma-badge.min.css" rel="stylesheet">
{% endcapture %}

{% capture component_include_sass %}
@charset "utf-8"

// Import Bulma core
@import 'bulma.sass'

// Import component
@import "bulma-badge.sass"
{% endcapture %}

{% include anchor.html name="Features" %}
<div class="columns is-multiline is-variable is-6">
	<div class="column is-half">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fas fa-2x fa-desktop"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Responsive</h1>
					<p>Calendar works fine on any device: desktop, tablet or mobile.</p>
				</div>
			</div>
		</article>
	</div>
	<div class="column is-half">
		<article class="media">
			<figure class="media-left">
				<span class="icon has-text-info">
					<i class="fas fa-2x fa-paint-brush"></i>
				</span>
			</figure>
			<div class="media-content">
				<div class="content">
					<h1 class="title is-6 heading has-text-grey-dark">Customization</h1>
					<p>Many options to customize behavior. Use of sass variables to easily customize design.</p>
				</div>
			</div>
		</article>
	</div>
</div>

{% include anchor.html name="Installation" %}
<article class="message is-warning">
	<div class="message-body">
	This component requires bulma.io to work. See <a href="https://bulma.io/documentation/overview/start/" target="_blank">bulma.io documentation</a> first to know how to include it into your project.
	</div>
</article>
<p>There are several ways to get started with Bulma-extensions. You can either:</p>

<section class="section is-paddingless">
	<div class="tabs">
		<ul>
			<li class="is-active"><a href="#install-npm">Npm</a></li>
			<li><a href="#install-github">Github</a> </li>
		</ul>
	</div>

	<div class="tab-contents">
		<div id="install-npm" class="tab-content is-active">
			<p>Use npm to install and stay up to date in the future</p>
			{% highlight shell %}npm install bulma-badge{% endhighlight %}
		</div>

		<div id="install-github" class="tab-content">
			<p>Use the GitHub repository to get the latest development version</p>
			<p class="help">This method requires git installed on your computer.</p>
			{% highlight shell %}git clone git://github.com/Wikiki/bulma-badge.git{% endhighlight %}
		</div>
	</div>
</section>

{% include anchor.html name="Content" %}
<section class="section is-paddingless">
	<p>The component comes with various files:</p>
	<div class="file-tree">
		
	</div>
	<p>Depending on your need your can use either pre-compiled files from <code>dist</code> directory or sources from <code>src</code> directory.</p>
</section>

{% include anchor.html name="Integration" %}
<section class="section is-paddingless">
	<article class="message is-warning">
		<div class="message-body">
			This component requires bulma.io to work. See <a href="https://bulma.io/documentation" target="_blank">bulma.io documentation</a> first to know how to install it.
		</div>
	</article>
	<p>You are only at 3 simple steps to work with bulmaCalendar.</p>
	<ul class="step-text">
		<li>
			<h6 class="title is-6">Include Stylesheet</h6>
			<p>The first step is to include the stylesheet into your project. You can use either the minified CSS version or the Sass source to integrate it into a more global project.</p>
			<div class="tabs">
				<ul>
					<li class="is-active"><a href="#include-css">Css</a></li>
					<li><a href="#include-sass">Sass</a></li>
				</ul>
			</div>
			
			<div class="tab-contents">
				<div id="include-css" class="tab-content is-active">
					<p>{% highlight html %}{{ component_include_css }}{% endhighlight %}</p>
				</div>
				<div id="include-sass" class="tab-content">
					<p>{% highlight html %}{{ component_include_sass }}{% endhighlight %}</p>
				</div>
			</div>
		</li>
	</ul>
</section>