Version 9: What would be the easiest way to build a theme using Bedrock/Bootstrap5?

We are all excited about the features and power version 9 offers. Monitoring the thread of @afixia Basic Bedrock Theme Repo Made for Public Use and e.g. questions of @linuxoid, we tried – without success – to upgrade our themes.

Unfortunately building or maintaining a theme is not as easy anymore as it was with LESS. When a client asked us to quickly develop or design new layouts with new styles we were able to deliver. Now, with the new version 9 (afik) you cannot build or modify a theme with bedrock/bootstrap 5 without having a local development environment like mamp/npm. As a design agency (with fair knowledge of PHP, Laravel, npm etc.), we find it very difficult to offer new themes, conversions or upgrades to our clients.

So questions are:

  • What would be the easiest way to build a theme using Bedrock/Bootstrap5?
  • Is it possible to do that without npm?
  • In the long term, does it matter using LESS in future themes?
  • Is there a way to add or modify sccs remotedly, whe the site is already deployed?

Thank you all for help on this topic.

1 Like

Do you even need to use Bedrock?
Whilst I’ve read about what it offers and the advantages, there’s no requirement that I’m aware of to actually build your themes with it - you can compile your own Less, Sass, custom Bootstrap/Foundation/Whatever css, or even just write vanilla CSS.

Could anyone tell me what the Bedrock is and what I can do with it and how?

I made my own framework (started it with 5.5) and modified to work with 9, still using less and so far all is well. Do not use ‘Bootstrap’ (too bloated). Can still use the design/customise pane, super.

@linuxoid:
This might help (or I might be looking at the wrong thing):https://bedrockapp.org/

This might help (or I might be looking at the wrong thing)

Yes, wrong thing

The Concrete Bedrock is at

Best resource so far is by @afixia at

Forum Thread

From what I understand, the LESS compiler is still working and you can use different frameworks. Concrete now just has some asset requirements to make all blocks work that are not in each blocks view.css anymore. In your theme’s page_theme.php there will be a new method to explain to Concrete if your theme provides the assets needed to run every block or not. If not, Concrete will load those assets in for you. See the method below, you comment out all of those features, Concrete will assume that your theme provides none of the assets to run those things and will load them in for you, so you should be able to build your site normally, but I haven’t really tried this…

use Concrete\Core\Feature\Features;
use Concrete\Core\Page\Theme\Theme;

class PageTheme extends Theme
{
public function getThemeSupportedFeatures()
    {
        return [
            Features::ACCOUNT,
            Features::DESKTOP,
            Features::BASICS,
            Features::TYPOGRAPHY,
            Features::DOCUMENTS,
            Features::CONVERSATIONS,
            Features::FAQ,
            Features::PROFILE,
            Features::NAVIGATION,
            Features::IMAGERY,
            Features::FORMS,
            Features::SEARCH,
            Features::TESTIMONIALS,
            Features::TAXONOMY,
        ];
    }
}

Well, in v8 when I needed a new theme, I just copied the Elemental theme into the application and changed a few things in the elements header and footer and changed some less in the header, footer, content, and a few others. That was it. A couple of hours and a new theme done. With the kalmoya_elemental_cloner it was even easier.

Now I’m looking at the Atomik folder contents, reading this stuff about the Bedrock and I just can’t get it. Thanks to @afixia , now I see that the Bedrock is for making new themes from scratch, it’s just bare bones without any styling. But that’s not what I want. I want to take the Atomik theme and change it as I used to with the Elemental. So can I do that easily now in v9? Do I have to get non-compiled versions of js and css and compile them? Do I have to compile anything after any changes in my Atomik-based theme? What do I start with? Which files do I change? Now there’s lots of different files and some of them are minified, there are skins, there are blocks, blocks in the the Atomik and blocks in the core… Why are there blocks in the theme? So if I override a block in the application, do I change it in the application blocks or in the theme blocks? Now there are presets and skins. Where do I just change the header, footer and main? Is it in the atomik/css/scss/header/_top-navigation-bar.scss or in the skins/default.scss?

What’s the process, what are the steps to clone and to modify the Atomik theme? Is it just a matter of adding my own skin? Where do I get the default unminified skin? How do I minify it after changes?

Lots of files with just 1 or few lines - is it the modern development trend now? what the…

3 Likes

Thanks.
@linuxoid that is exactly what I meant.
Hopefully it kicks off a discussion and eventually results in installable package for v.9, where sass and js files can be compiled into a new theme.
I would pay for it.

1 Like

In the Concrete Repository, you’ll see a build folder: https://github.com/concrete5/concrete5/tree/develop/build

In here, is the webpack.mix.js file to compiling the Atomik, Elemental, Dashboard and other assets.

I could strip out these pieces and make a standalone Atomik theme like I did with the Bedrock Basic theme. Does that sound good?

That certainly would be fantastic! A «Cloneatomik»-theme!
(like @MrKDilkington’s «Cloneamental» great theme)

