sassblueprint 0.0.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 3c6a1ce12bd3a0afd94fea92bc83e5965490d9e1
+  data.tar.gz: 0e14aae5aaf72048697c5e2817920db7eba587eb
+SHA512:
+  metadata.gz: a1c3559691e2a6425beb2c26582048c72b294264f381cead7ce00d34a1e378ff676f7ff167cd70f39e686e2e00824e500644ffd7735da27a662505c6ae7508aa
+  data.tar.gz: 7f54c07d345bcce01fc84ad1d4eb72ddc09647c294f87c0102bdd9b4635ef80ef0804e0d3f693e469c4fb4d4c81182fdcc6ae7e030135c3c8a065b6dc05f37be

data/Gemfile

@@ -0,0 +1,21 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in sassblueprint.gemspec
+gemspec
+
+
+  # Sass, Compass and extensions.
+  gem 'singularitygs'           # Alternative to the Susy grid framework.
+  gem 'singularity-extras'      # extras for complex grid systems
+  gem 'breakpoint'              # Manages CSS media queries.
+
+  gem 'sass'                    # Sass.
+  gem 'sass-globbing'           # Import Sass files based on globbing pattern.
+  gem 'compass'                 # Framework built on Sass.
+  gem 'compass-validator'       # So you can `compass validate`.
+  gem 'compass-normalize'       # Compass version of normalize.css.
+
+  gem 'sass-a11y'               # Accessibility helpers for Sass.
+  gem 'toolkit'                 # Compass utility from the fabulous Snugug.
+  gem 'oily_png'                # Faster Compass sprite generation.
+  gem 'css_parser'              # Helps `compass stats` output statistics.

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Kendall Totten
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,31 @@
+# Blueprint
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'blueprint'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install blueprint
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/blueprint/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/lib/sassblueprint.rb

@@ -0,0 +1,11 @@
+require 'compass'
+
+
+base_directory  = File.join(File.dirname(__FILE__), '..')
+stylesheets_dir = File.join(base_directory, 'stylesheets')
+Compass::Frameworks.register('sassblueprint', :stylesheets_directory => stylesheets_dir)
+
+module sassblueprint
+  VERSION = "1.0.1"
+  DATE = "2014-10-13"
+end

data/lib/stylesheets/README.md

