Bulma -- CSS framework --

WEB

Overview:

Bulma is an open source CSS framework based on Flexbox. Bulma uses autoprefixer to make Flexbox features compatible with earlier browser versions.

Bulma is compatible with recent versions of:

  • Chrome

  • Edge

  • Firefox

  • Opera

  • Safari

  • Internet Explorer (10+) is only partially supported.

Links:

Basic:

Template:
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
      <link rel="dns-prefetch" href="https://maxcdn.bootstrapcdn.com">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css" integrity="sha256-spCEAaZMKebC3rE/ZTt8jITn65b0Zan45WXblWjyDyQ=" crossorigin="anonymous" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

      <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0">
      <title>Title!</title>
    </head>

    <body>
        <header>
            <nav class="navbar"></nav>
        </header>
        <main>
            <section class="section">
                <div class="container">
                    <h1 class="title">TITLE</h1>
                    <h2 class="subtitle">SUB TITLE</h2>
                    <div class="columns">
                        <div class="column">
                        </div>
                        <div class="column">
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer class="footer">
            <div class="container">
            </div>
        </footer>
    </body>
  </html>

Responsiveness:

breakpoints:
  - mobile       # upto  768px
  - tablet       # from  769px
  - desktop      # from 1024px
  - widescreen   # from 1216px
  - New! fullhd  # from 1408px

Titles:

Class:
  .title:
    - is-1    # 3.00rem
    - is-2    # 2.50rem
    - is-3    # 2.00rem
    - is-4    # 1.50rem
    - is-5    # 1.25rem
    - is-6    # 1.00rem
    - is-7    # 0.75rem
  .subtitle:
    - is-1    # 3.00rem
    - is-2    # 2.50rem
    - is-3    # 2.00rem
    - is-4    # 1.50rem
    - is-5    # 1.25rem
    - is-6    # 1.00rem
    - is-7    # 0.75rem

    - is-spaced    # spacing between titles and subtitles

Colmns:

Class:
  .columns:
  .column:
    - is-three-quarters  # 3/4
    - is-two-thirds      # 2/3
    - is-half            # 1/2
    - is-one-third       # 1/3
    - is-one-quarter     # 1/4

    - is-2               # 2/12
    - is-3               # 3/12
    - is-4               # 4/12
    - is-5               # 5/12
    - is-6               # 6/12
    - is-7               # 7/12
    - is-8               # 8/12
    - is-9               # 9/12
    - is-10              # 10/12
    - is-11              # 11/12

    - is-offset-1
    - is-offset-12

    - is-narrow

Gap:  # default 0.75rem
    - is-gapless
    - .is-variable


    - is-multiline

Section:

Class:
  .section:     # padding: 3rem 1.5rem;

  @media screen and (min-width: 1024px) {
  - .is-medium  # padding: 9rem 1.5rem;
  - .is-large   # padding: 18rem 1.5rem;

Container:

Class:
  .container:     # margin: 0 auto; position: relative;

    - .is-fluid   # margin-left: 32px; margin-right: 32px;
    - .is-widescreen
    - .is-fullhd

Columns:

Class:
  .columns:     #
    - .is-centered
    - .is-gapless
    - .is-mobile
    - .is-multiline
    - .is-vcentered
    - .is-variable
  .column:      # padding: 0.75rem;
    - .is-narrow
    - .is-full
    - .is-three-quarters
    - .is-two-thirds
    - .is-half
    - .is-one-third
    - .is-one-quarter
    - .is-offset-three-quarters
    - .is-offset-two-thirds
    - .is-offset-half
    - .is-offset-one-third
    - .is-offset-one-quarter
    - .is-1
    - .is-offset-1
    - .is-12
    - .is-offset-12

    - .is-narrow-mobile
    - .is-full-mobile
    - .is-three-quarters-mobile

    - .is-narrow-tablet
    - .is-full-tablet
    - .is-three-quarters-tablet

    - .is-narrow-touch

    - .is-narrow-desktop

    - .is-narrow-widescreen

    - .is-narrow-fullhd