FortyTwo

Building a theme with FortyTwo

The FortyTwo theme is designed to be extended by a sub-theme. You shouldn't modify any of the CSS or PHP files in the fortytwo/ folder. Instead, create a sub-theme located outside of the root fortytwo/ folder.

We tried to make the base theme as clean and simple as possible. There is styling for basic input fields and buttons.

Set up the location for your new sub-theme.

Copy the STARTERKIT folder out of the fortytwo/ folder and rename it as your new sub-theme.

IMPORTANT: The name of your sub-theme must start with an alphabetic character. It can only contain lowercase letters, numbers, and underscores.

For example, copy the /themes/fortytwo/STARTERKIT folder and rename it as /themes/foo.

Why? Each theme should reside in its own folder. To make them easier to update FortyTwo, sub-themes should reside in a folder separate from the base theme.

Automated setup of base theme with Drush

You can use Drush to set up your new base theme. Follow the steps below and consult drush help fortytwo for help.

1. Ensure Drush knows about the fortytwo command.

   After you have downloaded FortyTwo and placed it in your themes directory, you need to enable the FortyTwo theme and set FortyTwo as the default theme on the Appearance administrative page.

   Type: drush en fortytwo and go to Administrative Menu > Appearance. Next to Fortytwo, click on Set as default. The drush fortytwo command will now be available to run.

2. Run the drush fortytwo command with the following parameters.

   In the command line, use the drush fortytwo "My theme name" my_theme command to generate a sub-theme with machine name "foo" and human name "Foo theme" in your Drupal site.

   Tip: Type drush help fortytwo to view options and example commands.

Se tup the basic information for your sub-theme.

In your new sub-theme folder, rename the STARTERKIT.info.yml.txt file to include the name of your new sub-theme and remove the .txt extension. Then edit the .info.yml file's name and description field.

For example, rename the foo/STARTERKIT.info.yml file to foo/foo.info.yml. Edit the foo.info.yml file and change "name = Forty Two Sub-theme Starter Kit". Do the same with the description property.

Also rename the STARTERKIT.libraries.yml and the STARTERKIT.theme files. For example rename the foo/STARTERKIT.libraries.yml file to foo/foo.libraries.yml and the foo/STARTERKIT.theme file to foo/foo.theme. Replace any occurences of STARTERKIT in any of these files.

Do not forget to rename the file in the configuration folder as well.

Configuration of your sub-theme

A lot of settings can be configured on the sub-theme appearance page. CSS/Sass specific settings can be set in /static/sass/_settings.sass. It's possible to compile the Sass files with Compass using an included config.rb file. We have not made use of Compass, but if you want to use it, you can.

Responsive

By default, the FortyTwo theme has 5 separate layouts: desktop, tablet-landscape, tablet-portrait, mobile-landscape, and mobile-portrait. The media queries are defined in the /static/sass/_settings.sass file.

You can enable the responsive layout on the admin/appearance page. There are two types of responsive behavior you can select: adaptive and fluid.

The grid-system used is loosely based on the 978 grid-system (http://978.gs/). The grid configuration for each layout can be modified in the corresponding Sass files which are located in the main theme grid folder: /fortytwo/static/sass/theme/base/grid/. When you copy this file to your sub-theme and include them in the main.sass, you are able to edit them.

At the top of each _[..] Sass file you can define the number of columns and the column and gutter sizes. Only the desktop version (_desktop.sass) inherits its column configuration from the /static/sass/_settings.sass file. You can change it there.

• Adaptive means that the layout will "snap" to the next when media queries match. Everything is calculated in pixels.
• Fluid means that everything is calculated in percentages. Every element will be kept in the same spatial weighting, and no "snapping" will occur.

IMPORTANT NOTE

Giving elements the proper width based on column numbers should be done in these files.

There are two ways for column-based calculations, with the mixin span-columns or with the function calc-grid. The span-columns mixin will satisfy most of the time. When using the fluid grid you need to use span-fluid-columns or calc-fluid-grid. For more information on how these mixins/functions work, you can check the comments in the /static/sass/lib/_mixins.sass file.

Javascript

There are some libraries and polyfills provided that can be turned on/off.

Gulp

You can use Gulp in this starter kit. Just do npm install in the theme's folder for installation and use gulp for running the watcher. We've added some nice features:

• Sass compiling, including source maps and autoprefixer.
• JSHint, and Uglify.
• Cache clear when you change .php, .inc, or .info files in the theme.
• BrowserSync is also added, but initially disabled. You can enable it by changing the enable_bs value in the gulp.config.json file to true and setting the correct bs_proxy_host value. This has to be the URL to your local development environment.
• Styleguide generator, create a living styleguide with KSS (d8 only for now).