Skip to content
Snippets Groups Projects
Commit d06e0b53 authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3357708: Add theme:build and components:build compile command for...

Issue #3357708: Add theme:build and components:build compile command for selected components with Webpack ~5, Bootstrap ~5, PostCSS
parent 2cc6d231
No related branches found
No related tags found
No related merge requests found
Showing
with 89 additions and 10 deletions
# Vartheme BS5
Base theme for Varbase standard websites. Based on Bootstrap 5 framework using SASS.
A base theme for Varbase standard websites.
# Installation
A new generation of theming (base theme) based on **Bootstrap 5**, **Single Directory Components (SDC)** with **Drupal** `~10.1.0`, and **UI Patterns** `2.0.x-dev`.
Having **[Varbase Components](https://www.drupal.org/project/varbase_components)** to provides component management system for Varbase and **Vartheme BS5**.
# Installation
Require the theme in a Drupal ^10.1.0
```
composer require 'drupal/vartheme_bs5:3.0.x-dev'
```
The Vartheme BS5 requires to enable the **Varbase Component** befor installing the theme
```
drush pm:enable varbase_components
```
## Compile custom styling
Uses [Webpack](https://webpack.js.org) to compile and
bundle SASS and JS.
......@@ -21,14 +34,21 @@ following the guide [here](https://yarnpkg.com/docs/install).
Go to the root of the theme and run the following commands: `npm install` or `yarn install`.
#### Step 3
Initialize the theme with latest Bootstrap 5 version
Update `proxy` in **proxy.browsersync.js** with the following options:
- The domain name for the project. Example: `'http://exmaple.com'`
- Virtual domain. Example: `'http://varbase.local'`
- Localhost with path and docroot. Example: `'http://localhost/dev/PROJECT_NAME/docroot'`
```
yarn theme:init
```
#### Step 4
Run the following command to compile Sass and watch for changes: `npm run watch`
or `yarn watch`.
Run the following command to compile Sass
```
yarn theme:build
```
Run the following to build components for custom components
```
yarn components:build
```
# Components
Copy any Component from the Varbase Components module to replace.
### Example:
Given that the site has a custom style for the Alert component
Which in most cases the default
Steps:
1. Copy the `alert` folder Varbase Components to the project's theme
```
cd PATH_TO_THE_PROJECT/docroot/themes/custom/PROJECT_THEME
cp -r PATH_TO_THE_PROJECT/docroot/modules/contrib/varbase_components/components/molecules/alert components/molecules/alert
```
2. Edit the `alert.component.yml` in the current PROJECT_THEME
Add `replaces: 'varbase_components:alert'` after `name: Alert` in the yml file.
```
$schema: https://git.drupalcode.org/project/sdc/-/raw/1.x/src/metadata.schema.json
name: Alert
replaces: 'varbase_components:alert'
```
4. Uncomment the following in the `PROJECT_THEME/webpack.config.components.js` file
```
// ##########################################################################
// Components
// ##########################################################################
'./components/molecules/alert/alert': ['./components/molecules/alert/alert.scss'],
```
3. Change the `templates/misc/status-messages.html.twig` template file for Drupal's status messages
Replace `varbase_components:alert` with `PROJECT_THEME:alert`
Before:
```
{% embed 'varbase_components:alert' with {
type: types[type],
} %}
```
After:
```
{% embed 'PROJECT_THEME:alert' with {
type: types[type],
} %}
```
Themes are entitled to change any part in the `status-messages.html.twig` and in the `components/molecules/alert` component
4. Compile SASS to CSS for components
```
yarn components:build
```
# Atoms
# Molecules
# Organisms
# Pages
File moved
......@@ -21,7 +21,7 @@ em.placeholder {
content: "";
vertical-align: super;
display: inline-block;
background-image: url(../../images/required.svg);
background-image: url(../images/required.svg);
background-repeat: no-repeat;
background-size: calc(calc(1.5em + .75rem + 2px) * .16666666666) calc(calc(1.5em + .75rem + 2px) * .16666666666);
width: calc(calc(1.5em + .75rem + 2px) * .16666666666);
......
File moved
File moved
File moved
File moved
File moved
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment