Project: StartBootstrap Agency for Drupal 8

Today I am going to talk about a Theming project for Drupal 8, Based on the clean design from Start Bootstrap. The goal is to create a subtheme based on bootstrap but super clean, no extra wrappers for every element.

What we want for this project, well a simple theme based on bootstrap with a clean structure. For this Drupal 8 offer more possibilities than his predecessor Drupal 7, here we have friendly twig templates and a clean structure.

So, I recommend you two post before this one:

  1. Sass Sub-theme for Drupal 8.

  2. Twig templates for custom block

By this project I have downloaded a bootstrap distribution and created a subtheme with sass, it is no compile yet, but you can check the config.rb file in the root folder and run there the compass watch command.

Inside it, is all the style with sass from bootstrap and from the agency.

The main idea is to create one style for all the therme, but for now you can inspect the structure, the components off the project and adjust the main variables according to your needs.

Also, I have the agency.libraries and the page.html.twig files to define the regions. There are the regions: Content, Primary and Secondary exactly the same as bootstrap it will be very useful for the navigation of the site.

There are a couple of issues about the theme, (first of all I don't know if I am following good practices), the main of them is the conflict with the agency.js file and the scrollspy function inside it, I have solved it by adding that on the body in the html.html.twig file.

 <body data-spy="scroll" data-target="#mainNav" data-offset="50" {{ attributes.addClass(body_classes) }}>

I dream in a clean structure for the theme, si there are two files in the templates, region.html.twig and block.html.twig, where I remove some wrappers, so please check them.

In the module folder, I have a custom module, twig_block with 2 custom blocks inside the templates folder, one is the masthead, where is the title for the slider view, which is in the features folder. Also, I have a block for the different services, in the future, this could become a view with a specific content type, that will be easy to administrate.

So, please check the code, and let me know if I am going in a good way. Thanks!

The theme.

The modules.