Introducing Teka

Drupal theme, built for performance, fast development and flexibility.

About Teka

Teka is a Drupal theme built for performance, fast development and flexibility by MMDA. Its main purpose is to work as a sub-theme and to ease development by using Gulp tasks, sprite generation, Sass compilation, Sass mixins, the Bourbon Neat grid system and so on.

That's Teka. Easy to install, easy to configure, easy to use. What are you waiting for?

Technology

Bourbon

Bourbon is a lightweight mixins library for Sass. All dependencies and imports are already done and ready to use in Teka.

Scss

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Neat

Neat is a lightweight semantic grid framework for Sass and Bourbon.

Gulp

Gulp is a fast and intuitive streaming build tool built on Node.js for automating your workflow.

Browser-Sync

Browsersync is a modern tool for live CSS reload and browser syncing. You just code and save, Browsersync will take care of reloading the page for you.

Yeoman

Yeoman is the web's scaffolding tool for modern webapps. It will generate your ready to use teka subtheme.

Installation

Teka is buit to work as a base theme. So be sure to download it from Drupal.org into your themes directory.
You can use this link: https://www.drupal.org/project/teka
Or download it via Drush:
$ drush dl teka

Modules
There are some modules that we recommend for a better experience with Drupal development.

- Magic: https://www.drupal.org/project/magic
- HTML5 Tools: https://www.drupal.org/project/html5_tools
- jQuery Update: https://www.drupal.org/project/jquery_update
- Fences: https://www.drupal.org/project/fences
- Panels: https://www.drupal.org/project/panels

You can download all of them via Drush:
drush en magic html5_tools jquery_update fences panels

Sub Theme

In order to make the Teka sub-theme easier to install and configure, we've made a Yeoman generator.
We assume that you already have Drupal and the Teka base theme installed, so you just need to install our theme generator globally via NPM, then install our theme, via Yeoman, locally.
At first, install Yeoman. Open your terminal and type:
$ npm install -g yo

Now, you need to install our Yeoman generator and run it.
Yeoman will ask for your theme name and also for your development host (localhost/yourproject or your-preject.dev).
$ npm install -g generator-teka
$ cd /www/your_project/sites/all/themes/
$ yo teka

Ok, now that Yeoman has generated all the files that you need, all you have to do is install NPM packages into your generated theme and then run "gulp", in order to generate and compile all dist files.
$ cd your_theme/
$ npm install --unsafe-perm
$ gulp

Now you are ready to code! Everything is up and running. See below info for some usage hints and tips.
And remember: change everything you need in your generated sub-theme, but don't change anything in the Teka base theme.

Pattern Lab integration (D8 / Optional)
Assuming that you chose to install Pattern Lab during the sub-theme generation, follow these steps:

Install Component Libraries module:

drush dl components
drush en components -y

Edit pattern-lab/config/config.yml and change twigAutoescape to false.

twigAutoescape: false

Pattern Lab front-end will be generated by Gulp, see Usage section below.

After generating the front-end, access the following url to see Pattern Lab in action:
http://my-project.dev/themes/my-theme/pattern-lab/public

Usage

With Gulp running, all you have to do is:

Sprites:
Save all your separated PNGs at assets/ims/sprite/. This will automatically generate a "sprite.png" file into dist/img/.
Retrieving your image data is also easy:
@include sprite($my-png-name);
This include returns something like this:
background-image: src(../img/sprite.png);
background-position: 45px 10px;
heihgt: 234px;
width: 122px;

SCSS:
Saving any SCSS file will make Gulp compile everything into one single "style.css" file in dist/css/.
We also have defined file and folder structures, as follows:

  • style.scss => All your custom SCSS goes right here.
  • base/_.scss => All @import are centered on this file.
  • base/_base.scss => All the base styles, such as 'a', 'ul', 'h1' etc.
  • base/_normalize.scss => "Normalize" css lib.
  • components/_buttons.scss => Button default style mixins.
  • components/_forms.scss => Form components style mixins.
  • components/_grid-settings.scss => Grid kickstart default style.
  • components/_lists.scss => List default styles.
  • components/_tables.scss => Table default styles.
  • components/_typography.scss => @font-face declarations and default markup styles.
  • conifg/_mixins.scss => Your custom mixins to be used all over the theme.
  • conifg/_variables.scss => All kind of reusable data goes here, stored as variables.
  • conifg/_sprites.scss => Gulp's auto-generated sprite variables (don't write nothing on this file).

Javascript:
Save all your JavaScript files in assets/js/. This will automatically generate an "output.min.js" file at dist/js/.
Also, all plugins and libraries ought to be placed in dist/js/lib and referenced there, as needed.

Bourbon + Neat:
As said earlier, we use the Sass mixins library "Bourbon" and its grid system "Neat".

With Bourbon, making big things is actually really easy:
@include transform( rotate(45deg) skew(20deg, 30deg) );
Is equal to
-webkit-transform: rotate(45deg) skew(20deg, 30deg);
-moz-transform: rotate(45deg) skew(20deg, 30deg);
-ms-transform: rotate(45deg) skew(20deg, 30deg);
-o-transform: rotate(45deg) skew(20deg, 30deg);
transform: rotate(45deg) skew(20deg, 30deg);

Neat is very lightweight and clean too. Also, it's one of the best grid tools for working with Drupal. Why? Because Neat doesn't rely on extra markup in order to work. You just target Neat's mixins on your actual markup and you're done:
.wrapper{
@include outer-container;
.children{
@include span-columns(8 of 12);
@include shift(2);
}
}

Below is the complete documentation for each tool:
- Gulp : https://github.com/gulpjs/gulp
- Sass: http://sass-lang.com/documentation/file.SASS_REFERENCE.html
- Bourbon: http://bourbon.io/docs/
- Neat: http://thoughtbot.github.io/neat-docs/latest/

made with Drupal by MMDA