Bulma SASS - Post

   
   
 bulma  sass  
 frontend  
Article Series

Bulma

Bulma Material Design

Animation Observer

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Focusing on content page.

Especially the panel.

1: Content

It is very similar as the previous one, with just a few CSS adjustment.

The Sylesheet: Content

.blog-post
  margin-bottom: 1rem

.blog-post-title
  margin-bottom: .25rem
  font-size: 2.5rem

.blog-post-meta
  margin-bottom: 1.25rem

.blog-post p
  margin-top: 0.5rem
  margin-bottom: 0.5rem

The Main Stylesheet

Again, consider make the main sass a line longer.

...

@import "blog"
@import "panel"
@import "list"

@import "post"

Always recompile the CSS.

$ dart-sass --watch -I sass sass/css-61:css/
Compiled sass/css-61/main.sass to css/main.css.
Sass is watching for changes. Press Ctrl-C to stop.

The Document: Example Code

And also very few adjustment, by adding the blog-post class.

    <main role="main" 
          class="column is-two-thirds blog-column box-deco has-background-white">
      <div class="blog-post" itemscope itemtype="http://schema.org/BlogPosting">
        <article class="main-content" itemprop="articleBody">
          <h4 class="title is-4">Letters to my Bulma</h4>
          <p>There are so many things to say
          to Bulma, Chici, and that Android 18.
          I don't want to live in regrets.
          So I wrote this for my love.</p>
        </article>
      </div>
    </main>

The Preview

You can see, the not so different look as below:

Bulma SASS: Post: Content

2: Header

This takes a very few SASS line, but a long hypertext document.

The Sylesheet: Content

.main_title
  background: rgba(256, 256, 256, 0.5)
  a
    color: $primary
  a:hover
    color: $gray

We also need to adjust this $primary color to match the brand logo: It is time to add _initial-variables.

// Initial Variables

$brand-red:  #802020
$brand-gray: #404040

$gray:   #7b8a8b
$yellow: #f7d316
$blue:   #2980b9

$dark:    $brand-red
$primary: $brand-gray


$navbar-breakpoint: 769px

The Main Stylesheet

Again, consider make the main sass a line longer.

...

@import "post"
@import "post-header"

Always recompile the CSS.

$ dart-sass --watch -I sass sass/css-62:css/
Compiled sass/css-62/main.sass to css/main.css.
Sass is watching for changes. Press Ctrl-C to stop.

The Document: Example Code

As I promise, a longer document line. It is basically just tags.

    <main role="main" 
          class="column is-two-thirds blog-column box-deco has-background-white">
      <div class="blog-post" itemscope itemtype="http://schema.org/BlogPosting">
        <section class="box">
          <div class="main_title"> 
            <h4 class="title is-4 blog-post-title" itemprop="name headline">
              <a href="#">Letters to my Bulma</a></h4>
          </div>

          <div class="is-clearfix"></div>

          <div class="field">
            <div class="is-pulled-left">
            <span class="meta_author tag is-primary is-small">
                <span class="fa fa-user"></span>
                &nbsp;
                <span itemprop="author" itemscope itemtype="http://schema.org/Person">
                <span itemprop="name">epsi</span></span>
            </span>
            &nbsp;
            </div>

            <div class="is-pulled-left">
              <span class="meta-time tag is-light is-small">
                A few days ago.
              </span>
              &nbsp;
            </div>

            <div class="is-pulled-right">
                <a href="#">
                  <span class="tag is-light is-small"><span class="fa fa-tag"></span>&nbsp;love</span></a>
              &nbsp;
            </div>

            <div class="is-pulled-right">
                <a href="#">
                  <span class="tag is-dark is-small"><span class="fa fa-folder"></span>&nbsp;rock</span></a>
              &nbsp;
            </div>
          </div>

          <div class="is-clearfix"></div>
        </section>

        <article class="main-content" itemprop="articleBody">
          <p>There are so many things to say
          to Bulma, Chici, and that Android 18.
          I don't want to live in regrets.
          So I wrote this for my love.</p>
        </article>
      </div>
    </main>

The Preview

Consider have a look at the preview from your favorite web browser.

Bulma SASS: Post: Header

3: Navigation

This content page will be better if we can give navigation. We’re almost done with this content.

The Sylesheet: Content

a.post-previous:after
    content: " previous"

a.post-next:before
    content: "next "

The Main Stylesheet

Again, consider make the main sass a line longer.

...

@import "post"
@import "post-header"
@import "post-navigation"

Always recompile the CSS.

$ dart-sass --watch -I sass sass/css-63:css/
Compiled sass/css-63/main.sass to css/main.css.
Sass is watching for changes. Press Ctrl-C to stop.

The Document: Example Code

    <main role="main" 
          class="column is-two-thirds blog-column box-deco has-background-white">
      <div class="blog-post" itemscope itemtype="http://schema.org/BlogPosting">
        <section class="box">
          ...
        </section>

        <article class="main-content" itemprop="articleBody">
          <p>There are so many things to say
          to Bulma, Chici, and that Android 18.
          I don't want to live in regrets.
          So I wrote this for my love.</p>
        </article>

        <br/>
        <nav class="pagination is-centered" 
             role="navigation" aria-label="pagination">

            <a href="#" class="pagination-previous post-previous"
               title="next article name">&laquo;&nbsp;</a>

            <a href="#" class="pagination-next post-next"
               title="previous article name">&nbsp;&raquo;</a>
        </nav>
      </div>
    </main>

The Preview

Consider open from file manager, so you can examine in your favorite web browser.

Bulma SASS: Post: Navigation

This actually in 480px, or you can say under mobile breakpoint.

4: Summary

As a summary, consider to see the page again in 800px, or you can say under desktop breakpoint.

Bulma SASS: Post: Desktop

What is Next ?

We are not finished yet with SASS in Bulma. There are still issues we have to face in real world website stylesheet. Consider continue reading [ Bulma SASS - Helpers ].

Thank you for reading.