brevis 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bd777fb5028bc7617e0223259d005a218a0acb5b
-  data.tar.gz: 32237d8eb1f1aa5ee22c71a24d84c08df337224e
+  metadata.gz: 764d046619a88b9784d9eb7eacebe6ab72f49e00
+  data.tar.gz: f5268f52bad9a22a4d35bf7c376450f8648d476e
 SHA512:
-  metadata.gz: 1a4b34fd7c5d7bd0f39e78cdda0e7d5ddf2d4ffe04dc8fccaa526d4f59053a6aaf8a2b5543d87d95ed35f288df1ddec2c4caf053743dede93e9074ef912ae5ef
-  data.tar.gz: 628c4d7c2ee5a9993c6af05efc055f815a2fccb78356a4f8064d771be42f9b7b2a0dfe5759164659747735a8031fae09d14f83076acf541c2dd3571df08e8fa2
+  metadata.gz: 54d739ea7f3ff6098d98e8eeae4c1393d381af378b4cdc1d7baced853b8b78846b02f558f5b9ac98ec3944d7e80b7053bf4c0a182d89b897f54ee943282e45eb
+  data.tar.gz: 34450b26433cb46c739daef2c2d378b6d366cc07f4d2d201a595a5a001fdd48c7d26a690578d6568e4435fa332bc10f180f73adaec6189951ffe61b323c84518

data/lib/brevis.rb

@@ -0,0 +1,30 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+#  extension.
+require 'compass'
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+# Replace 'extension' with the name of your extension. Spaces allowed.
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('brevis', :path => extension_path)
+
+# Version and date of version for your Compass extension.
+# Replace Extension with the name of your extension
+#  Letters, numbers, and underscores only
+#  Version is a number. If a version contains alphas, it will be created as
+#    a prerelease version
+#  Date is in the form of YYYY-MM-DD
+module Brevis
+  VERSION = "0.0.4"
+  DATE = "2014-11-03"
+end
+
+# This is where any custom SassScript should be placed. The functions will be
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+#
+# end

data/stylesheets/_brevis.sass

@@ -0,0 +1,34 @@
+@import "compass"
+
+@import "brevis/utilities/admin.sass"
+@import "brevis/utilities/animations.sass"
+@import "brevis/utilities/breakpoints.sass"
+@import "brevis/utilities/colors.sass"
+@import "brevis/utilities/eq.sass"
+@import "brevis/utilities/font_awesome.scss"
+@import "brevis/utilities/forms.sass"
+@import "brevis/utilities/header.sass"
+@import "brevis/utilities/images.sass"
+@import "brevis/utilities/layout.sass"
+@import "brevis/utilities/page.sass"
+@import "brevis/utilities/tooltip.sass"
+@import "brevis/utilities/typography.sass"
+@import "brevis/utilities/z-index.scss"
+
+@import "brevis/components/chrome/header/branding.sass"
+@import "brevis/components/chrome/header/mobile_toggle.sass"
+@import "brevis/components/chrome/header/primary_menu.sass"
+@import "brevis/components/chrome/header/search.sass"
+@import "brevis/components/chrome/header/social.sass"
+
+@import "brevis/components/content_lists/content_carousel.sass"
+@import "brevis/components/content_lists/content_stream.sass"
+@import "brevis/components/content_lists/featured.sass"
+@import "brevis/components/content_lists/headlines.sass"
+@import "brevis/components/content_lists/topic_lists.sass"
+
+@import "brevis/components/content_modules/carousel.sass"
+@import "brevis/components/content_modules/chosen.sass"
+@import "brevis/components/content_modules/colorbox.sass"
+@import "brevis/components/content_modules/flexslider.sass"
+@import "brevis/components/content_modules/sticky_menu.sass"

data/stylesheets/brevis/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/stylesheets/brevis/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/stylesheets/brevis/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/stylesheets/brevis/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/stylesheets/brevis/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/stylesheets/brevis/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/stylesheets/brevis/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