Spacelift

This project is not covered by Drupal’s security advisory policy.

Introduction

Spacelift is a forward-thinking, developer-focused base theme for Drupal 8 providing a minimalistic, standards-based framework to ease headaches, encourage component-based code reuse, and help you take your next Drupal project to new heights.

Some of the features provided by this theme are:

  • Encourages the use of the Neat grid framework and Bourbon library for SASS
  • Loosely utilizes SUIT CSS's class naming conventions and encourages breaking down site
    into reusable components using SASS and Eyeglass
  • Very lightweight and highly modular (There are no styles in the base theme itself, and
    the theme uses Eyeglass with Gulp.js to easily include stylesheets from Node.js modules)
  • Offers an optional full front-end workflow (Utilizes the aluminum-capsule node module
    to give you a full front-end build environment for things such as SASS, Javascript,
    Modernizr, custom icon fonts, BrowserSync support, Drush integration, and much more)

Theme Development

  • Spacelift is for developers. If you aren't comfortable with tools such as NodeJS, Gulp, and SASS, we recommend following at least one or two tutorials to familiarize yourself before diving into Spacelift.
  • You should have NodeJS version 6 or greater installed.
  • You should also have the "gulp-cli" module installed globally so that you can use the "gulp" command.

Getting Started

Make sure to check out the README.md file for basic information before diving in. Once you get your new subtheme up and running, you should perform a few basic tasks to help you get started:

  1. Run npm install in your subtheme directory to install the Node.js dependencies of the project. (Note: These should not be committed to your repository or deployed to your production environment--they're meant for development.)
  2. Edit src/scss/settings/_variables.scss to configure variable overrides for many common styles as a starting point.
  3. For Eyeglass components and other Spacelift-related Node modules you use which include styles, override any of their defined variables within src/scss/settings/_component-settings.scss
  4. Customize your "[themename].scss" file to comment/uncomment existing items, or include new items. Note that it is already configured to include any .scss files you place within "src/scss/components/" without any additional configuration needed.
  5. Copy "default.aluminum.json" to "aluminum.json" and customize it to override any of the options defined here: https://github.com/TopFloorTech/node-aluminum-capsule/blob/master/defaul...
  6. Run gulp build to compile all theme assets initially. (Note: Run this again at anytime to compile changed files manually.)
  7. Run gulp to watch all configured asset directories (such as src/js/ and src/scss/) for changes and automatically build compiled CSS/JS files.

Similar Projects

  • Neato - Another theme based around the Neat grid system. It's been around longer than Spacelift, and Spacelift was originally forked from Neato and slowly rewritten and expanded. If you want a Neat-based theme and Spacelift isn't for you, maybe Neato is!

Collaborators

All collaborators are welcome!

The project is maintained on GitHub here: https://github.com/TopFloorTech/drupal-spacelift

Feel free to post issues here in the sandbox project as well.

This sandbox's repository is always up-to-date with the latest code as well, however for most collaboration purposes using GitHub pull requests is preferred.

Supporting organizations: 

Project information

Releases