@@ -0,0 +1,124 @@
+# Introduction to [Sass](http://sass-lang.com/)
+Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules,
+variables, mixins, selector inheritance, and more. It’s translated to well-
+formatted, standard CSS using the command line tool or a web-framework plugin.
+
+Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS”
+(for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every
+valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
+
+The second, older syntax is known as the indented syntax (or just “Sass”).
+Inspired by Haml’s terseness, it’s intended for people who prefer conciseness
+over similarity to CSS. Instead of brackets and semicolons, it uses the
+indentation of lines to specify blocks. Although no longer the primary syntax,
+the indented syntax will continue to be supported. Files in the indented syntax
+use the extension .sass.
+
+Please refer to the [Sass documentation](http://sass-lang.com/docs.html) for
+further information about the syntax.
+
+## Introduction to [Compass](http://compass-style.org/)
+Compass is an open-source CSS Authoring Framework.
+
+Please refer to the [Compass documentation](http://compass-style.org/reference)
+for further information on how to leverage the powerful Compass framework.
+
+## Compass extensions
+There are many extensions available for Compass. You can install and use as many
+of them together or just a single one depending on your use-case. Good examples
+for useful Compass extensions are "susy" (a responsive grid framework
+[http://susy.oddbird.net/]) or "compass-rgbapng" (a rgba() .png file generator)
+but there are many more.
+
+## Setting up and using Sass and Compass
+Compass runs on any computer that has
+[ruby](http://www.ruby-lang.org/en/downloads) installed.
+
+Once you got ruby installed you can easily install the required gems from the
+command line:
+```
+$ gem update --system
+$ gem install compass
+```
+
+Any additional library can be installed in the same way:
+```
+$ gem install compass-rgbapng
+$ gem install susy
+```
+
+Once you have set up your environment you can navigate to the folder that holds
+your config.rb file.
+
+The config.rb file is the configuration file that helps Sass and Compass to
+understand your environment. For example, it defines which folder your .scss
+or .sass files are stored in or where the generated .css files should be output
+to.
+
+Executing the following command will constantly watch for any change in your
+.scss files and re-compile them into .css:
+```
+$ compass watch
+```
+
+You can also clear and recompile your .css manually:
+```
+$ compass clean
+$ compass compile
+```
+
+## Barebones Sass Structure
+The barebones CSS structure provided in this starterkit uses many of the ideas
+discussed in Jonathan [Snook's SMACSS](http://smacss.com) and is intended to
+provide a starting point for building modular, scalable CSS using Sass and
+Drupal.
+
+Multiple Sass partials are used to help organise the styles, these are combined
+by including them in styles.scss which is compiled into styles.css in the css/
+directory.
+
+All styles are included in order of specificity, this means that as you go down
+the document each section builds upon and inherits sensibly from the previous
+ones. This results in less undoing of styles, less specificity problems and
+all-round better architected and lighter stylesheets.
+
+The file and directory structure contained in this folder looks something like
+this:
+
+### Top level files
+These files are the main entry points for the Sass compiler and shouldn't
+directly contain any CSS code, instead they only serves to combine the Sass
+contained in the partials (see below) through @import directives.
+
+#### nfl-team-base.styles.scss
+This file aggregates all the components into a single file.
+
+#### nfl-team-base.normalize.scss
+This file provides a CSS reset/normalize generated based on the legacy
+variables.
+
+#### nfl-team-base.hacks.scss
+This file may be used to provide temporary hot-fixes for style issues that
+you plan to properly implement as components at a later point in time or simply
+don't have a proper solution for yet.
+
+#### nfl-team-base.no-query.scss
+This file re-renders the same contents as the styles.scss file but without any
+media queries. It can be used as a fallback for for older browsers that don't
+support media queries. You can find more information about this on the
+github repository of the
+[breakpoint](https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks).
+Compass gem.
+
+### Partials
+#### variables
+This is where you place your Sass variables.
+
+#### abstractions
+This is where you place your functions, mixins and extends.
+
+#### base
+This is where you place all your basic, raw HTML element styling.
+
+#### components
+This is where you place your components.

data/lib/stylesheets/_Sassblueprint.sass

@@ -0,0 +1,2 @@
+@import "base_utilities"
+@import "base_components"

data/lib/stylesheets/_base_components.sass

@@ -0,0 +1,17 @@
+@import "base_components/chrome/header/branding.sass"
+@import "base_components/chrome/header/mobile_toggle.sass"
+@import "base_components/chrome/header/primary_menu.sass"
+@import "base_components/chrome/header/search.sass"
+@import "base_components/chrome/header/social.sass"
+
+@import "base_components/content_lists/content_carousel.sass"
+@import "base_components/content_lists/content_stream.sass"
+@import "base_components/content_lists/featured.sass"
+@import "base_components/content_lists/headlines.sass"
+@import "base_components/content_lists/topic_lists.sass"
+
+@import "base_components/content_modules/carousel.sass"
+@import "base_components/content_modules/chosen.sass"
+@import "base_components/content_modules/colorbox.sass"
+@import "base_components/content_modules/flexslider.sass"
+@import "base_components/content_modules/sticky_menu.sass"

data/lib/stylesheets/_base_utilities.sass

@@ -0,0 +1,14 @@
+@import "base_utilities/admin.sass"
+@import "base_utilities/animations.sass"
+@import "base_utilities/breakpoints.sass"
+@import "base_utilities/colors.sass"
+@import "base_utilities/eq.sass"
+@import "base_utilities/font_awesome.scss"
+@import "base_utilities/forms.sass"
+@import "base_utilities/header.sass"
+@import "base_utilities/images.sass"
+@import "base_utilities/layout.sass"
+@import "base_utilities/page.sass"
+@import "base_utilities/tooltip.sass"
+@import "base_utilities/typography.sass"
+@import "base_utilities/z-index.scss"

data/lib/stylesheets/base_components/README.md

@@ -0,0 +1,40 @@
+# Components
+This directory should contain full components (modules in SMACSS), their
+sub-components and modifiers.
+
+Components are discrete parts of your page that should sit within the regions
+of your layouts. You should try to abstract your components as much as possible
+to promote reuse throughout the theme. Components should be flexible enough to
+respond to any width and should never rely on context
+(e.g. .sidebar-first .component) for styling. This allows modules to be placed
+throughout the theme with no risk of them breaking.
+
+If you find you need to change the look of a component depending on it's context
+you should avoid using context based classes at all costs. Instead it is better
+to add another "modifier" class to the component to alter the styling. Again,
+this promotes reuse.
+
+Sub-components are the individual parts that make up a component. As a general
+rule, adding a class to target a sub-component is a much better option than
+using descendant selectors or element selectors. In many cases sub-components
+can be made more reusable by making them components in their own right, so they
+can then be used within other components.
+
+Almost everything that doesn't belong in base should be made a component.
+
+## Some common examples throughout Drupal
+
+* Blocks
+* Content Types
+    For example, you may have a generic node component that contains
+    sub-components for the submitted by line and links. Specific components can
+    then be created for each content type to style the specifics of each. Finally,
+    by using entity view modes you can easily apply modifications based on the
+    .node-[view-mode] classes.
+* Forms
+    For instance the log in form.
+* Views
+    Each views output style could be made into a component, the content of each
+    row should be provided by a view mode styled by it's component CSS. Exposed
+    filter forms, views pagers and other views elements are also good candidates
+    for components.

data/lib/stylesheets/base_components/chrome/header/_branding.sass

@@ -0,0 +1,32 @@
+
+%site-logo
+  display: block
+  overflow: hidden
+  background: no-repeat 0 0
+  background-size: cover
+  margin: 0 0 $logo-bottom-margin 0
+  font-size: 0
+  line-height: 1
+  height: $mobile-logo-h
+  width: $mobile-logo-w
+  background-image: inline-image("logo_mobile.png")
+
+  +breakpoint($mobile-hi-res)
+    background-image: inline-image("logo_mobile@2x.png")
+
+  +breakpoint($desktop)
+    background-image: inline-image("logo.png")
+    background-size: contain
+    height: $logo-h
+    width: $logo-w
+
+  +breakpoint($desk-hi-res)
+    background-image: inline-image("logo@2x.png")
+
+  +breakpoint($print-media)
+    -webkit-print-color-adjust: exact
+    content: url("../images/logo.png")
+    background-image: none
+    height: $logo-h
+    width: $logo-w
+

data/lib/stylesheets/base_components/chrome/header/_mobile_toggle.sass

@@ -0,0 +1,24 @@
+
+//easily add a mobile menu navicon:
+%mobile-menu-toggle
+  text-indent: -100%
+  width: $navicon-size - 10px
+  height: $navicon-size
+  display: block
+  margin: 5px
+  padding-left: $navicon-size
+  &:before
+    content: ""
+    position: absolute
+    top: 0
+    left: 0
+    margin: $navicon-margin
+    width: $navicon-size - ($navicon-margin * 2)
+    height: $navicon-size - ($navicon-margin * 2)
+    background: image-url("hamburger_menu.svg") no-repeat
+    background-size: cover
+
+  .modal-content &
+    display: none
+
+    

data/lib/stylesheets/base_components/chrome/header/_primary_menu.sass

@@ -0,0 +1,66 @@
+
+// 
+$primary-menu-height: 40px
+$primary-menu-padding-v: 5px
+$primary-menu-padding-h: 10px
+
+%primary_menu 
+  +breakpoint($desktop)
+    position: relative
+    width: 100%
+    min-height: $primary-menu-height
+    
+    .primary-menu-inner
+      +horizontal-list 
+      ul.links
+        padding: 0
+        margin: 0 -(#{$primary-menu-height}/2)
+        overflow: hidden
+        height: $primary-menu-height
+
+      // Main menubar:  
+      .primary-links
+        li
+          margin: 0
+          padding: 0
+          text-align: center
+          display: inline-block
+        li a 
+          display: block
+          padding: $primary-menu-padding-v $primary-menu-padding-h
+          text-decoration: none
+        
+        li.first
+          margin-left: 0
+          a
+            padding-left: $primary-menu-padding-h
+        li.last
+          margin-right: 0
+          a
+            padding-right: $primary-menu-padding-h
+
+
+      // Dropdown menu:  
+      li > .menu-minipanel-panel
+        top: $primary-menu-height
+
+  +breakpoint($mobile-device)
+    background: white
+    .primary-links
+      border: 1px solid #ddd
+    ul.links
+      margin: 0 0 0 (#{$primary-menu-height} * 1.5)
+      padding: 0
+      width: auto
+      list-style: none
+      .last
+        a
+          border-bottom: 0px solid $text-quaternary
+      a 
+        width: 100%
+        padding: $primary-menu-padding-v
+        display: inline-block
+        border-bottom: 1px solid $text-quaternary
+  
+
+

data/lib/stylesheets/base_components/chrome/header/_search.sass

@@ -0,0 +1,46 @@
+
+%search
+  +breakpoint($print-media)
+    display: none
+
+  &:before
+    content: " "
+    width: $header-icon
+    height: $header-icon
+    display: block
+    float: left
+    background: no-repeat 50%
+    +svg-bg-simple("search")
+    +border-radius(2px)
+    
+    +breakpoint($mobile-device)
+      border: 1px solid #999
+      content: "D"
+      +icon-font
+      font-size: 32px
+      text-align: center
+      line-height: 1.35em
+
+    +breakpoint($desktop)
+      &:before
+        width: $header-icon-lg
+        height: $header-icon-lg
+      .search-block-form
+        height: $header-icon-lg
+
+
+  .search-inner
+    display: none
+    padding: 0 50px
+    
+    .search-block-form
+      background: white
+      height: $header-icon
+      max-width: 100%
+    input[type="text"]
+      height: 35px
+      margin: 5px 1px
+    input[type="submit"]
+      margin: 0
+      padding: 0 3px
+      height: 39px

data/lib/stylesheets/base_components/chrome/header/_social.sass

@@ -0,0 +1,30 @@
+.social
+  ul 
+    margin: 0 0 0 5px
+    padding: 0
+  li
+    +inline-block
+    +breakpoint($mobile-device)
+      margin: 0 0 8px
+  li ~li
+    +breakpoint($desktop)
+      margin: 0 0 0 5px
+  a
+    +hide-text
+    +inline-block
+    +border-radius(20px)
+    font-size: 0
+    width: $header-icon
+    height: $header-icon
+    
+    &.facebook 
+      +svg-bg-simple("facebook")
+    &.twitter
+      +svg-bg-simple("twitter")
+    &.mail
+      +svg-bg-simple("email")
+    &.more
+      +svg-bg-simple("more-social")
+
+  +breakpoint($print-media)
+    display: none