Bulmaは、レスポンシブなWebインターフェイスを構築するために簡単に組み合わせることができる、すぐに使用できるフロントエンドコンポーネントを提供する、無料のオープンソースフレームワークです。
CSSの知識は不要！
<div data-theme="dark">
<h1 class="title">Bulma</h1>
<p class="subtitle">
Modern CSS framework based on <a href="https://bulma.dokyumento.jp">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");
