Drupal 8 W3CSS theme

by Gisle Hannemyr

The Drupal8 W3CSS bridge theme brings the W3.CSS framework to Drupal 8. This chapter explains how to install and configure this theme.

Table of contents

Drupal projects discussed in this chapter: Drupal8 W3CSS.

Introduction

[Currently used on drupalprimer.com. These note are very half baked with lot of legacy content from my notes about Bootstrap for Drupal 7.]

The W3.CSS framework is a CSS framework for lightweight websites, originating from w3schools.com (a website created in 1998 by Refsnes Data AS, a Norwegian software development and consulting company). The parent company apparently has no own website.

It supports mobile-first design by default, and it is smaller and faster than Bootstrap and similar frameworks. It is also supposed to be easier to learn and easier to use than other CSS frameworks.

The design looks good out of the box, and its features are good enough for most project. Its home page claims:

The Drupal 8 bridge module W3.CSS is called Drupal8 W3CSS.

W3CSS is compatible with the latest versions of the Chrome, Firefox, MSIE, Opera and Safari browsers. It may not render pages correctly in some older browsers.

W3CSS is specifically designed to support responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (i.e. desktop computer, tablet, smartphone).

It supports ARIA (Accessible Rich Internet Applications) roles. ARIA is a specification from the W3C and created to improve accessibility of applications by providing extra information to assistive technologies, such as screen readers, via attributes which could be added to HTML.

For documentaion, please see:

Installation

You start out by downloading the Drupal8 W3CSS theme and place it in the customary place for Drupal 8 themes (i.e. themes/contrib). The following composer-command will do that:

$ composer require 'drupal/d8w3css:^1.17'

Then, set W3CSS as the default theme. Make sure you are logged in as an administrator, and in the black administraton menu at the top of the screen, press “Appearance”. Then click on the link “Install and set as default” for the theme. Also uninstall Bartik.

After you enable it, you will find that it has a few settings that can be adjusted in the W3CSS GUI. While well suited to serve as a base theme, Drupal W3CSS also works reasonable well on its own for projects where you just want a basic responsive website.

However, if you want to customize the look and feel of the site beyond what can be done through the GUI, you need to create a sub-theme.

Creating a sub-theme

It comes with a skeleton.

[TBA]

Main menu

[Needs review]

The W3CSS default menu behaviour does not auto-expand a menu on hover. It works as a click on the top level to expand. This works well on mobile platforms where hover is not available.

In your menu settings page, enable “Show as expanded” for the parent item of the menu items you want to appear in the dropdown.

If you need a dropdown on hover, use the Superfish bridge project to enable the jQuery Superfish plugin.

W3CSS GUI

Before drilling down into CSS, it may be a good idea to explore the settings the Drupal W3CSS bridge module let you change in the GUI. It may save you from creating a lot of custom CSS for your site.

To explore the GUI, navigate to Appearance » Settings for your W3CSS sub-theme, you'll find a tab with the heading “Drupal 8 W3CSS Theme”. The vertical tab has the following four components:

  1. Page element display
  2. Logo image
  3. Favicon
  4. Webside's width
  5. Disable/enable match height
  6. Main container columns' width
  7. W3CSS predefined themes
  8. Advanced site colors
  9. Social media links
  10. Copyright
  11. Credit

The first three (Page element display, Logo image, Favicon) are the same as those found under the “Global settings” tab. However, they must be set in the theme. Setting them under “Global settings” has no effect. Below are some brief notes about using these. [This should be expanded, but it has to do for now.]

Page element display

Four checkboxes to disable or enable display of the following:

  1. User pictures in posts
  2. User pictures in comments
  3. User verification status in comments
  4. Shortcut icon (i.e. favicon).

Logo image

This lets you specify path to the custom logo, relative to the the root of the public file system. For instance “unmanaged/logo.svg” places it in a directory named “unmanaged” below this root.

Vector files of type .svg are preferred, but bitmaps (e.g. .png) works as well.

Favicon

This lets you specify path to the custom favicon. It works just like the logo image.

Webside's width

This let you se the website's width by entering a class defining the with as a percentage or in pixes (e.g. w3-width-100-percent and w3-width-800).

Default seems to be 1600px (w3-width-1600).

Disable/enable match height

