LightShip

LightShip is a minimalist starter theme founded on the tenets of simplicity, accessibility and infrastructure sustainability. It is created and maintained by the team at DevCollaborative.

LightShip is a D10-ready, starterkit compatible theme, using stable9 as a base theme.

Our focus is on long-term sustainability of code, and in baking in semantic and accessible code wherever we can. Because front-end development tools and frameworks change so quickly, building a theme with many developer tool dependencies can make it harder for other developers, or even future you, to jump back into a front-end codebase down the road.

LightShip does use Sass, with gulp as a taskrunner. The development tools to support Sass are as light as we could make them, so if you prefer to write vanilla CSS, fell free to remove gulp and Sass.

The theme has some Sass mixins and structured partials that you can modify, remove, or rearrange. It's only got four gulp tasks: compile Sass, watch Sass, delete compiled CSS, and gulp build. Sourcemaps are included in the gulpfile to help with debugging Sass. Other than that, it's ready for you to write front-end code.

You can read more about the thinking behind LightShip on the DevCollab blog.

Setting Up Your Custom Theme with Starterkit

LighShip has support for Drupal 9's starterkit script, allowing you to create a new custom theme based on Lightship in a matter of seconds.

This is perfect for Lightship, since this project is intended to merely be a starter for your custom theme, and not a contrib theme that remains in your project codebase.

To create a new theme based on lightship using starterkit, execute the following commands:

1. composer require drupal/lightship

2. From the site root, replace your new theme's machine name where indicated:

   php ./core/scripts/drupal generate-theme [theme_name] --starterkit=lightship

3. composer remove drupal/lightship

4. Theme away, you FED wizard, you!

Using Gulp

Setup

See this more in-depth overview and guide.

From the theme’s directory, run npm install

Gulp Tasks

• gulp sass - compiles sass into CSS
• gulp clean:css - deletes compiled CSS
• gulp watch - watches sass directories for changes and recompiles whenever you save a change
• gulp build - simple one time build task
• gulp build:unminified - simple one time build task, produces unminified CSS

Why doesn’t gulp do ALL THE THINGS?

This is by design, and at the core of LightShip's mission. We reduce complexity and development abstractions so that later on, in 2-5 years' time, it's not difficult to reproduce this development environment.