@afixia , thank you very much for your effort, you’re doing a great job. Thank you for your detail clarifications. How do you find nerves to trial and error this mine field?
Well, v9 theming sucks! Nothing on how to make/edit a theme half a year after release from the core team. What are we supposed to be all using the Atomik default on all sites? They talk about service partners and all… What’s there to service if I can’t do a damn thing with the theme?
Last year I understood a tech writer was hired and busy writing docs for v9.
Thanks, I appreciate it. I have two sites I’m building with the Atomik theme clone and cannot use these new features yet… I’m hoping to find more time to dig in to the errors more and come up with a comprehensive bug report to the core team. I just haven’t had the time yet.
Ya I heard about this supposed tech writer, just haven’t seen much out of this person yet.
I have a v9 project WIP and rather than untangling Atomik I am creating a shim that works on top of it. In the process I was disappointed at the lost opportunity for effective use of css variables.
A couple of thoughts for you. I am working on a simple project for a small group with only one developer. I found the sass build process with NPM, webpack, Laravel Mix, etc. to be huge overkill for me. I’m sure larger dev teams would prefer this kind of environment, but it seemed needlessly complex for my purposes.
So, I use the Dart Sass command line tool (links below) to compile the skin css file and then upload it to the site. Much easier for me.
Also, I introduce a CSS style sheet file to be loaded after the skin. I use it make very quick ‘overrides’ and later I may refactor and incorporate these changes more elegantly in the scss build.
Install Dart Sass with NPM: npm install -g sass
… or Dart Sass Downloads: Releases · sass/dart-sass · GitHub
Dart Sass page: Sass: Dart Sass (sass-lang.com)
Just an update, I rebuilt the package.json and webpack.mix.js and was able to make the Bedrock features work without collisions. Both of my repos have been updated:
Lots of great work in this thread, thanks everyone. Apologies for it taking a little while for this documentation to be available, but I’ve just posted a lot of documentation about Bedrock, theme development in v9, theme documentation, theme skins in v9, and v9 theme customization:
There’s a lot here, I hope it helps.
Following the docs and running ‘npm run production’ fails with:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! lizard_build@1.0.0 production: mix --production
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the lizard_build@1.0.0 production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Doing:
has fixed that.
Thank you Andrew for giving valuable insights on Bedrock. But my initial questions remain:
It seems, that agencies and designers like us are unable to use Bedrock due to a complex process and a complicated local development setup.
Are we forced to use Bedrock in future versions?
The main reason we came aboard with concrete5 was, that we finally had a tool to design and deliver high quality websites, without extensive programming skills. The powerful framework combined with WYSIWYG-editing was our selling point to our clients.
Quoting @linuxoid earlier in this thread:
«New technologies, new versions should make life, and development in particular, easier, not harder.»
Wouldn’t it be great to have an extension or similar to use Bedrock from the dashboard? – That would make life as a designer easier!
Great documentation on making themes from scratch. Probably useful to dedicated theme developers wishing to kill time.
But I’d like to know how to clone the Atomik and change a few bits and pieces there. I’ve never built a theme from scratch in the past 20 years. I’ve always used the Elemental as the basis. And I want to do the same with the Atomik. Will be pleased to know how to. Without that I and most others won’t bother with v9.
It seems all the Atomik unminified stuff is needed for compiling. How/where do we get it and get it in the way it compiles? I guess after that it’s easy stuff - change scss and compile away. But I don’t hold hopes it could be so easy looking at the documentation on Bedrock.
Made some updates to my repos. Maybe will add some more later. I put together a markdown file for each of the Features if anyone needs a quick reference: https://github.com/davedew/afixia-theme-basic-bedrock/blob/master/FEATURES.md
Is my assumption right that if I take the Atomik theme code from the github:
that should build a one-to-one copy of the atomik theme? Is this what I should do to make a clone of Atomik ready for minor modifications instead of building a new theme from scratch?
The problem is the github doesn’t have a download button for the Atomik theme. How can I download all its files?
Hey, that idea worked! 
Here’s what I’ve done:
Then make any style changes in the build/assets/scss files and recompile.
That’s it. Seems to be working so far… 
One minor thing though - if I put my build folder somewhere else on the computer and use a direct path to the theme in the webpack.mix.js, the main.js file gets copied together and inside all those path folders, not just itself.
We’ve had a few problems getting bedrock and atomik cloning to work. In the end we just wanted to keep things simple and created our own theme pulling in Bootstrap5 via cdn and then using .less for our custom css. This seems to work without messing around with npm or building assets etc. Are we likely to run into problems down the line using this approach? Will .less be phased out eventually? Things just seem to have got a whole lot more complex and I’m struggling to see the benefits to be honest unless you are developing themes for the marketplace.
@Blueprint , I used to be in the same boat as you are. I had no clue how to change a damn color in the Atomik theme because I was so used to the way themes worked in v8. v9 is just a completely new development approach. Compared to the ease of changing less, the new way seemed ridiculously over complicated because it takes enormous amount of time to learn something totally different especially if there’s no documentation.
Then the core team released the first set of it on how to develop a new theme from scratch based on Bedrock. Then I kept thinking about the compiling concept all night long… seeing what others were doing with Bedrock and its clones, and all of a sudden I had an insight that if I tried what had occurred to me it might work. And it did. And then the whole puzzle has just fallen in. It’s like those 3D pictures, if you never saw them, it’s nearly impossible to even understand what you have to do to focus and see it. But as soon as it happens, then the rest just flies.
I realize and understand one thing - compiling assets is the new way of modern development, like it or not, but it’s the way it is and it’s gonna stay. So if you want to remain in this business, you’ll have to learn it one day anyway. One thing which is the most annoying with that is that you can’t quickly change any styling on a remote site without having access to compiling tools.
I don’t need to and don’t want to develop themes from scratch. I’ve never done that with less either. All I need to do for my needs is change the Nav Bar (this IMO takes 80% of the site theme development time) and some styling of some blocks. That’s it! Thus cloning the Atomik theme is all I had to do.
And here’s what I’ve realized I had to do to make my own theme based on the Atomik without doing it all from scratch:
@linuxoid Thanks for the detailed reply. Part of the problem is messing around with the dev environments now. We have built a lot of sites and host them all on shared hosting using WHM/cPanel. I spent a few hours trying to get npm to work on there but ran into issues with npm i @concretecms/bedrock due to the node.js version. It’s fine building a site locally using these tools but it gets painful when you just want to jump into an existing remote site and make a quick tweak without having to compile anything as we have in the past. It just adds an extra layer. Part of the frustration was a lack of cohesive documentation but this seems to be improving. I’ll give it another go.
Whilst I’m a big fan of building themes with Sass (that’s what we always do), and I can see the value in cloning Atomik to use as a base (or even for learning), what I don’t generally think is a good approach is to clone such a complex theme and have to install npm, compile it, etc, just to make some more modest changes to a few elements.
Instead, I’d be just creating some custom block templates for things that I do want to change, such as navigations and page lists.
And then for actual CSS changes, I’d be just writing some overriding CSS, using our Theme Styling Tool add-on
Anytime someone asks me to make some styling adjustments to a theme from the marketplace, I simply install this add-on and write CSS as needed, and leave the theme alone. Nearly always I can fix or change things as needed using CSS alone.
The issue with cloning any theme to make changes is then you lose the benefit of future fixes that might be done to that theme.