Four checkboxes to disable or enable match height for:

  1. Top Containers
  2. Main Containers
  3. Bottom Containers
  4. Footer Containers.

Main container columns' width

The default settings for the columns in the main containers is (25% 50% 25%). This provides a checkbox to change the columns in the main container to (33% 33% 33%).

W3CSS predefined themes

The predefined themes are actually predefined colour schemes. They do not alter any templates.

By specifying one of these (e.g. “w3-theme-amber”) you get a well-coordinated colour scheme for the site.

Advanced site colors

This offer fine-grained control over the site's colour scheme.

Social media links

The provides a checkbox to show or hide social media links as well as the link to the site's RSS feed..

If they are visible, you can specify the URLs to link. By default, these points to the social media site's of the creator of the Drupal bridge theme, so make sure you change them on a production site.

If no link is specified, the item does not appear.

Copyright

Lets you change the copyright message that appears in the footer.

Credit

Checkbox to show the design credit statement in right edge of the footer. The default credits the creator of the Drupal bridge theme.

The name is hardwired into the page template (page.html.twig), so to change this, you need to subtheme or hack the theme.

Layout [D7?]

The following diagram shows the structure of the default layout of the page.html.twig that ships with W3CSS.

<header id="navbar">
  <div class="container">
    <!-- logo, name and navbar -->
  </div>
</header>
<div class="main-container container">
  <header id="page-header">
    <!-- slogan -->
  </header>
  <div class="row">
    <aside class="col-sm-3">
      <div class="region region-sidebar-first">
      </div>
    </aside>
    <section class="col-sm-X">
      <div class="region region-content">
      </div>
    </section>
    <aside class="col-sm-3">
      <div class="region region-sidebar-second">
      </div>
    </aside>
  </div>
</div>
<footer>
</footer>

Below is what is measured by inspecting the layout with a fixed grid. For each element the following values are recorded for the horizontal dimension: margin+padding+content.

Tweaking the layout

Moving header#page-header inside the outmost container of header#navbar works as one would expect, and puts the site slogan in the position most people would expect to find it.

<header id="navbar">
  <div class="container">
    <!-- logo, name and navbar -->
    <header id="page-header">
      <!-- slogan -->
    </header>
  </div>
</header>
…

To change the header to span the full width of the screen, you may either, set the “Fluid container” class in the GUI, or you may wrap it in a <div> of the class “container-fluid” as shown below.

<div class="container-fluid">
  <header id="navbar">
    <div class="container">
      <!-- logo, name and navbar -->
      <header id="page-header">
        <!-- slogan -->
      </header>
    </div>
  </header>
<div>
…

The same technque works for making the footer span full width.