That certainly would help understand the Atomik-theme. We’d be happy to take advantage of the features of Concrete’s Bedrock.

But still, it’s quite a difficult task to install and run npm in a local environment, then compile and deploy code to a remote server. Many ConcreteCMS users simply do not know how to handle that.

We think an App would be an important thing for theme development for non programmers like us.

Thank you in advance for your great work.

3 Likes

For those who do not have good local environments, I would suggest you start trying to figure one out. A lot of web development is leaning in this direction and I think you’ll start finding more barriers like this without it.

My Suggestions are:

I’ll see if I can find some time to put together an Atomik version of my repo.

1 Like

we worked as @linuxoid in c5 before, too.
Switching to a modern build process with npm and webpack etc. is a nice approach.
But I don’t understand the new idea of css and js related to blocks.
view.php+.css+.js in a block-template was great.
What’s the corresponding new process?
And is there any kind of compatibility-layer to work with these block-templates?

Michael

Not sure about a compatibility-layer. They have some documentation here on how it works: Concrete CMS Bedrock: A Foundation for Concrete and Concrete Themes. :: Concrete CMS

From what I gather, if you define that your theme supplies the JS or the CSS for a block, then you need declare that and it won’t be included, but you’ll have to include it yourself. You’ll have to write in a SCSS file and a JS file that will be added to the compile.

Just another note, I’ve been working on making an Atomik clone theme today. I’m 90% there. 2 things aren’t working though. The Boards aren’t fully working and the file manager is not creating folders and moving files in to the correct places. My code matches theirs and I don’t see any obvious reasons why these 2 pieces do not work except for maybe a bug in v9. Due to the time investment though, I might have to put it on the marketplace for a small cost.

@afixia , while it’s brilliant that you’re making what you’re making, it’s a question to the Concrete CMS developers and management - why is there no documentation on such (and other!) key functionality of the CMS 4 months after the major version release? Where is the step 1, 2, 3 on how to clone and change the core theme? That sucks. No matter how awesome its functionality really is to an experienced developer, v9 must be called a Do It Yourself and We Dare You to Understand How the Hell It Works CMS. No wonder the market share is 0.1%.

We tried to clone Atomik and didn’t get nearly as fas as @afixia.
Stuck with errors and missing documentation, we put work on hold with Bedrock/Atomik until a reasonable solution is available, either by the core team or a free/paid package.

So thank you again @afixia for doing that important work.

Here is my repo so far: https://github.com/davedew/atomik_theme_clone

As I said, its 90% there. You should be able to just git clone https://github.com/davedew/atomik_theme_clone.git directly in your packages folder and install. Not sure when I’ll find time to flush out the issues, but this is at least a good starting point. Let me know if you have any issues.

1 Like

Hi Afixia,

I cloned the repo, deleted package.json, .lock, node-modules
Then used your documented commands.
But npx mix throws errors:

npx mix

✖ Mix
  Compiled with some errors in 2.77s

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.esm.js 6:0-41
Module not found: Error: Can't resolve '@popperjs/core' in '/home/maschenborn/projekte/brandschutz-relaunch/packages/atomik_theme_clone/build/node_modules/bootstrap/dist/js'

ERROR in ../themes/atomik_clone/css/presets/default/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../themes/atomik_clone/css/scss/_shared-variables.scss 1:9  @import
  ../themes/atomik_clone/css/scss/_common.scss 1:9            @import
Vorformatierter Text...
ERROR in ../themes/atomik_clone/css/presets/rustic-elegance/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../themes/atomik_clone/css/scss/_shared-variables.scss 1:9        @import
  ../themes/atomik_clone/css/scss/_common.scss 1:9                  @import
  ../themes/atomik_clone/css/presets/rustic-elegance/main.scss 3:9  root stylesheet
...
2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 5 errors

After first execution of npx mix this came:

Additional dependencies must be installed. This will only take a moment.

Running: npm install sass-loader@^12.1.0 sass vue-template-compiler vue-loader@^15.9.7 --save-dev --legacy-peer-deps

Finished. Please run Mix again.

I’ve tried with node 14, 16 and 17.

Maybe you’ve installed something globally that’s missing on my system?

Michael

I don’t see the benefit of the changed behaviour of view.php+.js+.css of a block-template.
It’s not a modern approach to include the ressources of all blocks in a single compiled css-file.
Google doesn’t like unused css and reusing blocks in different projects is way more difficult.
While with http2 it’s no problem to load many small ressources.
Obviously I don’t understand the new concept?!?

New technologies, new versions should make life, and development in particular, easier, not harder. Who can give 3 reasons why breaking something into million pieces and then trying to combine it all again is better, easier, takes less time and it all just works?

In v8 it takes 5 min to copy the Elemental, to change a few lines of code to have it all ready for a new theme. And it just works. In v9 it’s been 4 months of f*** around and it’s still a SNAFU.