cellular4drupal

7.X

Drupal 7

Demo to see how the theme looks in a sample Drupal site Apply theme

A sweet starter theme for Drupal

Getting Started

This project requires nodejs v^14 & npm v^7

Download / git this repo to `/themes/yourThemeName`

Install npm packages:
```
cd path/to/yourCoreInstall/themes/yourThemeName
npm install
```

After the project installs, the build task will run to generate the theme distribution files from `/src`.

ALWAYS edit the `/src` files!

ALWAYS use style-dictionary!

Workflow

Get started by editing the style-dictionary tokens (`./src/style-dictionary/`), which is used to share variables between drupal, js, and sass.

`npm run build:style-dictionary` to generate drupal theme.yml files + make variables available as json & sass.

Building Cellular

To ease the barrier to entry, the build process installs all dependencies locally with npm and uses npm commands with src/.build/ scripts used as a taskrunner.

To quickly rebuild parts the theme as changes are saved, use the command `npm run watch`to update .

To rebuild the theme completely from src, use the command `npm run build`

theme.info.yml, theme.breakpoints.yml, and all files in `/dist/` will be overwritten in the build process.

Style-dictionary

The style-dictionary is the backbone of cellular's design system. The style-dictionary is used to set/constrain variables, with sass and js actually doing the real work from settings generated by the style-dictionary.

The settings in `/src/style-dictionary/tokens` are used to constrain/organize js & sass variables.

The settings in `/src/style-dictionary/drupal` are used to simplify creating yml files (*info, breakpoint, layout, etc.*) to configure/customize your Drupal theme.

Sass

`src/sass/style.scss` (*and other top-level scss documents*) import each directory index in order to compile optimized cascading styles.

- Style-dictionary is the ultimate source of truth for variables.

- Modularity is crucial for managing large code bases...

- Each subset of styles is collected in that directories' `__index.sass`. Collecting styles as ordered partials allows styles to cascade properly.

- Let the styles flow :) They're easier to manage that way.

JS

A template is included for handling custom script with drupal/jquery, and a separate template for controlling plugins. The `/src/js/` directory will be compiled to `/dist/js/app.js`

### Theme functions

- Inject critical css in for anonymous users (styles are presumably cached if already logged in...)

Templates

- Templates for most common elements (_block, article, node, etc._) are provided in the `/templates` directory.

npm tasks

From your theme directory use `npm run {{command}}`

- `clean` removes `/dist/`
- `postcss` autoprefixes and lints css
- `mincss` minifies css in `/dist/`
- `sass` compiles `src/sass/` to `/dist/css/`
- `lint` runs all lint commands
- `lint:js` lints js
- `lint:css` lints css
- `lint:sass` lints sass
- `uglify` compiles `src/js/` to `/dist/js/app.js`
- `imagemin` optimizes `/src/assets/images/` to `dist/assets/images`
- `icons` optimizes `src/assets/icons` to `dist/assets/icons` and creates a png for a fallback image
- `build:style-dictionary` generates `theme.info.yml`, `theme.breakpoints.yml`, `src/sass/variables/_style-dictionary.scss`, and `src/js/style-dictionary.json`
- `build:css` removes existing dist css, then compiles/autoprefixes/minifies css
- `build:js` removes existing dist css, then compiles js
- `build:php`
- `build:assets` runs imagemin && icons _&& Copy to dist/assets_
- `build` removes current dist and runs all build tasks to generate theme files based on style dictionary parameters.
- `serve` runs test server
- `watch:sass` compiles css on save to `/src/sass/`
- `watch:js` compiles app.jss on save to `/src/js/`
- `watch:images` optimize icons/images on save.
- `watch` compile js & sass

Recommended Modules