bulma-fluent/README.md

Fluent Design Theme based on Bulma CSS framework, inspired by Microsoft’s Fluent Design System

# Bulma-Fluent:

Fluent Design Theme for [Bulma](http://bulma.io), inspired by [Microsoft’s Fluent Design System](https://fluent.microsoft.com).

<i>Also check out [Fluent Design Components for Vue.js](https://github.com/mubaidr/vue-fluent) or [Addons for Bulma](https://github.com/mubaidr/bulma-addons).</i>

<br/>

[![NPM](https://nodei.co/npm/bulma-fluent.png?compact=true)](https://nodei.co/npm/bulma-fluent/)

## Demo

[Bulma Fluent Demo](https://mubaidr.github.io/bulma-fluent/)

## Screenshot

<a href="https://mubaidr.github.io/bulma-fluent/">
 <img src="screenshot.png" width=900 align="center">
</a>


## Quick install

### NPM

```sh
npm install bulma-fluent
```

### Yarn

```sh
yarn add bulma-fluent
```

### Import

After installation, you can import the CSS/Sass file into your project using this snippet:

#### css

```sh
import 'bulma-fluent/css/bulma.css'
```

#### sass

```sh
import 'bulma-fluent/bulma.sass'
```

## CDN link

[unpkg.com/bulma-fluent](https://unpkg.com/bulma-fluent/css/)

## Download from this Repository

[Download Latest Minified Build](https://raw.githubusercontent.com/mubaidr/bulma-fluent/master/css/bulma.min.css)

## Customize

Simply set your own Sass variables before importing Bulma-fluent.

```scss
// Set your brand colors
$primary: #8a4d76;
$info: #fa7c91;
$success: #757763;
$warning: yellow;
$danger: red;
$light: #ccc;
$dark: #444;

// Update font family
$family-sans-serif: 'Calibri', 'Arial';

// Import the Bulma-fluent
@import 'bulma-fluent/bulma.sass';
```

## Copyright and license

Code copyright 2018 [Muhammad Ubaid Raza](https://mubaidr.github.io).

Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
| [<img src="https://avatars3.githubusercontent.com/u/35353768?v=4" width="100px;" alt="Jibbie R. Eguna"/><br /><sub><b>Jibbie R. Eguna</b></sub>](https://github.com/jbeguna04)<br />[🎨](#design-jbeguna04 "Design") |
| :---: |

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!