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 subtheme of the Core base theme, Classy. It was designed for D8 but is D9-ready.
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 Theme
Rename all instances of the theme's machine name devcollab_lightship in file names and in files themselves with your theme_name. You can do a search/replace on the theme folder in order to do this.
Using Gulp
Setup
See this more in-depth overview and guide.
From the theme’s directory, run npm install --save-dev
Gulp Tasks
gulp sass- compiles sass into CSSgulp clean:css- deletes compiled CSSgulp watch- watches sass directories for changes and recompiles whenever you save a changegulp build- simple one time build task
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.
Creating your Custom Theme
For additional info on Sass partials, adding custom templates, etc, see the readme file found in the theme.
