Basic Bedrock Theme for Concrete CMS

Overview

Basic Bedrock Theme Package for Concrete CMS v9

Concrete CMS Bedrock Documentation

Description

Using documentation from link above, I wanted to have a package ready to use for quick theme building for Concrete CMS. Please feel free to add suggestions or pull requests.

This package will automatically install the thumbnails for Bootstrap5 so there is no manaul setup of these needed in the Dashboard.

JS and CSS are setup as assets in the package controller and required in the page_theme.php.


Personalize for your project

  • Change the icon.png (97px x 97px) in the packages/theme_basic_bedrock directory.
  • Change the thumbnail.png (360px x 270px) in the packages/theme_basic_bedrock/themes/basic_bedrock directory.
  • To change the name and descriptions, for my example below I want my theme to be named "Rock Solid":
    • Directory names
      • packages/theme_rock_solid
      • packages/theme_rock_solid/theme/rock_solid
    • Namespaces
      • File: packages/theme_rock_solid/controller.php
        • namespace Concrete\Package\ThemeRockSolid;
      • File: packages/theme_rock_solid/theme/rock_solid/page_theme.php
        • namespace Concrete\Package\ThemeRockSolid\Theme\RockSolid;
    • Names and Descriptions
      • File: packages/theme_rock_solid/controller.php
        • protected $pkgHandle = 'theme_rock_solid';
        • protected $themePath = 'themes/rock_solid/';
        • protected $themeName = 'Rock Solid';
        • protected $themeHandle = 'rock_solid';
        • public function getPackageDescription:
        • public function on_start(): Names of assets
      • File: packages/theme_rock_solid/theme/rock_solid/page_theme.php
        • public function getThemeName()
        • public function getThemeDescription()
        • $this->requireAsset('basic-bedrock-app');
      • File: packages/theme_rock_solid/theme/rock_solid/description.txt

Node / NPM / Laravel Mix Build CSS / JavaScript

Make sure to install your node modules to start in the basic_bedrock_build directory:

npm install

If you do not have npm, you'll need to install Node Js.

In basic_bedrock_build you will see the Laravel Mix setup. You should be able to use the following documentation from laravel-mix/docs/cli.md.


Laravel Mix CLI:

To build assets for development, reach for the npx mix command. Mix will then read your webpack.mix.js configuration file, and compile your assets.

npx mix

Watch Assets for Changes

Particularly for larger projects, compilation can take a bit of time. For this reason, it's highly recommended that you instead leverage webpack's ability to watch your filesystem for changes. The npx mix watch command will handle this for you. Now, each time you update a file, Mix will automatically recompile the file and rebuild your bundle.

npx mix watch

Polling

In certain situations, webpack may not automatically detect changes. An example of this is when you're on an NFS volume inside virtualbox. If this is a problem, pass the --watch-options-poll option directly to webpack-cli to turn on manual polling.

npx mix watch -- --watch-options-poll=1000

Of course, you can add this to a build script within your package.json file.

Hot Module Replacement

Hot module replacement is a webpack featured that gives supporting modules the ability to "live update" in certain situations. A live-update is when your application refreshes without requiring a page reload. In fact, this is what powers Vue's live updates when developing. To turn this feature on, include the --hot flag.

npx mix watch --hot

Compiling for Production

When it comes time to build your assets for a production environment, Mix will set the appropriate webpack options, minify your source code, and optionally version your assets based on your Mix configuration file (webpack.mix.js). To build assets for production, include the --production flag - or the alias -p - to the Mix CLI. Mix will take care of the rest!

npx mix --production

Customize the Mix Configuration Path

You may customise the location of your webpack.mix.js file by using the --mix-config option. For example, if you wish to load your webpack.mix.js file from a nested build directory, here's how:

npx mix --mix-config=build/webpack.mix.js --production

Pass Options to Webpack-CLI

If you end any mix call with two dashes (--), anything after it will be passed through to webpack-cli. For example, you can pass environment variables using webpack-cli's --env option:

npx mix -- --env foo=bar
You might also like...
Bootstrap CMS - PHP CMS powered by Laravel 5 and Sentry
Bootstrap CMS - PHP CMS powered by Laravel 5 and Sentry

Bootstrap CMS Bootstrap CMS was created by, and is maintained by Graham Campbell, and is a PHP CMS powered by Laravel 5.1 and Sentry. It utilises many

GetSimple CMS - a flatfile CMS that works fast and efficient and has the best UI around, it is written in PHP

GetSimple CMS is a flatfile CMS that works fast and efficient and has the best UI around, it is written in PHP.

 Amila Laravel CMS - Free, open-source Simple Bootstrap Laravel CMS
Amila Laravel CMS - Free, open-source Simple Bootstrap Laravel CMS

