Web styling takes a lot of time to develop, and the easiest way to do it is to use a CSS framework.

Bootstrap is the best known CSS framework, but today I’d like to recommend another, lighter and easier to use framework —-Bulma. It makes it easy to create beautiful web pages even if you don’t know anything about CSS.

I would like to thank 100Offer for sponsoring me. 100offer is the top human resource website in China. At the end of this article, there is a brief introduction of them. Friends who want to change jobs recently can have a look.

A list,

Bulma framework is characterized by its simplicity and ease of use. All styles are based on class. You just specify a class for the HTML element and the style takes effect immediately.


<a class="button is-primary is-large">Login</a>
Copy the code

In the code above, the a element simply needs to add a few classes to produce an IS-large button with an IS-primary color.

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.

  • Mobile: less than or equal to 768px
  • Tablet: greater than or equal to 769px
  • Desktop: > 1024px
  • Wide creen: Greater than or equal to 1216px
  • Fullhd: greater than or equal to 1408px

It provides more than two dozen common components, such as forms, tables, ICONS, breadcrumbs, menus, navigation, Modal Windows, and so on. Simple site, can not write any CSS code.

Two, basic usage

Bulma is installed in one step by inserting a style sheet into a web page.


<link rel="stylesheet" href="css/bulma.min.css"/>
Copy the code

To make it easier, you simply add a class to the HTML element.


<a class="button">Button</a>
Copy the code

The code above adds the button class to the A element, and the link is rendered as a button.

Bulma provides a number of modifier classes that can be used to change the style of the base class. They all start with is- or has-. For example, to change the size of a Button, use the following decorator class.


<a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>
Copy the code

Bulma offers six colors by default.

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

The modifier class for button state is as follows.

  • is-hovered
  • is-focused
  • is-active
  • is-loading

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

Third, grid system

Bulma’s grid architecture is based on Flex layout and is very easy to write. The simplest use is to use columns to specify containers and columns to specify items.


<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth</div>
</div>
Copy the code

When the screen width is greater than 768px, all items are tiled, splitting the width of the container. When the width is less than or equal to 768px, all items become vertically stacked.

The following decorator class is used to specify the width of the item.

  • Three quarters: IS-three-quarters
  • A quarter: is-one-quarter
  • Two-thirds: IS-two-thirds
  • One-third: IS-one-third
  • Half: IS-half
  • Four-fifths: IS-four-fifths
  • Three-fifths: IS-three-fifths: _________
  • Two-fifths: IS-two-fifths: _________
  • One fifth: is-one-fifth

There are also some modifier classes that are useful.

  • Is-narrow: The width of the grid is determined by the width of the content
  • Is-centered: Grid content is centered and aligned
  • Is-gapless: There is no spacing between grids

Bulma also supports 12 grid systems.

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

If you want to specify a grid offset, you can decorate the class with IS-offset-class.

  • is-offset-one-quarter
  • is-offset-one-fifth
  • is-offset-8
  • is-offset-1

4. Responsive layout

As mentioned earlier, Bulma has five width breakpoints which are mobile, tablet, desktop, widescreen and fullHD.

Columns are stacked vertically on the phone by default, with all other widths tiled. If you want your phone to stay tiled, you can add the IS-Mobile modifier.

<div class="columns is-mobile"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div  class="column">4</div> </div>Copy the code

If you want your phone and tablet to be vertically stacked and other widths tiled, you can use the IS-Desktop decorator class.


<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>
Copy the code

If you want the grid to occupy different widths on different devices, you can write it as follows.


<div class="
  column
  is-half-mobile
  is-one-third-tablet
  is-one-quarter-desktop
">
</div>
Copy the code

In the code above, the grid takes up half the width of the phone, a third of the width of the tablet, a quarter of the width of the desktop, and tiled for widescreen and HD.

Bulma allows you to specify different layouts for different devices.


<div class="
  column
  is-flex-mobile
  is-inline-tablet
  is-block-desktop
">
</div>
Copy the code

In the code above, the phone has a Flex layout, the tablet has an inline layout, and the other widths have a Block layout.

Below are the decorator classes that hide an item.

  • Is-hidden-mobile: hides only on mobile phones
  • Is-hidden-tablet-only: hides only on the tablet
  • Is-hidden-desktop-only: indicates that it is hidden only on the desktop
  • Is-hidden-touch: Mobile phones and tablets are hidden and other widths are displayed

See the official documentation for a complete list.

Five, the text

Bulma provides seven modifiers for specified text sizes.

  • Is the size – 1:3 rem
  • Is the size – 2:2.5 rem
  • Rem is – size – 3:2
  • Is the size – 4:1.5 rem
  • Is the size – 5:1.25 rem
  • Rem is – size – 6:1
  • Is the size – 7:0.75 rem

You can specify different text sizes for different devices.

  • Is-size-1-mobile: indicates that the mobile phone is size-1
  • Is-size-1-tablet: indicates that the tablet is size-1
  • Is-size-1-touch: size-1 for mobile phones and tablets
  • Is-size-1-desktop: is size-1 for desktop, widescreen, and HD
  • Is-size-1-wide is size-1 in widescreen and in high definition
  • Is-size-1-fullhd: the hd value is size-1

In addition, there are font color, alignment, weight modification classes.

Six, custom

The final section is an advanced section that explains how to customize Bulma, that is, change the default styles. Bulma uses Sass syntax (note, not Scss syntax), so custom styles must also use Sass.

First, clone or download the source code.


$ git clone https://github.com/jgthms/bulma.git
Copy the code

Then, install the dependencies.


$ cd bulma
$ npm install
Copy the code

Next, in the source code root directory, create a new app.sass file where the custom code is written. In it, the Bulma base variable is introduced first. Change it if you need to.


@import "./sass/utilities/initial-variables"

$blue: #72d0eb
$pink: #ffb3b3
$family-serif: "Merriweather", "Georgia", serif
Copy the code

In the code above, the preset blue, PINK, and family-serif variables are changed.

Some Bulma variables are derived from base variables and can be changed if necessary.


$primary: $pink
Copy the code

In the code above, the main color is changed to the PINK variable.

Next, load the Bulma entry script in this file.


@import "./bulma"
Copy the code

Below this line, you can write your own styles, such as underlining all headings.


.title {
  text-decoration: underline;
}
Copy the code

Finally, open package.json and find the following line.


"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",
Copy the code

Change bulma. Sass into app.sass.


"build-sass": "node-sass --output-style expanded --source-map true app.sass css/bulma.css",
Copy the code

After each change, run NPM run build to generate your own style sheet CSS /bulma.css.

(Full text)

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

There is no shortage of job opportunities for excellent people, only good opportunities for themselves. But they often don’t have the energy to find the best fit among the numerous opportunities.

100Offer allows you to anonymously display your resume and career expectations to hundreds of Internet companies, saving time searching for jobs and sending resumes. In this way, you are interested in the enterprise, take the initiative to invite you to attend an interview.

Among the users of 100offer, there are some former BAT employees who are tired of the repetitive work of big companies and turn to start-up companies. There are Internet people who have worked for small companies for years and want to get into big companies. There are also yearning for work and life abroad, the success of the body over the wall of Singapore engineers.

Are you ready to take a different approach to better career opportunities? Submit your application now!

In addition, October 24th is Programmer’s Day. As a coder for a living, have you been labeled too many times by others as —- inflexible, cute, nerdy, and inconsiderate?

100Offer gives you a chance to rip off the tag: follow 100Offer wechat account and send a message/picture/video/voice… Show your skills in addition to coding, there is a maximum value of 1024 yuan “programmer interest fund” waiting for you!

(after)