CSS Bulma framework

This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Bulma is a free, open source framework with a mobile-first, responsive layout that provides ready-to-use front-end components that you can easily combine to build responsive Web interfaces.

Bluma can be used as an alternative to Bootstrap frameworks, such as Skeleton, Pure, Bootflat, and Mueller.

Bluma is a pure CSS framework, you just need to add a given class to your tag, you can achieve beautiful effect.

The installation

The use of NPM

$ npm install bulma
Copy the code

After the installation, import the CSS file:

@import 'bulma/css/bulma.css'
Copy the code

Use the CDN

Import CSS files using jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
Copy the code

local

You can get the latest Bulma version from GitHub and download the stylesheet file locally

The screen size

Bulma is a phone-first framework that provides five width breakpoints and is very adaptive, allowing you to set different styles for different devices at will.

768, 1024, 1216, 1408 ' ' ' ' ' ' ' ' ' ' ' '< -- -- -- -- -- -- -- -- -- ^ -- -- -- -- -- -- -- -- -- -- -- -- ^ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ^ -- -- -- -- -- -- -- -- -- -- -- -- -- ^ -- -- -- -- -- -- -- -- -- -- -- -- -- > mobile tablet desktop widescreen fullhdCopy the code

The grid system

Bulma’s grid architecture is based on Flex layout, using columns to specify containers and columns to specify items.

<div class="columns">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
Copy the code

The modifier

The following classes define different colors.

.is-primary
.is-link
.is-info
.is-success
.is-warning
.is-danger
Copy the code

The following classes define size.

.is-small
.is-normal
.is-medium
.is-large
Copy the code

The following classes define state.

.is-hovered
.is-outlined
.is-loading
.is-focused
.is-active
.is-static
Copy the code

See the official documentation for a complete list of modifier classes.

typography

The following classes modify font sizes.

You can specify different text sizes for different devices.

The following classes align the text

The following classes convert text

component

Bulma comes with 10 built-in Breadcrumb, Card, Menu and other components that are super easy to use. You can check them out at 👉 Components.

The following uses Card as an example:

<div class="card">
  <div class="card-content">
    <div class="content">
      Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros.
    </div>
  </div>
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>
Copy the code

In the example above, the card is divided into three parts: card-content text, card-image image container, and card-footer foot list.

WYSIWYG content

WYSIWYG: What you see is what you get is a system. It makes the document that the user sees in the view look the same as the final product of the document, and allows the user to edit text, graphics, or other elements of the document directly in the view.

<div class="content">
  <! -- start WYSIWYG contents -->
  <h1>Heading</h1>
  <p>Paragraph</p>

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <! -- end WYSIWYG contents -->
</div>
Copy the code

To provide a default style for normally generated WYSIWYG content, use the.content class. You can check this out at Content.

Custom Bulma

To customize Bulma, you need:

• Install Bulma

• Valid Sass Settings

• Create your own.scss and.sass files

You can use node-sass, sass CLI, webpack any method to achieve this, the official website gives detailed steps, in one step. Let’s take a quick look at how to change custom styles.

Enter the Bulma initial variable as follows:

@import ".. /node_modules/bulma/bulma.sass"; // This file needs to be referenced first

// Set the variable where you want to change the color
$purple: #8A4D76;
$pink: #FA7C91;
$purple-color-1: $purple; // Derived variables
Copy the code

In the code above, the preset purple, PINK, and Purple-COLOR-1 variables will be replaced.