Simple Bootstrap Laravel CMS. Support Laravel 8.x Can integrate into any existing Laravel project. Only add few database tables with prefixes, not affect your existing database tables. Support Laravel 7.x & Laravel 6.x & Laravel 5.x & MySql & PostgreSql - Amila Laravel CMS

b5st – A Bootstrap 5 Starter Theme, for WordPress

b5st – A Bootstrap 5 Starter Theme, for WordPress Version 1.1 https://github.com/SimonPadbury/b5st b5st is a simple, Gutenberg-compatible WordPress st

Sage is a productivity-driven WordPress starter theme with a modern development workflow.
Sage is a productivity-driven WordPress starter theme with a modern development workflow.

WordPress starter theme with a modern development workflow

A minimal boilerplate theme for WordPress using TailwindCSS, with PostCSS and Laravel Mix.

A minimal boilerplate theme for WordPress using TailwindCSS, with PostCSS and Laravel Mix.

This is a white minimal wordpress theme

_s Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turnin

A WordPress theme.json generator from a PHP array

ItalyStrap Theme Json Generator WordPress Theme Json Generator the OOP way This is a WIP project and still experimental. The idea is to generate a fil

An example starter theme and block-type plugin that use @wordpress/scripts for JS & CSS

Brad’s Boilerplate This repo contains one folder that is an example theme, and another folder that is an example block-type plugin. Both folders use t

Comments
  • How do you deploy the package?

    How do you deploy the package?

    ... having the build folder in the theme folder and the scss folder within css.

    Wouldn't it be cleaner to have the build stuff in the root folder? Than the clean package, which is ready to deploy could be in public/packages/theme_basic_bedrock.

    I'm asking because I usually sync the packages to the live site.

    What do you think?

    opened by core77 14
  • Install Script

    Install Script

    I'm not sure if I'll find time to do this, but it might be nice to have a PHP console script to automatically move the folders to their appropriate locations in a Concrete CMS installation and a personalization script to rename the folders / namespaces, etc instead of manually changing each of those. If anyone wants to take this on, please submit a PR.

    enhancement 
    opened by davedew 0
Owner
David
David
A Concrete CMS package to add interfaces to translate multilingual content. You can translate content manually, or use cloud API.

Concrete CMS add-on: Macareux Content Translator Concrete CMS has powerful features to manage multilingual content by its default. You can add languag

株式会社マカルーデジタル 3 Nov 28, 2022
Bedrock is a modern WordPress stack that helps you get started with the best development tools and project structure.

WordPress boilerplate with modern development tools, easier configuration, and an improved folder structure

Roots 5.7k Jan 9, 2023
Plugin for Craft CMS that makes it easy to interact with the Instagram Basic Display API and Instagram oEmbed.

Instagram Basic Display plugin for Craft CMS 3.x This plugin creates endpoints in your Craft install for you to consume the Instagram Basic Display AP

Jonathan Melville 5 Dec 20, 2022
Flextype is an open-source Hybrid Content Management System with the freedom of a headless CMS and with the full functionality of a traditional CMS

Flextype is an open-source Hybrid Content Management System with the freedom of a headless CMS and with the full functionality of a traditional CMS. Building this Content Management System, we focused on simplicity. To achieve this, we implemented a simple but powerful API's.

Flextype 524 Dec 30, 2022
PHPVibe Open source video CMS / Video Sharing CMS / Youtube Api v3 / Video Embeds

PHPVibe Video CMS Free Video Sharing CMS The modern choice of design inspired by Youtube and a social videos sharing module that may just cut it for y

MediaVibe 71 Dec 18, 2022
NukeViet 132 Nov 27, 2022
BaiCloud-cms is a powerful open source CMS that allows you to create professional websites and scalable web applications. Visit the project website for more information.

BaiCloud-cms About BaiCloud-cms is a powerful open source CMS that allows you to create professional websites and scalable web applications. Visit the

null 5 Aug 15, 2022
Baicloud CMS is a lightweight content management system (CMS) based on PHP and MySQL and running on Linux, windows and other platforms

BaiCloud-cms About BaiCloud-cms is a powerful open source CMS that allows you to create professional websites and scalable web applications. Visit the

null 5 Aug 15, 2022
Doptor CMS is a Laravel 5 based CMS

Introduction Doptor CMS is a Laravel 5 based CMS. Find out more about Doptor by reading below. ;) About Doptor CMS Doptor is an Integrated and well-de

DOPTOR 4 Sep 11, 2022
Bismuth CMS is a ready-made Website CMS based on Yii 2 Advance Template

Bismuth CMS is a ready-made Website CMS based on Yii 2 Advance Template, it's the simplest and easy to set up CMS you may come across.

Hamadas Telebrain 1 Feb 11, 2022