Version: 1.3.2
CivicTheme theme, the Drupal theme built using a standalone component library, provides components and data structures to enhance editorial experiences out-of-the-box.
The standalone component library is a CMS-agnostic HTML/CSS/JS framework based on Atomic Design principles.
The Drupal theme provides full integration with a library.
composer require salsadigitalauorg/civictheme
Enable CivicTheme theme to use it as-is - CivicTheme component library is already included as a set of compiled assets.
CivicTheme provides a starter theme and a script to generate a child theme for you to get started with.
Run the following command from within civictheme theme directory:
php civictheme_create_subtheme.php <theme_machine_name> "Human theme name" "Human theme description" /path/to/theme_machine_name
This will generate a sub-theme in 'path/to/theme_machine_name' theme directory with everything ready to be installed and compiled.
Run the following command from within your sub-theme directory:
npm run build
Website colors can be specified via:
- CSS code
- Color Selector
- CSS code with Color Selector overrides
See admin/appearance/settings/civictheme for more details about colors and to
set colors via Color Selector.
If colors managed in CSS code only, make sure that Color Selector is disabled
./vendor/bin/drush config-set civictheme.settings colors.use_color_selector 0
Palette colors can be set in bulk via Drush command by providing Brand colors.
# Enable Color Selector.
./vendor/bin/drush config-set civictheme.settings colors.use_color_selector 1
# Enable Brand Colors.
./vendor/bin/drush config-set civictheme.settings colors.use_brand_colors 1
# Set Brand Colors.
./vendor/bin/drush --include=path/to/civictheme/src/Drush civictheme:set-brand-colors light_brand1 light_brand2 light_brand3 dark_brand1 dark_brand2 dark_brand3
# Purge dynamic assets cache. Will be rebuilt during next pageload.
./vendor/bin/drush --include=docroot/themes/contrib/civictheme/src/Drush civictheme:clear-cache
Example
./vendor/bin/drush -y config-set civictheme.settings colors.use_color_selector 1
./vendor/bin/drush -y config-set civictheme.settings colors.use_brand_colors 1
./vendor/bin/drush --include=docroot/themes/contrib/civictheme/src/Drush civictheme:set-brand-colors "#00698f" "#e6e9eb" "#121313" "#61daff" "#003a4f" "#00698f"
./vendor/bin/drush --include=docroot/themes/contrib/civictheme/src/Drush civictheme:clear-cache
See README.md in your custom theme.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent