generator-manati-theme

Yeoman generator to create a Drupal 7 base theme developed by Estudio Manatí

Note

This is a very new generator and needs some more testing and work, so please use at your own risk, PRs welcome.

Install

To install generator-manati-theme from npm, run:

npm install -g generator-manati-theme

If you don't have grunt and yeoman already installed:

npm install -g yo grunt-cli

Usage

Go to your Drupal sites/all/themes/ folder and run

yo manati-theme

You'll have to provide a theme name and a description, you can use plain text for the name and we'll do everything else.

You'll get a nice Live Reload installed, served by grunt and understood by drupal to react to changes in your localhost dev enviroment. You can opt out of this feature when you run the generator.

If you don't want yeoman to run npm install for you, use the --skipInstall option

yo manati-theme --skipInstall

##Features This generator will create a base theme with very little and very useful style.

The intention is that the work team has a very robust and feature rich workbench to develop a Drupal theme, taking advantage of modern tools like grunt, livereload and sass, but don't waste a lot of time removing style that won't be used or that is going to be different.

####Grunt The workflow is based around Grunt and comes preconfigured with the following features:

• grunt-sass

  • Uses libsass, no need for ruby as a dependency and much faster.
  • Includes the Neat grid framework.
  • Source files can be distributed as required in the sass folder, and will be compiled to the css/style.css single file.
  • CSS sourcemap is created.
  • Nested output is used in devel mode and compressed in production.

• grunt-contrib-watch

  • Watches over sass and javascript files
  • If selected at generation time, it will run the livereload server

• grunt-contrib-jshint

  • It will ensure that the javascript code in the src-js folder matches Manatí's code standards via the jshint linter, you can modify the .jshintrc file created at the theme folder to match your own.

####Sass In the sass/ folder you'll find a series of partials that will work as the base of your theme. This has the following features:

• You can use several mixins provided by Manatí.
  • sprite is a mixin to reduce the code needed to use sprites
  • font-size adds the font-size in px units and also in rems to have better performance on zoomed browsers.
  • hidden will hide elements via the clip trick for better accessibility
  • text-hidden will remove the text via the text-indent trick for easy buttons and similar use cases
• The Neat Neat grid framework is configured to be used as a layout helper.
• RWD is already setup for you, with a mobile first approach
• Normalize.css is included in the template.php file to ensure a proper and clean base.

###Javascript We include several javascript libraries and helpers that improve the theme's compatibility with older browsers

• Javascript is aided by the following libraries: -html5shiv -Respond.js

The theme has a src file in src-js, this is where you want to add your code, then grunt will lint it and minify it to the js/script.min.js,

##Generated code This is the file tree generated by this project, you can see files with the <theme_name> token, the generator will use the name provided by the user at generation time and deburr any non ascii chars and snake_case it, so if you use "Manatí Theme", <theme_name>.info will be manati_theme.info.

|-- <theme_name>
    |-- .editorconfig
    |-- .gitignore
    |-- .jshintrc
    |-- Gruntfile.js
    |-- README.md
    |-- <theme_name>.info
    |-- package.json
    |-- template.php
    |-- theme-settings.php
    |-- css
    |   |-- README.md
    |   |-- style.css
    |   |-- style.css.map
    |-- js
    |   |-- script.min.js
    |   |-- vendor
    |       |-- README.md
    |-- sass
    |   |-- README.md
    |   |-- style.scss
    |   |-- partials
    |       |-- README.md
    |       |-- _base.scss
    |       |-- _layout.scss
    |       |-- _mixins.scss
    |       |-- _variables.scss
    |-- src-js
    |   |-- script.js
    |-- templates
        |-- README.md
        |-- system
            |-- html.tpl.php
            |-- page.tpl.php

License

MIT