CSS Bulma framework

This is the 10th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

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 a responsive Web interface.

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

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

Let’s look at some of its uses.

The installation

The use of NPM

$ npm install bulma
Copy the code

After 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 frame that offers five width breakpoints with good adaptive features that allow you to set up 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 a 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 the different colors.

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

The following classes define sizes.

.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 decorating classes.

typography

The following classes modify the font size.

`.is-size-1`	3rem
`.is-size-2`	2.5 rem
`.is-size-3`	2rem
`.is-size-4`	1.5 rem
`.is-size-5`	1.25 rem
`.is-size-6`	1rem
`.is-size-7`	0.75 rem

You can specify different text sizes for different devices.

`is-size-1-mobile`	Mobile phone
`is-size-1-tablet`	The tablet
`is-size-1-touch`	Phones and Tablets
`is-size-1-desktop`	Desktop, widescreen and HD
`is-size-1-widescreen`	Widescreen and HD
`size-1 is-size-1-fullhd`	hd

The following classes align the text

`.has-text-centered`	Make the textBecome the center of
`.has-text-justified`	Make the textreasonable
`.has-text-left`.	Make the text andOn the leftalignment
`.has-text-right`	To make the textrightalignment

The following class converts the text

`.is-capitalized`	For each wordThe first character ofconvertA capital
`.is-lowercase`	willallCharacter conversion tolowercase
`.is-uppercase`	willallCharacter conversion toA capital

component

Bulma has ten built-in Breadcrumb, Card, Menu and other components, which are super simple and convenient to use. You can check them out here at 👉 Components.

Take a 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, card-image, and card-footer.

WYSIWYG content

WYSIWYG: What you see is what you get is a system. It allows the user to see the document in the view in the same style as the final product of the document, and also 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 commonly generated WYSIWYG content, use the.content class. You can find out more about this at Content.

Custom Bulma

To customize Bulma, you need:

Install Bulma
Valid Sass Settings
Create your own.scss and.sass files

You can do this using nod-sass, sass CLI, webpack, or any other method. The website provides detailed steps to get there. Here’s a quick look at how to change custom styles.

First import Bulma initial variables, as follows:

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

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

In the above code, the default variables purple, pink, and Purple-color-1 will be replaced.