Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
No CSS knowledge required!
<div data-theme="dark"> <h1 class="title">Bulma</h1> <p class="subtitle"> Modern CSS framework based on <a href="https://bulma.io">Flexbox</a> </p> <div class="message is-success"> <div class="message-body"> Changes successfully saved </div> </div> <div class="field"> <input class="input" type="text" placeholder="Your Name"> </div> <div class="field"> <div class="select"> <select><option>Select dropdown</option></select> </div> </div> <div class="buttons"> <a class="button is-link is-soft">Save Changes</a> <a class="button is-danger is-soft">Cancel</a> </div> </div>1
2
3
4
5
<div class="columns"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> <div class="column">5</div> </div>
@use "sass:color"; // Set your brand colors $purple: #8a4d76; $pink: #fa7c91; $brown: #757763; $beige-light: #d0d1cd; $beige-lighter: #eff0eb; // Path to Bulma's sass folder @use "path/to/bulma/sass" with ( $family-primary: '"Nunito", sans-serif', $grey-dark: $brown, $grey-light: $beige-light, $primary: $purple, $link: $pink, $control-border-width: 2px, $input-h: color.hue($beige-lighter), $input-s: color.saturation($beige-lighter), $input-background-l: color.lightness($beige-lighter), $input-border-l: color.lightness($beige-lighter), $input-shadow: none ); // Import the Google Font @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
