Lesson 4: Styling

Your published article (see illustration Published article with no styling) relies on default styling applied by a browser. In this lesson, you will add traditional CSS styling to various HTML elements and create an associated CSS stylesheet.

This lesson uses the Block-Element-Modifier (BEM) methodology for assigning class names and corresponding CSS selectors. BEM is a proven technique for managing class names in commercial-grade web sites. For more information about BEM, see Naming.

Step 1: Prepare for this lesson

Before starting this lesson, do the following:

  1. Complete Lesson 2: Creating a frontend.
  2. If you stopped the Brightspot server, do the following:
    1. Restart it by typing ./run.sh (Linux, OS X) or run.cmd (Windows). The login page appears in your browser at localhost:9480.
    2. Log in to display the dashboard.
  3. If you stopped the Styleguide server, restart it by typing gulp styleguide.

Step 2: Apply classes to the template

In the tutorial Lesson 2: Creating a frontend you created a template that included traditional HTML. In this step you add class attributes to some of those elements.

  1. Update the file Article.hbs (see the illustration Tutorial project structure) with the following highlighted lines:

    Template with class attributes
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>{{headline}}</title>
            <link rel="stylesheet" type="text/css" href ="/styleguide/All.min.css" />
        </head>
    
        <body>
            <div class="Article">
                <div class="Article-headline">
                    <h1>{{headline}}</h1>
                </div>
                <div class="Article-body">
                    {{body}}
                </div>
                <div class="Article-image">
                    <img src="{{imageUrl}}" height="300">
                </div>
            <div>
        </body>
    
    </html>
    

In the previous snippet—

  • Line 7 supplies the link to an external style sheet.
  • Lines 11, 12, 15, and 18 apply traditional class attributes.

Step 3: Declare selectors using Less

Less is a styling language and preprocessor that generates traditional CSS files at build time. Using Less along with the BEM methodology greatly reduces the burden of maintaining and debugging CSS files.

Note

When creating Less files, configure your text editor’s end-of-line character to newline only (\n).

  1. Change to the directory brightspot-tutorial/init/styleguide/article/ (see the illustration Tutorial project structure).

  2. Create a new file Article.less, and enter the following text (last line is blank):

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    .Article {
        &-headline {
            font-size: 18px;
            color: red;
            text-decoration: underline;
        }
    
        &-body {
            font-size: 14px;
        }
    
        &-image {
            border: solid green 2px;
        }
    }
    /* Replace this comment with a blank line. */
    

In the previous snippet—

  • Line 1 establishes Article as the block portion of a BEM selector name. Brightspot expands line 1 to create the CSS selector .Article, corresponding to the class name Article in the snippet Template with class attributes.
  • Line 2 establishes headline as the element portion of a BEM selector name. Brightspot expands line 2 to create the CSS selector .Article-headline, corresponding to the class name Article-headline in the snippet Template with class attributes.
  • Line 8 establishes body as the element portion of a BEM class name. Brightspot expands line 8 to create the CSS selector .Article-body, corresponding to the class name Article-body in the snippet Template with class attributes.
  • Line 12 establishes image as the element portion of a BEM class name. Brightspot expands line 12 to create the CSS selector .Article-image, corresponding to the class name Article-image in the snippet Template with class attributes.

Step 4: Import Less files into the master file

Brightspot creates a master CSS file from the file styleguide/All.less. Therefore, you need to import your customized Less files into this file.

  1. Open the file brightspot-tutorial/init/styleguide/All.less, and replace its contents with the following text (last line is blank):

    @import 'styleguide/article/Article';
    /* Replace this comment with a blank line. */
    
  2. Refresh the page running at localhost:3000/_styleguide/index.html, and click Article. The preview appears with the new formatting (headline set with red text and underline, image surrounded with a green border).

    ../../../_images/styleguide-article-formatted.png

Step 5: Render styled article

  1. In Brightspot, refresh the dashboard. (If the dashboard does not appear, halt the server in the terminal window by pressing Ctrl-C, restarting the server with ./run.sh or run.cmd, and then reloading the page in the browser.)

  2. In the Recent Activity widget, click the article you created in Lesson 1: Create an Article content type.

  3. In the URLs widget, click the permalink. The article appears with the expected styling. (If the styling does not appear, halt the server in the terminal window by pressing Ctrl-C, restarting the server with ./run.sh or run.cmd, and then reloading the page in the browser.)

    ../../../_images/styleguide-article-published.png

Summary

In this lesson you learned the following:

  • How to define BEM class names using Less.
  • How to add BEM class names to elements in a template.
  • How to import a Less file into a parent Less file.