Boilerplate for new Jimdo templates

With this SASS boilerplate, you can easily develop new templates for Jimdo.

Setup

First download and install the Chrome extention

Then you can configure your local enviroment.

Dependencies

• for Sass and Compass you need to have a working Ruby setup with Bundler installed. If you are new to the Ruby world, by all means install a Ruby version manager like RVM (or rbenv).
• the serve-and-compile engine is running Grunt. So you need to have a current version of node.js.

Installation

Copy the follwing commands and paste them into your terminal:

$ bundle install # should install the appropiate versions of Sass and Compass
$ npm install grunt-cli -g # the Grunt command line interface needs to be installed globally
$ npm install # should install Grunt and Grunt tasks for this boilerplate

Fire it up

$ grunt # should start the default grunt task: compile all the Sass, start a server and open a new browser tab with the current version of your template, then watch sass and recompile on changes.

CSS Livereload

Install the Chrome extension of LiveReload for more unicorn.

General advice

The nesting within these files is kept as flat as possible. This helps to avoid overriding style mode settings for the user. If you nest too deep, your selectors are too powerful to be overridden. Also, it's just not necessary to do that in most cases, so just don't do it.

Most of the partials provide a good basis to code from. Actually, filling the _base.sass with the general layout and some colors gets you pretty far already. Adjust the font sizes in the _font-settings.sass and the buttons in the _buttons.sass to get going.

If you wish to use the REM unit, you can do so via

@include rem(property, values as px)

the function is included in the _font-settings.sass and also provides a px fallback. Pretty neat.

To easily build variations, simply alter the variables you already use within the style.sass. It's the fastest way to create variations from the basic setup of the style.sass / _base.sass

If you want to load various webfonts, it's best to do this for all variations etc within the _base.sass. Keep in mind that every font means additional load for the template users.

For compilation, adjust the settings in the config.rb to whatever you're comfortable with.

Naming conventions

To provide easier handling of templates and a unified approach towards coding templates within Jimdo, the following naming conventions should be used. Most of the HTML code the Jimdo system provides is generated by the system itself, so most of the classes needed are basically wrapper classes for different parts of a template.

• Only use CSS classes, no IDs in your template.
• Write your HTML as slim as possible. No extra divs if not necessary. Remember :before and :after, they are really helpful to avoid unnecessary markup.
• Each class begins with jtpl- – of course except for the classes that provide functionality for the user (like content-options or navigation-colors)
• The second part is the identifier for the block you're using:
• jtpl-header
• jtpl-content
• jtpl-sidebar
• jtpl-navigation
• jptl-subnavigation
• jptl-footer
• etc.
• Need a wrapper div? Just add that either as jtpl-wrapper or if it's for another block, add -wrapper to the name (e.g. jtpl-content-wrapper)

Creating templates

1. Open your design in Chrome (grunt should have done so at 0.0.0.0:8080) and start the devkit via the little extension icon on the top right. The devkit will open in the browser now.
2. Set up Variations and Variables for your design by specifying them via style tags (variations) and CSS classes (variables). You can preview the variations and variable settings while developing the design. Add one, reload the page and it will appear in the left hand menu.
3. Replace your content with Jimdo placeholders using whatever editor you prefer
4. Preview your design with content from different Jimdo sites. Default site is http://nicecontent.jimdo.com. To get a preview of all possible Jimdo elements, choose http://allcontents.jimdo.com
5. Make changes, fix any visual problems
6. Upload your design – 🚧 this is currently restricted to the Jimdo team to avoid random template output 🚧

Design variations & variables

• Designs: Geometrically differing templates for a site
• Design variations: Separate color/image/font... combinations, predefined by the designer
• Design variables: User-defined settings that expand/alter a design variation

Design Options

Design variations and variables appear in a "Design Options" panel overlaying the design. They are started automatically when starting the "DevKit". All valid variations and variables will appear in the small menu on the upper left side of your browser window when starting the extension. Don't worry about strange label names. We'll fix that later – they should already give you a basic idea of what you're altering.

Variations

Variations are separate CSS files linked from the head of your HTML document.

Variation example:

<link rel="stylesheet-variation" data-name="Blue steel" href="css/variation-blue.css" data-icon="#79BACC" />

These stylesheets overwrite settings in the default style.css. They can be switched on and off via the Design Options panel.

Variables

You can add the ability to change certain parts of your template simply by adding CSS classes. Within the extension, all available classes are listed in the tab "Design Options".

Siteadmin changes

For new designs, the Design Options panel will also show up in the Jimdo siteadmin. The user can select variations & variables here and will be able to save those as a custom setting created for their particular design.

You can find the complete documentation here.

Deploy a template

Grunt will help you deploy your template very easy. Make sure, that you have the grunt plugin already in your template. Take a look here. The plugin will automatically bump the version and upload the files to the Design API.

Upload a test version

If you want to upload a test version of your template use:

$ grunt prerelease

Grunt will take the actual version (e.g. 1.2.3) and add a number: 1.2.4-0

Release a version

Use the following command lines to release the template. The default type is a path level update, to upload a minor or major update add a parameter.

$ grunt release
$ grunt release minor 
$ grunt release major

Activate a version automatically

To easy activate the version add --activate to the command:

$ grunt release --activate

Be sure that you want to activate the version without review the changes. Every customer of the template will get the new version!

---

Made with <3 in Hamburg.