If you change this in the GUI, the navbar and footer will be in a fluid container that spans the full screen. If you use a wrapper, they will be in fixed size containers and only the decoration (e.g the header and footer background colour will span the full screen width.

Grid [D7]

The fixed grid layout by default assumes a total width of 1200px (i.e. 100px/column). You may override this by navigating to Appearance » Settings » General » Container and checking the box for “Fluid container”, which provides a full width fluid layout.

The page.html.twig template that comes with Drupal W3CSS set up 3 regions side-by-side in the main page area.

To enable or disable sidebars, navigate XXXX

The example is below is just a copy of the original function, with comments added. It assume both sidebars are set up with the class col-sm-3 in page.html.twig and compute the class to use for the content_col­umn_class for three cases: Both, one or none of the sidebars populated.. If you instead use col-sm-2 for the sidebars, the content_column_class should be col-sm-8, col-sm-10 or col-sm-12 respectively.

// Assuming both sidebars are col-sm-3
function mybootrap_preprocess_page(&$variables) {
  // Add information about the number of sidebars.
  if (!empty($variables['page']['sidebar_first']) &&
    !empty($variables['page']['sidebar_second'])) {
    // Both: 12 - 3 - 3 = 6
    $variables['content_column_class'] = ' class="col-sm-6"';
  }
  elseif (!empty($variables['page']['sidebar_first']) ||
    !empty($variables['page']['sidebar_second'])) {
    // One: 12 - 3 = 9
    $variables['content_column_class'] = ' class="col-sm-9"';
  }
  else {
    // None: 12 = 12
    $variables['content_column_class'] = ' class="col-sm-12"';
  }
}

If any of these assuptions change, you need to override this function in your subtheme's template.php. For instance: If the number of columns preset for the sidebars change, this must be taken into account when computing the content_column_class, If the page template breaks on col-md instead col-sm, the content_column_class must be of the same type.

Responsive layout

[Needs review]

A responsive grid system, where the display respons to the screen size, is in the DNA of W3CSS.

The breakpoints for media queries are defined in variables.less, astarting round line 283. For W3CSS, they are:

@screen-xs-min:  480px; // Extra small (deprecated)
@screen-sm-min:  768px; // Small
@screen-md-min:  992px; // Medium
@screen-lg-min: 1200px; // Large

When creating responsive pages, the default should be for mobile devices (i.e. devices with screen width < 768px), then create overrides for larger devices.

For example, the CSS below will by create a rule where the logo class by default don't display (we usually want this for mobile devices), but if the screen width ≥ 768px, it will display as a block.

.logo {
  display: none;
  @media (min-width: @screen-sm-min) {
    display: block;
  }
}

W3CSS comes with four types of class prefixes for creating columns for different size displays:

noteThe class prefix col-xs is not deprecated, even if the variable @screen-xs-min is.

The proper use of the grid is to use it to create responsive blocks in a sub-theme. However, the grid can be used everywhere, including inside Drupal components such as an Article node. Below is an example that demonstrates the use of the grid in this context.

Following the prefix is the number of columns (from 1 to 12) to use for the div-container. I.e. col-xs-12 request that all 12 colums are used for the container on extra small displays.

To see it in action, create an article node with the following markup in the body:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col1">
      <h4>Column 1</h4>
    </div>
    <div class="col-xs-12 col-sm-6 col2">
      <h4>Column 2</h4>
    </div>
  </div>
</div>

Make sure you set the text format to "Full HTML", otherwise the markup will be stripped and the CSS classes will have no effect.

When we specify the class col-xs-12 col-sm-6, it means the element should span all 12 of the available W3CSS columns on extra small screens, but only 6 columns on small displays and larger. You may want to see how this works by viewing this node on displays of different width.

Please note that this is just a demonstration. The CSS classes that create columns is not supposed to be used inside Drupal nodes. The proper use of such CSS is inside a page template (e.g. page.html.twig) to create responsive page layouts.

A CSS media query is an expression of some media feature that resolves in either true or false. When a media query is true, the corresponding style sheet or style rules are applied.

Class names for hiding stuff, or making it visible as a block:

hidden-xs visible-xs-block
hidden-sm visible-sm-block
hidden-md visible-md-block
hidden-lg visible-lg-block

Se also: StackOverflow: Hiding elements in responsive layout.

Colours

[TBA]

W3CSS components and helper classes

Below are a list of the components and helper classes that you may want to use when creating content on a website that builds upon the W3CSS framework.

Display

Alignment.

Source: W3.CSS Display.

Images

The class “w3-image” provide a responsive image, where it automatically downsize itself to fit the size of its container.

The W3.CSS has no class for centring block elements. The only classes which do that have other effects as well. To center an image, you can do this:

<div class="w3-center" style="margin:auto;">
<img  class="w3-image" width="600"
  src="/sites/default/files/unmanaged/image.png"
  alt="image.png" title="Example">
</div>

Sources: W3.CSS Images, StackOverflow.com.

Updating W3CSS

[Needs review]

On a Drupal site, W3CSS are made up of two components:

All of these may need updating.

Updating the W3CSS base theme

[Needs revising]

If you've followed the instructions above and made all your changes to W3CSS in a sub-theme, you should be able to update without overwriting your changes with the following drush command:

# drush dl XXXX

W3CSS is a theme and does not use the database, so there is no need to worry about schema-updates.

After installing the new version, compare the regions set up in THEMENAME.starterkit with those defined in myXXXX.info

Updating Drupal W3CSS Styles

This may be updated, in particular if the Drupal W3CSS is updated. Provided you've kept your own styles in separate files, just stash your own styles and variable-overrides.less install the new version and restore your changes.

Quirks

This sections describes quirks you may experience when W3CSS is used on a Drupal 8 website.

Final word

[TBA]

Last update: 2019-05-11 [gh].