Where to Discuss?

Local Group

Preface

Goal: Prepare common blog post theme for use later with framework.

This chapter is focusing on content page.


1: Prepare

This chapter also summarize what we have done so far.

Directory Preparation

We need a new SASS section for this post.

❯ tree sass/css
sass/css
├── bootstrap.scss
├── feather
│   └── _icons-feather.scss
├── helper.scss
├── main
│   ├── _decoration.scss
│   ├── _layout-content.scss
│   ├── _layout-page.scss
│   ├── _list.scss
│   ├── _logo.scss
│   └── _sticky-footer.scss
├── main.scss
├── materialize
│   └── _shadow.scss
├── open-color
│   ├── _open-color-classes.scss
│   └── _open-color-variables.scss
├── post
│   ├── _content.scss
│   └── _navigation.scss
└── _variables.scss

5 directories, 16 files

This only require two new file artefact.

  • _content.scss

  • _navigation.scss .

Bootstrap OC: Restructure SASS Directory

In real world blogging, this post section has a more SASS stylesheet document. I have about five or seven, depend on the framework that I choose.

Main SASS

Of course you have to update your main SASS to reflect the above

// Import partials from `sass_dir` (defaults to `sass/css`)
@import 
  // Bootstrap Related
  "../bootstrap/functions",
  "variables",
  "../bootstrap/variables",
  "../bootstrap/mixins/breakpoints",

  // Heeyeun's Open Color
  "open-color/_open-color-variables",

  // Tailor Made
  "main/layout-page",
  "main/layout-content",
  "main/logo",
  "main/decoration",
  "main/sticky-footer",
  "main/list",
  
  "post/content",
  "post/navigation"
;

Bootstrap OC: Tree and Main SASS


2: Header

Blog post header customization is very common. I utilize badge (or tag). Luckily most CSS framework has built in support to display tag.

Stylesheet

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/*
 * Blog posts
 */

.blog-body {
  margin-bottom: 1rem;
}
.blog-header {
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: .25rem;
    a {
      color: map-get($oc-gray-list, "9");
    }
    a:hover {
      color: map-get($oc-gray-list, "6") !important;
    }
  }
}
.blog-header .meta {
  margin-bottom: 2.0rem;
}
.blog-body p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
  • .

HTML Content

I know this example is long. this is just a demo of tag elements, along with feather icons.

    <main class="col-md-8 px-0">
      <section class="main-wrapper oc-blue-5">
        <div class="blog oc-white z-depth-3 hoverable">
          <section class="blog-header oc-blue-1">
            <h4 class="font-weight-bold" itemprop="name headline">
              <a href="#">Cause You're Different!</a></h4>

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

            <div class="field meta">
              <div class="float-left">
              <span class="meta_author badge oc-indigo-7
                           oc-white-text z-depth-1">
                  <i data-feather="user" class="feather-14"></i>
                  &nbsp;
                  <span itemprop="author"
                        itemscope itemtype="http://schema.org/Person">
                  <span itemprop="name">epsi</span></span>
              </span>
              &nbsp;
              </div>

              <div class="float-left">
                <span class="meta-time badge oc-cyan-7
                             oc-white-text z-depth-1">
                  <i data-feather="clock" class="feather-14"></i>
                  &nbsp;A few days ago.
                </span>
                &nbsp;
              </div>

              <div class="float-right">
                  <a href="#">
                    <span class="badge oc-teal-7
                                 oc-white-text z-depth-1 hoverable"
                      ><i data-feather="tag" class="feather-14"></i>
                      &nbsp;love</span></a>
                &nbsp;
              </div>

              <div class="float-right">
                  <a href="#">
                    <span class="badge oc-blue-7
                                 oc-white-text z-depth-1 hoverable"
                      ><i data-feather="folder" class="feather-14"></i>
                      &nbsp;rock</span></a>
                &nbsp;
              </div>
            </div>

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

          <article class="blog-body" itemprop="articleBody">
            <p>When you can do the things that I can, but you don't, 
            and then the bad things happen,
            they happen because of you.</p>
          </article>
        </div>
      </section>
    </main>

Bootstrap OC: Blog Post Header


3: Navigation

Blog post navigation along with pagination customization, is also very common. And most CSS framework has built in support to navigation.

Stylesheet

Bootstrap navigation in bootstrap is harcoded to pagination. You cannot rename class to navigation.

li.post-previous a:after {
  content: " previous";
}

li.post-next a:before {
    content: "next ";
}

.blog-body .pagination {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

HTML Content

Just add navigation code after the article element.

          <article class="blog-body" itemprop="articleBody">
            <p>When you can do the things that I can, but you don't, 
            and then the bad things happen,
            they happen because of you.</p>

            <ul class="pagination justify-content-between" 
                role="navigation" aria-labelledby="pagination-label">

              <li class="page-item post-previous">
                <a class="page-link" 
                   href="#" 
                   title="next article name">&laquo; </a>
              </li>

              <li class="page-item post-next">
                <a class="page-link" 
                   href="#" 
                   title="previous article name"> &raquo;</a>
              </li>

            </ul>
          </article>

Bootstrap OC: Blog Post Navigation


4: Landing Page

Again, test our single page design, with a more complete landing page.

  <!-- responsive multicolor main layout -->
  <div class="row layout-base maxwidth">

    <main class="col px-0">
      <section class="main-wrapper single oc-blue-5">
        <div class="blog oc-white z-depth-3 hoverable">
          <section class="blog-header oc-blue-1 text-center">
            <h3 class="font-weight-bold" itemprop="name headline">
              <a href="#">Your Mission</a></h3>
            <h4 class="font-weight-normal">
              <a href="#">Should you decide to accept</a>
          </section>

          <article class="blog-body text-center" itemprop="articleBody">
            <p>
              <a href="#" 
                 class="btn btn-primary my-2"
                >Articles Sorted by Month</a>
              <a href="#" 
                 class="btn btn-secondary my-2"
                >Articles Sorted by Tag</a>
            </p>

            <p>
              As always,
              should you be caught or killed,
              any knowledge of your actions will be disavowed.</p>

            <img src="assets/images/one-page.png" 
                 alt="business card">

            <p class="text-muted">
              <small>
              <i data-feather="home" class="feather-14"></i>&nbsp;
                Whitewood Street, Monday Market,
                East Jakarta, 55112, Indonesia.
              </small>
            </p>
          </article>
        </div>
      </section>
    </main>

  </div>

Bootstrap OC: Landing Page

Landing page is not really blog post post. I just put here just because I don’t want to make new article.

I just keep this article simple.


5: Summary

As a summary, here is the final looks, of our blog post in desktop screen.

Bootstrap OC: Blog Post Desktop


What is Next ?

The last part is a bonus. It is more like a javacript tutorial, which use a bunch of Bootstrap class.

Consider continue reading [ Bootstrap OC - Javascript Toggler ].

Thank you for reading.