whiskers 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: ff07bb1245c21d2c87e4305babd9ce1c294bedb7
+  data.tar.gz: b5beeffa02679480d8842e66edde4d841f14021c
+SHA512:
+  metadata.gz: 046522cfa642db7926ae1f6013839e031bb2bac1713851844fd51671eed3575e53414300a803849ea6625c9ec1e94347988f88988c1fcc9260bad14619628f7f
+  data.tar.gz: 462855f08fc3b4c0c168339125058f4ea1f7e570f9692981a719bbd1f3bc7b87cb599005b109fe547787f9a6709d964e82d75ae2adda3af5746417c4571a3cc4

data/Gemfile

@@ -0,0 +1,3 @@
+source "https://rubygems.org"
+
+gemspec

data/Gemfile.lock

@@ -0,0 +1,34 @@
+PATH
+  remote: .
+  specs:
+    whiskers (0.0.1)
+      bitters (~> 1.2)
+      bourbon (~> 4.2)
+      neat (~> 1.7)
+      sass (~> 3.4)
+      thor (~> 0.19)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    bitters (1.2.0)
+      bourbon (>= 4.2)
+      sass (>= 3.4)
+      thor
+    bourbon (4.2.7)
+      sass (~> 3.4)
+      thor (~> 0.19)
+    neat (1.7.4)
+      bourbon (>= 4.0)
+      sass (>= 3.3)
+    sass (3.4.21)
+    thor (0.19.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  whiskers!
+
+BUNDLED WITH
+   1.10.6

data/LICENSE.md

@@ -0,0 +1,12 @@
+Copyright (c) 2016, Zane Swafford
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/README.md

@@ -0,0 +1,116 @@
+<img src="https://raw.githubusercontent.com/zaneswafford/whiskers/master/whiskers.png" height="100">  
+Whiskers
+========
+
+Whiskers is a dandy little gem for quickly spinning up sites using [SASS](http://sass-lang.com), [CoffeeScript](http://coffeescript.org), and [Thoughtbot’s Bourbon](http://bourbon.io).
+
+There’s no fancy magic here. Just a Ruby script that copies some web pages around. 
+All wrapped up in a gem you can call from the command line.
+
+This dingus automates a lot of tedious command line work I was doing previously.
+If you would like to use it, be my guest.
+
+## What does it do?
+You can read the source for yourself if you’re so inclined. If you’re lazy, like me, here is a flyover:
+
+	1. Make a directory structure for organizing your scripts and stylesheets.
+	2. Download jQuery, require.js, normalize.css
+	3. Download Bourbon, Neat, Bitters, and some Refills.
+	4. Copy over a template to get started on a project
+	5. Provide an easy way to live compile CoffeeScript and Sass
+
+
+## Why the Hell would I want that?
+You probably don’t. This is a tool for *me*. **Not everything is about you**. 
+
+I apologize, that was curt. You’re a pleasant person and you do a good job.
+
+## How do install it?
+You can run:
+```
+	$ gem install whiskers
+```
+
+💥 Boom, you’re done. Though you’ll want to [install CoffeeScript](http://coffeescript.org/#installation) for it to work.
+
+## How do I use it?
+If you want to get up and running, you can create a new Whiskers site, open the directory, and tell Whiskers to watch for changes like so:
+
+```
+	$ whiskers new nameOfMySite
+	$ cd nameOfMySite
+	$ whiskers watch
+```
+
+If you want to create a site with a template beyond the base template you could run:
+```
+	$ whiskers new nameOfMySite nameOfMyTemplate
+```
+
+You can see the templates available using:
+```
+	$ whiskers list
+```
+
+You can also ask for help using:
+```
+	$ whiskers help
+```
+
+## What do all these files and folders do?
+### index.html
+The main html page for the generated site, but you already knew that.
+	
+### scripts/
+Where the `.js` and `.coffee` files go
+- `lib/`
+	- Where all compiled Javascript files can be thrown.
+	- Also where you may want to put any Javascript libraries you plan on using.
+- `src/`
+	- Where all your CoffeeScript source files go.
+	- `layouts/`
+		- CoffeeScript for specific layouts can go here. (e.g. Scripts that are for the homepage go in `home.coffee`)
+		- These files can also use require to include CoffeeScript from the `modules` directory.
+	- `modules/`
+		- Small reusable bits of CoffeeScript for UI elements and the like can go here.
+	- `plugins/`
+		- CoffeeScript plugins you want to use can go here.
+
+### stylesheets/ 
+Where the `.css`, `.scss`, and `.sass` files go
+- `app.sass`
+	- Tells SASS to compile the files hiding in the other subdirectories of `stylesheets/`
+- `layouts/`
+	- Where layout specific SASS files go. (e.g. Styles that are for the homepage go in `home.sass`)
+	- `layouts.sass`
+		- Contains a list of all the layouts that should be compiled in the `layouts/` folder
+- `modules/`
+	- Where styles related to small, reusable modules should go.
+	- `modules.sass`
+		- Contains a list of all the modules that should be compiled in the `modules/` folder
+- `plugins/`
+	- Where all of your SASSy plugins can be dumped.
+	- `plugins.sass`
+		- Contains a list of all the plugins that should be compiled in the `plugins/` folder
+	
+## How do I add my own scripts or stylesheets to a Whiskers project?
+- Put your CoffeeScript files in a subdirectory of `scripts/src/` and edit `app.coffee` or the corresponding CoffeeScript file in `scripts/src/layouts` so your scripts get included.
+- Put your SASS files in a subdirectory of `stylsheets/` and edit `app.sass` or the corresponding SASS file for that directory so your styles get included.
+- See the section above titled: “*What do all these files and folders do?*”
+
+## What OS’s does this run on?
+I run it on Mac OS X 10.11 but it would likely work various flavors of Linux or BSD as well. There is not much here that is system specific.
+
+## Can you change something for me?
+Probably not, but if you play your cards right we can get an ice cream cone, sport. 🍨
+
+## Can I change something?
+Sure, go for gold.
+
+## What’s with the logo?
+I like [otters](https://otters.io). 
+
+
+- - -
+
+*Made with ❤️ in Kansas.*

data/bin/whiskers

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require File.dirname(__FILE__) + "/../lib/whiskers.rb"
+
+Whiskers::Generator.start

data/core/whiskers/base/index.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Web Template</title>
+	<link type="text/css" href="stylesheets/app.css" rel="stylesheet">
+	<script type="text/javascript" src="scripts/lib/plugins/jquery.min.js"></script>
+	<script type="text/javascript" src="scripts/lib/plugins/require.min.js"></script>
+	<script type="text/javascript" src="scripts/lib/app.js"></script>
+	<script type="text/javascript" src="scripts/lib/layouts/home.js"></script>
+</head>
+<body>
+	<header class="centered-navigation" role="banner">
+		<div class="centered-navigation-wrapper">
+			<a href="javascript:void(0)" class="mobile-logo">
+				<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_3_dark.png" alt="Logo image">
+			</a>
+			<a href="javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu">MENU</a>
+			<nav role="navigation">
+				<ul id="js-centered-navigation-menu" class="centered-navigation-menu show">
+					<li class="nav-link"><a href="javascript:void(0)">Products</a></li>
+					<li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
+					<li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
+					<li class="nav-link logo">
+						<a href="javascript:void(0)" class="logo">
+							<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_3_dark.png" alt="Logo image">
+						</a>
+					</li>
+					<li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
+					<li class="nav-link more"><a href="javascript:void(0)">More</a>
+						<ul class="submenu">
+							<li><a href="javascript:void(0)">Submenu Item</a></li>
+							<li><a href="javascript:void(0)">Another Item</a></li>
+							<li class="more"><a href="javascript:void(0)">Item with submenu</a>
+								<ul class="submenu">
+									<li><a href="javascript:void(0)">Sub-submenu Item</a></li>
+									<li><a href="javascript:void(0)">Another Item</a></li>
+								</ul>
+							</li>
+							<li class="more"><a href="javascript:void(0)">Another submenu</a>
+								<ul class="submenu">
+									<li><a href="javascript:void(0)">Sub-submenu</a></li>
+									<li><a href="javascript:void(0)">An Item</a></li>
+								</ul>
+							</li>
+						</ul>
+					</li>
+					<li class="nav-link"><a href="javascript:void(0)">Sign up</a></li>
+				</ul>
+			</nav>
+		</div>
+	</header>
+	
+	<main>		
+		<!-- This is a device section, you could use it to talk about your app -->
+		<div class="device-background">
+			<div class="device-text">
+				<h4>Text about App or Device</h4>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, recusandae? Deserunt repellendus.</p>
+			</div>
+				<div class="device">
+				<div class="screen"></div>
+			</div>
+		</div>
+		
+		<!-- Here is a flexbox grid. Isn't it classy? --><br>
+		<div class="grid-item-wrapper">
+			<div class="grid-items-lines">
+				<a href="javascript:void(0)" class="grid-item">
+				<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1_dark.png" alt="">
+					<h1>Grid Item</h1>
+					<p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
+				</a>
+				<a href="javascript:void(0)" class="grid-item">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_3_dark.png" alt="">
+					<h1>Another Item</h1>
+					<p>Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit.</p>
+				</a>
+				<a href="javascript:void(0)" class="grid-item">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_2_dark.png" alt="">
+					<h1>Another Grid Item</h1>
+					<p>Lorem ipsum dolor sit amet, elit.</p>
+				</a>
+				<a href="javascript:void(0)" class="grid-item">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_2_dark.png" alt="">
+					<h1>Grid Item</h1>
+					<p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
+				</a>
+				<a href="javascript:void(0)" class="grid-item grid-item-big">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_2_dark.png" alt="">
+					<h1>Wider Grid Item</h1>
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
+				</a>
+				<a href="javascript:void(0)" class="grid-item">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_3_dark.png" alt="">
+					<h1>A Grid Item</h1>
+					<p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
+				</a>
+				<a href="javascript:void(0)" class="grid-item">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1_dark.png" alt="">
+					<h1>Item</h1>
+					<p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
+				</a>
+				<a href="javascript:void(0)" class="grid-item">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_2_dark.png" alt="">
+					<h1>Last Grid Item</h1>
+					<p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
+				</a>
+				<div class="right-cover"></div>
+				<div class="bottom-cover"></div>
+			</div>
+		</div>
+		
+		<!-- Here are some example comments. Real comments won't be this civil, or this 
+			 Latin. --> <br>
+		<div class="comment-wrapper">
+			<div class="comment">
+				<div class="comment-image">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1.png" alt="Logo image">
+				</div>
+				<div class="comment-content">
+					<h1>First Comment Title or Author</h1>
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.</p>
+					<p class="comment-detail">Date or details about this post</p>
+				</div>
+			</div>
+			
+			<div class="comment">
+				<div class="comment-image">
+				<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_2.png" alt="Logo image">
+				</div>
+				<div class="comment-content">
+					<h1>Another One</h1>
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.</p>
+					<p class="comment-detail">Date or details about this post</p>
+				</div>
+			</div>
+		</div>
+	
+		<!-- Here are some sample boxes, they use the Neat grid	for alignment --> <br>
+		<div class="boxes">
+			<div class="box"></div>
+			<div class="box"></div>
+			<div class="box"></div>
+			<div class="box"></div>
+		</div>	
+	</main>
+	
+	<footer role="contentinfo">
+		<!-- Last, here is the footer. You can chop out the footer tag's content if you 
+			 just want a sticky footer without anything else.  -->
+		<div class="footer-logo">
+			<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/placeholder_logo_1.png" alt="Logo image">
+		</div>
+		<ul>
+			<li><a href="javascript:void(0)">About</a></li>
+			<li><a href="javascript:void(0)">Contact</a></li>
+			<li><a href="javascript:void(0)">Products</a></li>
+		</ul>
+		
+		<div class="footer-secondary-links">
+			<ul>
+				<li><a href="javascript:void(0)">Terms and Conditions</a></li>
+				<li><a href="javascript:void(0)">Privacy Policy</a></li>
+			</ul>
+			
+			<ul class="footer-social">
+				<li><a href="javascript:void(0)">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/facebook-logo-circle.png" alt="Facebook">
+				</a></li>
+				<li><a href="javascript:void(0)">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/twitter-logo-circle.png" alt="Twitter">
+				</a></li>
+				<li><a href="javascript:void(0)">
+					<img src="https://raw.githubusercontent.com/thoughtbot/refills/b7c61c133f568cd044b708d099d8144cc3ce2b66/source/images/youtube-logo-circle.png" alt="YouTube">
+				</a></li>
+			</ul>
+		</div>
+	</footer>
+</body>
+</html>

data/core/whiskers/base/scripts/src/app.coffee

@@ -0,0 +1,8 @@
+# Do any app-wide setup here
+
+requirejs.config({
+    baseUrl: 'js/lib',
+    paths: {
+        jquery: 'jquery-2.2.2'
+    }
+});

data/core/whiskers/base/scripts/src/layouts/home.coffee

@@ -0,0 +1,3 @@
+# Put all the modules you require in here
+
+require ['modules/header']

data/core/whiskers/base/scripts/src/modules/header.coffee

@@ -0,0 +1,11 @@
+$(document).ready ->
+  menuToggle = $('#js-centered-navigation-mobile-menu').unbind()
+  $('#js-centered-navigation-menu').removeClass 'show'
+  menuToggle.on 'click', (e) ->
+    e.preventDefault()
+    $('#js-centered-navigation-menu').slideToggle ->
+      if $('#js-centered-navigation-menu').is(':hidden')
+        $('#js-centered-navigation-menu').removeAttr 'style'
+      return
+    return
+  return

data/core/whiskers/base/stylesheets/app.sass

@@ -0,0 +1,6 @@
+// app.css is generated from this file via:
+// sass --watch css/app.sass:css/app.css
+
+@import 'plugins/plugins'
+@import 'modules/modules'
+@import 'layouts/layouts'

data/core/whiskers/base/stylesheets/layouts/home.sass

@@ -0,0 +1,8 @@
+// Put styles here that only effect this layout
+.grid-item-wrapper
+	+clearfix
+	+outer-container
+
+.comment-wrapper 
+	+clearfix
+	+outer-container

data/core/whiskers/base/stylesheets/layouts/layouts.sass

@@ -0,0 +1 @@
+@import 'home'

data/core/whiskers/base/stylesheets/modules/comment.scss

@@ -0,0 +1,65 @@
+.comment {
+  $base-border-radius: 3px !default;
+  $base-spacing: 1.5em !default;
+  $action-color: #477DCA !default;
+  $dark-gray: #333 !default;
+  $base-font-color: $dark-gray !default;
+  $comment-gutter: 1.4em;
+  $comment-image-padding: 0.7em;
+  $comment-image-width: 4em;
+  $comment-color: $base-font-color;
+  $comment-background: lighten($action-color, 15%);
+  $comment-detail-color: transparentize($comment-color, 0.5);
+  $comment-image-vert-alignment: top;
+
+  border-bottom: 1px solid transparentize($comment-color, 0.9);
+  display: table;
+  margin-bottom: $base-spacing;
+  padding-bottom: 1em;
+  width: 100%;
+
+  .comment-image,
+  .comment-content {
+    display: table-cell;
+    vertical-align: $comment-image-vert-alignment;
+  }
+
+  .comment-image {
+    padding-right: $comment-gutter;
+
+    > img {
+      background: $comment-background;
+      border-radius: $base-border-radius;
+      display: block;
+      height: auto;
+      max-width: none;
+      padding: $comment-image-padding;
+      width: $comment-image-width;
+    }
+
+    .comment-reverse-order & {
+      padding-right: 0;
+      padding-left: 10px;
+    }
+  }
+
+  .comment-content {
+    width: 100%;
+
+    h1 {
+      font-size: 1em;
+      margin: 0 0 0.5em 0;
+    }
+
+    p {
+      line-height: 1.5em;
+      margin-bottom: 0.5em;
+    }
+
+    p.comment-detail {
+      color: $comment-detail-color;
+      font-size: 0.9em;
+      font-style: italic;
+    }
+  }
+}