Project: StartBootstrap Agency for Drupal 8

Share this

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.


Submitted by Paul Rijke Sun, 11/19/2017 - 09:52

Hola Josue,

Nice artice! You're definitely on the right track. Some advice though. For example, you talk about an issue with the scroll-spy funtion, but you do not explain what the issue is. So giving feedback of aother solutions is hard.

I am not sure about the sass subtheme for D8 repo as well. I looks to me like a standard bootstrap theme with a standard subtheme. The bootstrap theme itself explains very well how to create a subtheme of of it. Or do I miss a point here?

I will install you're theme soon and try to give more feedback. Do you accept code commits?

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.