Skip to content
A starter theme for Drupal 8, a subtheme of the core base theme Classy. It has Sass and the minimum number of gulp tasks so as to be long-term sustainable, light, accessible, and ready to customize.
Branch: master
Clone or download
Latest commit b91bcbc Apr 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
sass
templates
.gitignore Gitignore added, fonts removed Dec 6, 2018
LICENSE.txt
README.txt
devcollab_lightship.info.yml
devcollab_lightship.libraries.yml
devcollab_lightship.theme
gulpfile.js
logo.svg
package-lock.json
package.json
screenshot.png Screenshot updated Dec 7, 2018

README.txt

Introduction
-----------
Hello! This codebase is starter theme code for Drupal 8, by the team at DevCollaborative (DevCollaborative.com).
This is a sub-theme of the core base theme, Classy.


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.
Our usual convention for the theme's machine name is an organization's abbreviation and the year the site's slated to be launched, so for example org2019.


Setting Up Gulp
--------

Steps detailed here: https://css-tricks.com/gulp-for-beginners/

  1. Initialize Node Package Manager - npm init
  This will generate a package-lock.json file, which *should* be committed in Git.

  2. If you have Gulp installed globally (see the CSS Tricks link above for instructions), then save it locally to this project with:
  npm install gulp --save-dev

  3. Type npm i to have npm install the dependencies for the project per package.json. You should be ready to compile now!


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

Adding additional libraries and associated tasks for developer convenience may be okay on a particular project, but please check in with a team lead before you add them. We are doing our best to reduce complexity so that later on, in 2-5 years' time, it's not difficult to reproduce this development environment.


Adding Externally Hosted Custom Fonts
--------
To add an external CSS file for Google or Adobe Fonts (formerly Typekit):

1. Add a fonts block to the libraries.yml file, like this:

  fonts:
  version: VERSION
  css:
    theme:
      https://use.typekit.net/zux5iaj.css: { type: external, minified: true }

2. Add this top line in the libraries block of the .info.yml file:

libraries:
  - your-theme-name/fonts
  - your-theme-name/global-styling
  - your-theme-name/global-scripts

3. Profit!


Templates
--------
To override template files, copy Classy template files into the theme's "templates" sub-directory.


Adding Regions
--------
To add new regions to the theme for block placement, add the region to the "regions" section of your-theme-name.info.yml, and then add the region to the theme's page.html.twig template.


Sass Partials
-------------
In the future, we may add sass-globbing tasks to gulp, to automatically add new partials as needed. We have not yet agreed as a team on how to name and organize partials *, so please feel free to do what works for you. You can then add them to the custom.scss file manually. (Don't forget: if you choose to put partials into subfolders, make sure to add the subfolder wildcard path to the gulp tasks for sass compiling and watching.)

* Right now we have this divided out into two folders; (1) base and (2) styles. Ideally the base folder should be used as a set-it-and-forget folder structure for core theme styles and components. Styles is where the magic should happen with partials for theming the site.


Questions?
--------
Email Johanna Bates at johanna@devcollaborative.com with questions.
You can’t perform that action at this time.