lullabot / windup Goto Github PK

A Drupal starter theme

License: GNU General Public License v2.0

JavaScript 5.71% CSS 0.63% HTML 93.67%

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

windup's People

Contributors

Stargazers

Watchers

Forkers

agiza gitter-badger rdrew dernetzjaeger tlattimore siathalysedi srsgores headstartdrupal

windup's Issues

Still a crapton of Drupal default CSS

Let's get rid of it...

Drupal 8 version of the theme

#61 Retire old D7 files (Wes)
#60 Add .info.yml file (Carwin)
#58 .theme file and basic functionality (Wes)
#59 .twig files (Wes and Carwin)
#68 Cleanup unnecessary commented out code in .twig files after #59 is done
#57 Fix wiredep implementation for bower to support the new library stuff for D8

Add a command example to the README.md to rename windup to <your_theme>

Logo

I thought it would be cool is we had a logo for this. I'm thinking a windup key, like for winding up robots incorporated with Lullabot somehow.

Oddity in node template

https://github.com/Lullabot/windup/blob/master/templates/node.tpl.php#L85-L89

Some weirdness going on that would cause the header tag be closed but never opened if !$page

[Re: #55] Get windup.info.yml added

Going to add it in without wiredep, wiredep can add it's stuff back in when it's ready.

node.tpl.php creates a DOM element to handle "unpublished", do we need a DOM element for it?

node.tpl.php

<?php if ($unpublished): ?>
    <mark class="unpublished"><?php print t('Unpublished'); ?></mark>
<?php endif; ?>

Missing LICENSE.txt

This repository would have to be GPLv2 given it's a Drupal theme. Since it's not on drupal.org we don't have the packaging infrastructure, so we should actually add a license.

[Re: #55] Retire old D7 files

Going to leave them in with .bak extension for reference until we get a proper 8.0.x version of the theme.

Autoprefixer not working

Related to #40

The autoprefixer support I added isn't working at all. It's not throwing errors either :/

PR coming shortly.

Document that theme hook suggestions are always overridden (Display Suite, etc)

If any modules provide any theme hook suggestions, windup ends up hard-assigning the eventual list which means modules like Display Suite will not work: https://github.com/Lullabot/windup/blob/master/template.php#L77

Ideally I'd rather not use Display Suite at all, but it might be worth documenting that other modules that provide custom theme_hook_suggestions will not work when used with the windup theme too.

Create 8.0.x Branch

It might be awhile before we start seeing a lot of requests for Drupal 8 sites. But I think it would be good to go ahead and create an D8 branch that we can start submitting pull requests against. I think the name should be 8.0.x to match Drupal Cores adoption of Semantic Versioning.

Update to Libsass 3.2.4 (includes @at-root)

This will require updating grunt-sass

Add automation tools

See what we can pull from Lullabot/drupal-boilerplate#30

Review necessity of Bower & wiredep

I don't think Bower or wiredep provide very much to this project, at least not enough that it should be considered a part of our default setup for new projects.

Here's what we introduce with Bower & wiredep:

An extra package manager
An extra dependency
An extra configuration file
Moar directories

In my opinion we should just drop both and just add things to our projects like we've always done.

[Re: #55] Get in good default .twig files (and if needed some default Scss)

Looked at stealing stuff from Classy, it has the markup and classes that we don't want, but if we use stuff from Core we get a pretty barren looking site.

Going to include some default Sass components in Windup for things that we're used to getting 'for free' e.g. the admin tabs. By default in D8 (if you're not using classy) they come in as unstyled ul and li's, adding default styles will give us the option of not worrying about those things unless we want to, but we also have the complete control to completely delete those styles/markup if the theme based on Windup wants to do something else.

Reviewed files

Write directory documentation

some node modules include .info file that breaks site

As we all know, malformed theme.info files really break the site. See https://www.drupal.org/node/619542

The new issue for the core patch for 7.x is https://www.drupal.org/node/2329453

As it happens, some node_modules, like grunt-eslint include an lcov.info file that makes drupal shit the bed. This is going to be a pain point for a lot of people (like it has been for myself for 2 hours of backtracking).

Is there any way to grunt-usemin integration?

Hi guys, I have a question about theme deployment.

bower and wiredep modules works quite nicely, I add a lot of content this way! however, now I have to combine these files such as bundle.js, bundle.css etc... grunt-usemin module works very well for this purpose, but I could not find an integration for Theme info file. Waiting for your help in this regard.

Thank you.

Include standard Sass directory structure

Improve vendor SCSS imports

Currently we are importing bower scss partials into components/_vendor.scss, which is not ideal in some cases. In the case of normalize.scss for instance, this should be loaded first in the cascade within base/.

Such as our folders depict, there are five distinct categories of partials:

base
core (i disagree with this naming change from libraries, but that's another ticket)
components
layout
theme

Really, I only see it necessary to import base, component and "core" partials.

I suggest the following structure, but this will mean modifications in how Sally's wiredep grunt config works. A seperate command for folder location perhaps?

base/
- _vendor.scss
- _base.scss (which imports _vendor.scss first)
components/
- _vendor.scss
- _components.scss
core/
- _vendor.scss
- _core.scss

PHP fatal when viewing a node revision

When viewing a node revision, eg. /node/1/revisions/1/view the theme throws a Fatal error like this:

Call to a member function bundle() on string in <path_undisclosed_to_protect_the_innocent>/windup.theme on line 43

That is this line: https://github.com/Lullabot/windup/blob/8.x-1.x/windup.theme#L43.

The problem is that D8 isn't consistent about parameter conversion for the node and node revision routes. There is an issue slated to Drupal 8.2.x to fix this: https://www.drupal.org/node/2730631.

In the interim, the solution is to grab the raw parameter from the route matching service and load the node up ourselves.

PR incoming.

Grunt broken because ESLint and CSS Lint are not present

They were added to the Gruntfile here: 1966387

But never added to package.json.

ESLint also fails by default on windup.js.

Best practices for .gitignore

For several projects that I am working on, the Github repository is cloned onto the server and an admin SSH's in to git pull if there is changes to deploy. The .gitignore prevents committing bower_components or css/style.css which means we would have to re-compile on the server. I've removed those as I want to keep those items tracked in version control.

What's the benefits to having these files ignored?

[Re: #55] After #59 is done, remove any unnecessary commented out code from Twig

Cleanup task for issue #59, where I'll be commenting out markup that I think is unneeded. Want to make sure I actually remember to remove that markup if it ended up being unnecessary.

What is grunt-contrib-clean doing?

I might just be an idiot on this one... but I'm unable to understand the purpose on this:

My understanding from https://github.com/gruntjs/grunt-contrib-clean, is that it will delete files and directories.

From what I see, it's deleting the following files:

clean: {
      css: ['css/style.css', 'scss/_component.scss', 'scss/_layout.scss', 'scss/_skin.scss']
    },

Why is it deleting style.css?

It doesn't appear to be running within grunt watch. Should it be?

watch: {
      css: {
        files: ['scss/**/*.scss'],
        tasks: ['sass_globbing', 'sass', 'postcss'],
        options: {
          livereload: true,
          spawn: false
        }
      }
    },

And within the default task, its running first. So, when the sass_globbing and sass processes run afterwards, it will recreate any files.

grunt.registerTask('default', ['clean','wiredep_create_bower', 'wiredep', 'sass_globbing', 'sass', 'postcss']);

Am I missing something here? Maybe a 🍺

Add johnalbin's normalize implementation

See https://github.com/JohnAlbin/normalize-scss

[Re: #55] Migrate any template.php functionality that is still needed

Here's the current status:

template_preprocess_html() - wes - PR: #70
template_preprocess_node() - carwin - PR: #87
template_preprocess_entity() this doesn't seem to exist in D8?
template_preprocess_taxonomy_term() - carwin PR: #90
template_preprocess_user_profile - carwin PR: #88
template_preprocess_comment - carwin PR: #89
template_page_alter - carwin - Can't do it. We need these new wrappers for contextual links to work.
Remove classes utility - carwin - Don't need it, we can use templates, and D8 has some good ones already.
Default Template Suggestions helper function - carwin - see #87. We don't really need this as much.

Can this be used with Stylus Preprocessor ?

Hello

I want to use a drupal theme with stylus support, does windup support it ? or are there any necessary steps i need to take in order to make it work with stylus css instead of Sass.

I really dont want ruby dependency

Implement some sort of CSS / JS testing

I've been wanting to use http://hardy.io/ for a very long time now to write Cucumber tests for my CSS. Sadly there's a bug and I can't get it to work. Here it is: thingsinjars/Hardy#24

This would be a sample Hardy test:

Feature: Website layout test
As a user I want visual consistency on the http://csste.st/ website

Scenario: Content layout
Given I visit "http://csste.st/"
Then "section > p" should have "color" of "rgb(68, 68, 68)"

What're other folks' thoughts on testing the front-end? I know we've used CasperJS before to do some of that on one project or another.

I want testing to be part of the project somehow.

Remove core CSS via info file.

Change function names to windup from harbor

SCSS Linter? SCSS Linter that doesn't require Ruby?

~~Looks like the interwebbins aren't helping in this department.~~

Putting a note in so maybe one day we'll get one of those bad fellas without a Ruby dependency.

Potentially Remove csslint

I don't see a reason to lint compiled code and I misunderstood what was happening when I merged the code. Discuss.

Clean up markup for Fields

Here is core's field.tpl.php source:

<?php

/**
 * @file field.tpl.php
 * Default template implementation to display the value of a field.
 *
 * This file is not used and is here as a starting point for customization only.
 * @see theme_field()
 *
 * Available variables:
 * - $items: An array of field values. Use render() to output them.
 * - $label: The item label.
 * - $label_hidden: Whether the label display is set to 'hidden'.
 * - $classes: String of classes that can be used to style contextually through
 *   CSS. It can be manipulated through the variable $classes_array from
 *   preprocess functions. The default values can be one or more of the
 *   following:
 *   - field: The current template type, i.e., "theming hook".
 *   - field-name-[field_name]: The current field name. For example, if the
 *     field name is "field_description" it would result in
 *     "field-name-field-description".
 *   - field-type-[field_type]: The current field type. For example, if the
 *     field type is "text" it would result in "field-type-text".
 *   - field-label-[label_display]: The current label position. For example, if
 *     the label position is "above" it would result in "field-label-above".
 *
 * Other variables:
 * - $element['#object']: The entity to which the field is attached.
 * - $element['#view_mode']: View mode, e.g. 'full', 'teaser'...
 * - $element['#field_name']: The field name.
 * - $element['#field_type']: The field type.
 * - $element['#field_language']: The field language.
 * - $element['#field_translatable']: Whether the field is translatable or not.
 * - $element['#label_display']: Position of label display, inline, above, or
 *   hidden.
 * - $field_name_css: The css-compatible field name.
 * - $field_type_css: The css-compatible field type.
 * - $classes_array: Array of html class attribute values. It is flattened
 *   into a string within the variable $classes.
 *
 * @see template_preprocess_field()
 * @see theme_field()
 *
 * @ingroup themeable
 */
?>
<!--
THIS FILE IS NOT USED AND IS HERE AS A STARTING POINT FOR CUSTOMIZATION ONLY.
See http://api.drupal.org/api/function/theme_field/7 for details.
After copying this file to your theme's folder and customizing it, remove this
HTML comment.
-->
<div class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <?php if (!$label_hidden): ?>
    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
  <div class="field-items"<?php print $content_attributes; ?>>
    <?php foreach ($items as $delta => $item): ?>
      <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
    <?php endforeach; ?>
  </div>
</div>

Unable to install sass-mq via bower

I tried installing Sass-MQ, and didn't have the scss downloaded into a vendor directory.

I tried bower install sass-mq --save per the documentation

Wiredep not updating .info file

I've just set up windup and followed installation instructions (i.e. npm/bower install) and am having trouble with the grunt wiredep command.

I ran:

bower install susy --save
grunt wiredep

Susy is installed correctly with a reference listed in _vendor.scss but windup.info doesn't seem to have changed.

Best practices readme(s)

We need to beef out the readme(s) on best practices.

Proper uses of selector naming conventions
Enforcing modularity of CSS components
Warn that extends not to be used across partials (there are still problems with extends in libsass too)
Keep theme name the same on new projects, only create variations of it (to avoid the same name as the project, or really dumb on the fly naming)
Warn about bloating your tooling (crazy amounts of dependancies causing compile performance, etc)
etc

remove all the ruby shit.
Add libsass instead