Welcome to bones

A Drupal 8 theme with all the bells & whistles, without the fluff. We've kept the codebase slim to help you get your website up and running as quickly as possible. This theme has been developed by Xequals for the Drupal community. Be sure to check out the list of components.

Download

$ drush en bones_theme

OR

$ composer require drupal/bones_theme

OR

Directly from drupal.org/projects/bones_theme

Features

  • Mobile first responsive
  • Simple css framework out of the box
  • Component based design
  • Preconfigured Sass files with base styles you can easily adapt to your grid, typography and colour scheme
  • Gulp Sass compiler preconfigured, but you can easily use any other sass compiler
  • Default styles for Views including 2, 3, and 4 column responsive layouts
  • Responsive Display Suite layouts

New Features!

  • Color Module integration - Quickly change basic colour settings such as page background and font colours
  • Theme settings to easily enable/disable:
    • Fixed or regular heading style
    • Pop-out search button
    • Mobile menu with hamburger toggle

 

Installation

  1. Enable Bones theme
  2. Make a sub-theme from the starterkit folder
  3. Enable the new sub-theme and set it as the default theme

 

Compiling Sass using Gulp (Mac OSX)
Bones uses Gulp to compile sass, but you can use whatever preprocessor you like. To run Gulp you must have the required node packages installed globally, then you can link them to your theme rather than installing them each time. Bones uses the following packages:

  • Gulp
  • Gulp-sass
  • Gulp-sourcemaps
  • Gulp-autoprefixer
  • Node-sass-globbing
  • Gulp-plumber
  • Gulp-cssmin
  • Browser-sync
  • Breakpoint-sass
  • Compass-mixins

To setup a new theme to run Gulp:

  1. Open terminal
  2. cd to the theme directory
  3. Run "npm link [package1] [package2] [etc...]" to install the necessary packages: 
    $ npm link gulp gulp-sass gulp-sourcemaps gulp-autoprefixer node-sass-globbing gulp-plumber browser-sync breakpoint-sass compass-mixins
  4. Open the gulpfile.js and update the Browser-sync proxy location to your local development address
  5. Run "gulp"
  6. Browser sync should automatically open a new browser tab
  7. Open the scss files and save your changes
  8. Flush the cache and the new changes should appear automatically after each .scss file save in the browser-sync tab

 

Bones on Drupal.orgComponent ListViews LayoutsMobile menu