smock 0.1.2 → 0.1.5

data/.gitignore

@@ -1,6 +1,2 @@
 .idea
-pkg/*
-.sass-cache
-versions
-tmp
-.DS_Store
+pkg/*

data/Gemfile.lock

@@ -1,9 +1,10 @@
 PATH
   remote: .
   specs:
-    smock (0.1.2)
-      sass (= 3.2.19)
-      thor (= 0.19.1)
+    smock (0.1.5)
+      bourbon (~> 3.2)
+      neat (~> 1.5)
+      sass (~> 3.3)
 
 GEM
   remote: http://rubygems.org/
@@ -11,20 +12,16 @@ GEM
     bourbon (3.2.3)
       sass (~> 3.2)
       thor
-    neat (1.5.1)
+    neat (1.6.0)
       bourbon (>= 3.1)
-      sass (~> 3.2.19)
+      sass (>= 3.3)
     rake (10.3.2)
-    rb-fsevent (0.9.4)
-    sass (3.2.19)
+    sass (3.4.3)
     thor (0.19.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  bourbon (~> 3.2)
-  neat (~> 1.5)
   rake
-  rb-fsevent (~> 0.9)
   smock!

data/README.md

@@ -2,54 +2,3 @@ smock
 =====
 
 The Studio styleguide project
-
-
-### Running the build
-
-The quickest way to get started is to run the following commands
-```bash
-bundle install
-rake build_version
-```
-
-### Running Smock locally
-
-While you can do `ruby -run -e httpd ./versions/latest -p 9090`, some people prefer to use [Pow](http://pow.cx) instead. Install using:
-
-```bash
-curl get.pow.cx | sh
-```
-
-The easiest way to do all the symlinking is:
-
-```bash
-cd ~/.pow
-mkdir smock
-cd smock
-ln -s /path/to/smock/versions/latest public
-```
-
-### Dev'ing Sass locally
-
-To aid development this project provides two tasks:
-
-This will copy and compile the latest code_html examples and make it ready on `smock.dev`
-```bash
-rake build_version
-```
-
-This will monitor sass files for changes re-compile ready on `smock.dev`
-```bash
-rake sasswatch
-```
-
-Note that you have to use rake build_versions to copy across markup.
-
-### SVG to CSS
-
-http://b64.io/
-
-### TODO
-
-
-- Set up build tasks to update and download the stuff in the third party folder

data/Rakefile

@@ -1,95 +1,2 @@
 require 'bundler'
-require 'fileutils'
-
-$:.push File.expand_path("../lib", __FILE__)
-require "smock/version"
-
 Bundler::GemHelper.install_tasks
-
-SVG_SRC    = "./app/assets/stylesheets/svg"
-TARGET     = "./versions/#{Smock::VERSION}"
-SVG_TARGET = "#{TARGET}/svg"
-
-task :default => :build_version
-
-desc "clean up"
-task :clean do
-  sh "rm -rf tmp versions"
-end
-
-desc "test stuff"
-task :test do
-  FileUtils.mkdir_p "./tmp/"
-  sh "bundle exec sass -l ./app/assets/stylesheets/smock.sass tmp/output.css"
-end
-
-desc "build CSS"
-task :build_css do
-  sh "bundle exec sass --precision 7 ./app/assets/stylesheets/smock.sass #{TARGET}/smock.css"
-  sh "bundle exec sass --precision 7 ./app/assets/stylesheets/smock.sass #{TARGET}/smock.min.css --style compressed"
-end
-
-desc "build SVG image CSS"
-task :build_svg_images do
-  FileUtils.mkdir_p SVG_TARGET
-
-  svg_files = Dir.glob("#{SVG_SRC}/*.sass").map { |filename| File.basename(filename, ".*") }
-
-  svg_files.each do |file|
-    sh "bundle exec sass #{SVG_SRC}/#{file}.sass #{SVG_TARGET}/#{file}.css --style compressed"
-  end
-
-  sh "bundle exec sass ./app/assets/stylesheets/svg_images.sass #{TARGET}/svg_images.css --style compressed"
-end
-
-desc "build javascript"
-task :build_js do
-  sh "webpack --colors --output-path #{TARGET}/"
-end
-
-task :watch do
-  sh "webpack --watch --colors --output-path ./versions/latest/"
-end
-
-desc "build a version of smock ready for deploy"
-task :build_version => :clean do
-
-  FileUtils.mkdir_p TARGET
-
-  [:build_css, :build_svg_images, :build_js].each { |task| Rake::Task[task].execute }
-
-  sh "ln -s $(pwd)/examples #{TARGET}/examples"
-
-  latest = "./versions/latest"
-  FileUtils.mkdir_p latest
-
-  sh "cp -R #{TARGET}/* #{latest}/"
-  sh "bundle exec sass ./guide.sass #{latest}/guide.css"
-  sh "ln -s $(pwd)/index.html #{latest}/"
-  sh "ln -s $(pwd)/guide.js #{latest}/"
-end
-
-desc "run a sass watcher"
-task :sasswatch => :build_version do
-  sh "bundle exec sass --watch --precision 7 app/assets/stylesheets/smock.sass:./versions/smock.css"
-  sh "bundle exec sass --watch --precision 7 app/assets/stylesheets/svg_images.sass:./versions/svg_images.css"
-end
-
-desc "deploy to S3 (Depends on the AWS CLI being available)"
-task :deploy_to_aws  do
-  if ENV["SNAP_BRANCH"] == 'master'
-    sh "aws s3 sync versions/latest s3://smock.io/latest --delete --recursive --cache-control 'max-age=0, must-revalidate'"
-    sh "aws s3 sync versions s3://smock.io/"
-  else
-    puts "Not on master. Refusing to deploy to S3"
-  end
-end
-
-desc "publish ruby gem"
-task :release_gem do
-  if ENV["SNAP_BRANCH"] == 'master'
-    sh "gem push pkg/*.gem"
-  else
-    puts "Not on master. Refusing to publish a gem"
-  end
-end

data/smock.gemspec

@@ -22,11 +22,9 @@ This gem provides the basic styles and files for use in an application that need
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   s.require_paths = ["lib"]
 
-  s.add_dependency('sass', '3.2.19')
-  s.add_dependency('thor', '0.19.1')
+  s.add_dependency('sass', '~> 3.3')
+  s.add_dependency('bourbon', '~> 3.2')
+  s.add_dependency('neat', '~> 1.5')
 
-  s.add_development_dependency('bourbon', '~> 3.2')
-  s.add_development_dependency('neat', '~> 1.5')
   s.add_development_dependency('rake')
-  s.add_development_dependency('rb-fsevent', '~> 0.9')
 end

data/{app/assets/stylesheets/includes/_colors.sass → v2/_colors.css.sass}

@@ -9,14 +9,8 @@ $gray-dark:     #454545
 $gray:          #888888
 $gray-light:    #BFBFBF
 $gray-lightest: #e1e1e1
-$gray-lightest2: #f1f1f1
 $white:         #FFFFFF
 
-$fill-color: #F7F7F7
-
-$border-color: $gray-light
+$border-color: $gray-lightest
 $text-highlight: $blue
 $border-radius: 4px
-
-// Third party colors
-$facebook: #3b5998

data/v2/_forms.css.sass

@@ -0,0 +1,29 @@
+fieldset
+  border: 0
+  padding: 0
+  +space(margin-bottom)
+
+label
+  margin: 0
+  padding: 0
+  +space(line-height, 2)
+  display: block
+  font-weight: bold
+
+input,
+input
+  padding: 0
+  margin: 0
+  border: 0
+  width: 100%
+  +typecsset-font-size($base-font-size)
+  +space(line-height, 2)
+  +space(padding-left, 0.75)
+  +space(padding-right, 0.75)
+  +border
+  border-radius: $border-radius
+  background: $white
+
+abbr[title]
+  color: $red
+  border: 0

data/{app/assets/stylesheets/includes/_grid.sass → v2/_grid.css.sass}

@@ -1,13 +1,16 @@
 // Configure Grid
 $grid-columns: 12
 $grid-padding-width: 10px
-$max-width: 940px
+$max-width: 960px
 
 $visual-grid: false
 $visual-grid-color: yellow
 $visual-grid-index: front
 $visual-grid-opacity: 0.5
 
+// Load Grid
+@import neat
+
 // Breakpoints
 $mobile: new-breakpoint(max-width 490px)
 $desktop: new-breakpoint(min-width 850px)

data/{app/assets/stylesheets/includes/_layouts.sass → v2/_layouts.css.sass}

@@ -1,19 +1,3 @@
-section,
-article
-  +clearfix
-
-hr
-  border: 0
-  margin: 0
-  +space(height)
-  +space(margin-top)
-  +space(margin-bottom, 2)
-  box-shadow: inset 0 -1px 0 0 $border-color
-
-.hr--small
-  margin-top: 0
-  +space(margin-bottom, 1)
-
 .l-container
   +outer-container
   min-width: $max-width

data/{app/assets/stylesheets/includes/_mixins.sass → v2/_mixins.css.sass}

@@ -49,17 +49,9 @@
     top: -#{$size / 2}
     clear: both
 
-@mixin border-reset
-  box-shadow: inset 0 0 0 0 transparent
-
 @mixin border($size: 1px, $color: $border-color)
   box-shadow: inset 0 0 0 $size $color
 
-@mixin border-top($size: 1px, $color: $border-color)
-  box-shadow: inset 0 $size 0 0 $color
-
-@mixin border-bottom($size: 1px, $color: $border-color)
-  box-shadow: inset 0 -#{$size} 0 0 $color
 
 @mixin hide-bottom-horizontal-rule
   &:after
@@ -72,8 +64,3 @@
 @mixin padded-outer-container
   +outer-container
   padding: 0 $grid-padding-width
-
-@mixin font-size($size)
-  +typecsset-font-size($size)
-  @if $size > $first-font-size
-    font-weight: 300

data/v2/_typography.css.sass

@@ -0,0 +1,82 @@
+// Settings
+$font-stack-main: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
+$font-stack-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif
+$base-line-height: 22px
+$small-font-size: 12px
+$base-font-size: 14px
+$first-font-size: 18px
+$second-font-size: 26px
+$third-font-size: 38px
+$fourth-font-size: 48px
+
+// TypeCSSet settings
+$typecsset-h1-size: $fourth-font-size
+$typecsset-h2-size: $third-font-size
+$typecsset-h3-size: $second-font-size
+$typecsset-h4-size: $first-font-size
+$typecsset-h5-size: $base-font-size
+$typecsset-h6-size: $base-font-size
+
+$typecsset-base-font-size: $base-font-size
+$typecsset-base-line-height: $base-line-height
+$typecsset-show-baseline: false
+
+// Load TypeCSSet
+@import typecsset
+
+// Overrides
+h1, h2, h3
+  margin: 0
+  font-weight: 300
+  +space(margin-bottom)
+
+h4
+  font-weight: normal
+  +space(margin-bottom)
+
+h5, h6
+  font-weight: bold
+  +space(margin-bottom)
+
+html
+  font-family: $font-stack-main
+  font-size: $base-font-size
+
+p
+  +space(margin-bottom)
+  a
+    text-decoration: underline
+
+a
+  color: $black
+  text-decoration: none
+  &:hover
+    text-decoration: underline
+
+a.active
+  font-weight: bold
+
+blockquote
+  font-family: $font-stack-serif
+  font-style: italic
+  +typecsset-font-size($first-font-size)
+  quotes: none
+  text-indent: 0
+
+cite
+  font-weight: bold
+  font-style: normal
+  +typecsset-font-size($base-font-size)
+  font-family: $font-stack-main
+
+.paragraph--bigger
+  +typecsset-font-size($first-font-size)
+.paragraph--no-margin
+  margin-bottom: 0
+
+.heading--mast
+  +space(margin-bottom, 2)
+  +space(margin-top, 2)
+
+.heading--normal-weight
+  font-weight: normal

data/{app/assets/stylesheets/modules/_asset_uploader.sass → v2/modules/_asset_uploader.css.sass}

@@ -47,7 +47,7 @@
   left: 0
 
 .asset-uploader__previews__item__mask__bar
-  height: 100%
+  height: 58px
   position: absolute
   top: 0
   left: 0

data/{app/assets/stylesheets/modules/_categories.sass → v2/modules/_categories.css.sass}

@@ -1,7 +1,5 @@
 .categories__list
-  +border-bottom
-  +space(margin-top)
-  +space(padding-bottom, 2)
+  +space(margin-top, 1)
   margin-left: 0
 
 .categories__category__link,

data/{app/assets/stylesheets/modules/_footer.sass → v2/modules/_footer.css.sass}

@@ -1,6 +1,3 @@
-.footer
-  +space(margin-top, 2)
-
 .footer-banner
   +space(margin-bottom)
   background: $black
@@ -11,15 +8,15 @@
 
 .footer-banner__envato-logo
   +space(min-height, 2)
+  +space(margin-bottom)
   display: block
   width: 100%
-  background-position: center
-  background-repeat: no-repeat
+  background: image-url('@x2/envato-large-inverse.png') center  no-repeat
   background-size: contain
 
 .footer-banner__text
   clear: left
-  +font-size($second-font-size)
+  +typecsset-font-size($second-font-size)
   color: $gray
   a
     color: $white
@@ -37,6 +34,7 @@
   margin-right: 0
 
 .footer-list__label
+  +space(margin-top)
   +space(margin-bottom)
   font-weight: bold
 
@@ -62,12 +60,6 @@
 .footer__sister-site__description
   +span-columns(3 of 5)
 
-.footer--terms
-  list-style: disc
-
-.footer--disclaimer
-  color: $gray-light
-
 .sub-footer
   +span-columns(12 of 12)
   +top-horizontal-rule(2)
@@ -81,8 +73,8 @@
   +span-columns(2 of 12)
   +shift(5)
   text-indent: -999999px
-  background-repeat: no-repeat
-  background-position: center right
+  background: image-url('@x2/envato-large.png') center right no-repeat
+  background-position: cover
   background-size: contain
 
 .footer-list--social