Giter Site home page Giter Site logo

windup's Introduction

Windup

![Gitter](https://badges.gitter.im/Join Chat.svg)

A starter theme for Drupal. It's pretty light. It's made to be cloned and then hacked, please don't use me as a base theme!

A Ruby Sass version of this theme can be found on the branch ruby-sass.

Installation

Make sure you have npm, bower and grunt-cli installed

$ brew install node
$ npm install -g grunt-cli
$ npm install -g bower

Then install the theme's dependencies

$ npm install
$ bower install

If the dependencies for a project change, you can update them with:

$ npm update
$ bower update

You can also enable sourcemaps and full tracebacks on error in Gruntfile.js

If you wish to rename windup to a different name (which you probably do), YMMV but you can try:

$ grep -rl windup * | xargs sed -i .bk 's/windup/mytheme/g'
$ rm *.bk

and then rename the files listed by

find . -not -path '*/.*/*' -not -name '.*' -name '*windup*'

Usage

Wire Dependencies and Compile Sass

$ grunt

Watch for changes

$ grunt watch

This task will automatically compile Sass when changes are detected in the .scss files.

If you're using grunt watch and click the LiveReload button, your browser will refresh automatically when Grunt spots a change to your sass files.

Autoprefixer

Windup uses Autoprefixer to automatically add browser prefixes to your css properties based on your configuration. By default, autoprefixer is set to support the last 3 versions of browsers, and IE9 and up. You can modify this within Gruntfile.js using the the syntax documented on the browserlist plugin page.

Wire Dependencies

$ grunt wiredep

This will wire the Bower components specified in bower.json into windup.info and _vendor.scss (See below).

Dependencies

This will add your externally obtained JavaScript and CSS, as well as all it's necessary dependencies, into windup.info

$ bower install <package> --save
$ grunt wiredep

Sass files will be added into scss/_vendor.scss

$ bower install susy --save
$ grunt wiredep

Where is a registered package, GitHub shorthand (e.g. " desandro/masonry"), Git endpoint (e.g. "git://github.com/user/package.git") or a URL (e.g. "http://example.com/script.js"). You can also edit bower.json directly.

Template Suggestions and Classes

Template suggestions across all core (Node, User, Taxonomy Term and Comment) and Entity API defined entity types have been normalised to the following:

<entity type>
<entity type>__view_mode__<view mode>
<entity_type>__<bundle>
<entity_type>__<bundle>__<view mode>
<entity_type>__<entity id>
<entity_type>__<entity id>__<view mode>

There is one exception to this. The core user entity, uses "user-profile" as the entity type for template suggestions instead of "user".

The following classes can be found on all the above rendered entities:

<entity type> <entity type>-<id> type-<bundle> view-mode-<view mode>

Installing new Node.js modules

These are typically used for getting Grunt plugins. Either add to package.json or run:

$ npm install <module> --save-dev

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.