semantic-mixins 0.1.0

data/LICENSE.md

@@ -0,0 +1,23 @@
+Copyright (c) 2012 Gustavo Guichard
+===
+
+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,4 @@
+semantic-mixins
+===============
+
+A collection of mixins to make your Sass code look more semantic

data/lib/assets/stylesheets/semantic-mixins/_main.sass

@@ -0,0 +1,400 @@
+// This code isn't yet fully tested
+
+// CUSTOM HTML RESETS
+html
+  text-rendering: optimizeLegibility
+  -webkit-font-smoothing: antialiased
+
+= css-techniques($font-size: 16)
+  
+  html
+    font-size: relative-size($font-size,16)
+
+  body
+    font-size: 1em
+    line-height: 1.4
+
+  hr
+    display: block
+    height: 1px
+    border: 0
+    border-top: 1px solid #ccc
+    margin: 1em 0
+    padding: 0
+  
+  // Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+  img
+    vertical-align: middle
+
+  // Remove default fieldset styles.
+  fieldset
+    border: 0
+    margin: 0
+    padding: 0
+  
+  // Allow only vertical resizing of textareas.
+  textarea
+    resize: vertical
+
+// USEFULL MIXINS
+
+// This mixin is simple yet awesome to use, it'll give semantics to your sass code.
+// Use it like so:
+// ul.nav_menu
+//  padding: 20px
+//  +context(footer) // or +context("footer .menu_section") as a string when it's a class or id or a plural css selector.
+//    background: green
+= context($selector)
+  #{$selector} &
+    @content
+
+// IMAGE MIXINS
+// Before using this mixin you should put the images in a folder called sprites
+// and then import'em like so: @import "sprites/*.png"
+= sprite-replace($name, $boilerplate: false)
+  +sprites-sprite($name)
+  @if $boilerplate
+    +boilerplate-image-replace
+  @else
+    +hide-text
+  display: block
+  width: sprites-sprite-width($name)
+  height: sprites-sprite-height($name)
+
+= image-replace($img, $boilerplate: false)
+  @if $boilerplate
+    +boilerplate-image-replace
+  @else
+    +hide-text
+  display: block
+  background-repeat: no-repeat
+  height: image-height($img)
+  width: image-width($img)
+  background-image: image-url($img)
+
+// Don't use this technique if you are stylizing an pseudo element (e.g. decorative-content)
+= boilerplate-image-replace
+  background-color: transparent
+  border: 0
+  overflow: hidden
+  +decorative-content(before, false)
+    width: 0
+    height: 100%
+  // IE 6/7 fallback
+  +ie6-hack
+    text-indent: -9999px
+
+= inline-icon($img, $gap:5px, $pos: left, $padding: 0)
+  background-image: image-url($img)
+  background-repeat: no-repeat
+  @if $pos == right
+    background-position: right top
+    text-align: right
+  @else
+    background-position: left top
+    text-align: left
+  line-height: image-height($img)
+  padding: $padding
+  padding-#{$pos}: image-width($img) + $gap
+
+
+// TEXT MIXIS
+// Use it to set the color, background and text-shadow of selected areas of page
+= selection($no-shadow: true)
+  ::selection
+    @if $no-shadow
+      text-shadow: none
+    @content
+  ::-moz-selection
+    @if $no-shadow
+      text-shadow: none
+    @content
+
+// Set a color for the inputs placeholders. Compass doesn't have it =P
+= placeholder-color($color)
+  &::-webkit-input-placeholder
+    color: $color
+  &:-moz-placeholder
+    color: $color
+  &:-ms-input-placeholder
+    color: $color
+  &:input-placeholder
+    color: $color
+
+@function relative-size($size,$context)
+  @return #{$size/$context}em
+
+= justify($characters-after: 1, $characters-before: 2)
+  hyphens: auto
+  text-align: justify
+  overflow-wrap: hyphenate
+  -webkit-hyphens: auto
+  -webkit-hyphenate-character: "\2010"
+  -webkit-hyphenate-limit-after: $characters-after
+  -webkit-hyphenate-limit-before: $characters-before
+  -moz-hyphens: auto
+
+// POSITIONING MIXINS
+// Call this mixin to place a decorative content around an element, e.g a tape holding a post it.
+// When using the default configurations, you just need to set the dimensions, position and a background
+= decorative-content($position: after, $absolute: true)
+  @if $absolute
+    position: relative
+
+  &:#{$position}
+    content: ""
+    display: block
+    @if $absolute
+      position: absolute
+    @content
+
+
+= absolute-centering($width: 0, $direction: left, $offset: 0)
+  #{$direction}: 50%
+  margin-#{$direction}: - ($width / 2) - $offset
+
+= move($distance, $direction: bottom)
+  position: relative
+  #{$direction}: - $distance
+
+
+// COLOR MIXINS
+// Use this mixin instead of default compass +background-image mixin.
+// Use the first argument is the same as you use in the compass mixin
+// The second and third arguments are colors (probably the colors that you use at the end and start of tha gradient),
+// then compass is gonna mix the colors and support the old f***ing browsers.
+// If you use just one color it'll be the solid color
+= legacy-background-image($options, $color1, $color2: false)
+  @if $color2
+    background-color: mix($color1, $color2)
+  @else
+    background-color: $color1
+  +background-image($options)
+
+= vertical-gradient($color1, $color2, $legacy-mix-color: true)
+  @if $legacy-mix-color
+    +legacy-background-image(linear-gradient(top bottom, $color1, $color2), $color1, $color2)
+  @else
+    +legacy-background-image(linear-gradient(top bottom, $color1, $color2), $color1)
+
+= horizontal-gradient($color1, $color2, $legacy-mix-color: true)
+  @if $legacy-mix-color
+    +legacy-background-image(linear-gradient(left right, $color1, $color2), $color1, $color2)
+  @else
+    +legacy-background-image(linear-gradient(left right, $color1, $color2), $color1)
+
+= rgba($property, $color, $alpha: 1)
+  #{$property}: $color
+  #{$property}: rgba($color, $alpha)
+
+// Accessibility
+= for-blind-people($can-focus: true)
+  border: 0
+  clip: rect(0 0 0 0)
+  height: 1px
+  margin: -1px
+  overflow: hidden
+  padding: 0
+  position: absolute
+  width: 1px
+  @if $can-focus
+    &:active, &:focus
+      clip: auto
+      height: auto
+      margin: 0
+      overflow: visible
+      position: static
+      width: auto
+
+// IE Hacks MIXINS
+= ie6
+  +context(".ie6")
+    @content
+
+= ie6-hack
+  +context("* html")
+    @content
+
+= ie7
+  +context(".ie7")
+    @content
+
+= ie7-hack
+  +context("*+html")
+    @content
+
+= ie8
+  +context(".ie8")
+    @content
+
+= legacy-inline-block
+  display: inline-block
+  *display: inline
+  +has-layout
+
+= has-layout
+  zoom: 1
+
+
+// ANIMATION
+= keyframes($animation-name)
+  @-webkit-keyframes #{$animation-name}
+    @content
+  @-moz-keyframes #{$animation-name}
+    @content
+  @-o-keyframes #{$animation-name}
+    @content
+  @keyframes #{$animation-name}
+    @content
+
+// MEDIA QUERIES MIXINS
+// For the following mixins you can pass ipad, iphone, desktop, desktop-large, ipad-portrait, ipad-landscape, 
+// iphone-portrait, iphone-landscape or retina-display as arguments to the $device variable.
+
+// Screen size variables
+$iphone-portrait: 320px
+$iphone-landscape: 480px
+$ipad-portrait: 768px
+$ipad-landscape: 980px
+$desktop: 1224px
+$desktop-large: 1824px
+
+// Hides the element only in the device you choose
+= hide-on($device)
+  +respond-to($device)
+    display: none
+
+= hide-below($device)
+  +apply-to(less-than, $device)
+    display: none
+
+= hide-above($device)
+  +apply-to(more-than, $device)
+    display: none
+
+// Shows the element only in the device you choose
+= show-on($device)
+  +apply-to(not-on, $device)
+    display: none
+
+
+// The mixins below were inspired from here: https://gist.github.com/3931614 and a bit modified
+// Specific device targeting
+// Use: Only use if you want the style to respond to one device
+// Example:
+//     +respond_to(ipad-landscape)
+// will apply CSS only to an iPad at landscape rotation
+= respond-to($device)
+
+  @if $device == retina-display
+    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5)
+      @content
+
+  @if $device == iphone
+    @media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape)
+      @content
+
+  @if $device == iphone-landscape
+    @media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: landscape)
+      @content
+
+  @if $device == iphone-portrait
+    @media only screen and (max-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: portrait)
+      @content
+
+  @if $device == ipad
+    @media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape)
+      @content
+
+  @if $device == ipad-landscape
+    @media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: landscape)
+      @content
+
+  @if $device == ipad-portrait
+    @media only screen and (max-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: portrait)
+      @content
+
+  @if $device == desktop
+    @media only screen and (min-width: $desktop) and (max-width: $desktop-large)
+      @content
+
+  @if $device == desktop-large
+    @media only screen and (min-width: $desktop-large)
+      @content
+
+// General device targeting
+// Use: Only use if you want the style to apply to many devices
+// Example:
+//     +apply-to(smaller-than, iphone-portrait)
+// will apply CSS to anything smaller than an iphone-portrait
+// Example 2:
+//     +apply-to(not-on, retina-display)
+// will apply CSS to anything but retina-display devices
+= apply-to($filter, $device)
+  
+  $extrema: null
+  @if $filter == less-than
+    $extrema: max
+  @if $filter == more-than
+    $extrema: min
+
+  @if $filter != not-on
+    @if $device == iphone-landscape
+      @media only screen and (#{$extrema}-width: $iphone-landscape)
+        @content
+
+    @if $device == iphone-portrait
+      @media only screen and (#{$extrema}-width: $iphone-portrait)
+        @content
+
+    @if $device == ipad-landscape
+      @media only screen and (#{$extrema}-width: $ipad-landscape)
+        @content
+
+    @if $device == ipad-portrait
+      @media only screen and (#{$extrema}-width: $ipad-portrait)
+        @content
+
+    @if $device == desktop
+      @media only screen and (#{$extrema}-width: $desktop)
+        @content
+
+    @if $device == desktop-large
+      @media only screen and (#{$extrema}-width: $desktop-large)
+        @content
+  @else
+    @if $device == retina-display
+      @media only screen and (-webkit-max-device-pixel-ratio: 1.1), (max--moz-device-pixel-ratio: 1.1), (-o-max-device-pixel-ratio: 1.1), (max-device-pixel-ratio: 1.1)
+        @content
+
+    @if $device == iphone
+      @media only screen and (max-width: $iphone-portrait - 1), (min-width: $iphone-landscape + 1)
+        @content
+
+    @if $device == iphone-landscape
+      @media only screen and (max-width: $iphone-landscape - 1), (min-width: $iphone-landscape + 1)
+        @content
+
+    @if $device == iphone-portrait
+      @media only screen and (max-width: $iphone-portrait - 1), (min-width: $iphone-portrait + 1)
+        @content
+
+    @if $device == ipad
+      @media only screen and (max-width: $ipad-portrait - 1), (min-width: $ipad-landscape + 1)
+        @content
+
+    @if $device == ipad-landscape
+      @media only screen and (max-width: $ipad-landscape - 1), (min-width: $ipad-landscape + 1)
+        @content
+
+    @if $device == ipad-portrait
+      @media only screen and (max-width: $ipad-portrait - 1), (min-width: $ipad-portrait + 1)
+        @content
+
+    @if $device == desktop
+      @media only screen and (max-width: $desktop - 1) and (min-width: $desktop-large)
+        @content
+
+    @if $device == desktop-large
+      @media only screen and (max-width: $desktop-large - 1)
+        @content

data/lib/assets/stylesheets/semantic-mixins.sass

@@ -0,0 +1 @@
+@import ./semantic-mixins/main

data/lib/semantic-mixins.rb

@@ -0,0 +1,4 @@
+module SemanticMixins
+  class Engine < ::Rails::Engine
+  end
+end

data/semantic-mixins.gemspec

@@ -0,0 +1,17 @@
+Gem::Specification.new do |s|
+  s.name = %q{semantic-mixins}
+  s.version = "0.1.0"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
+  s.authors = ["Gustavo Guichard", "Josemar David Luedke", "Rafael Barboza"]
+  s.description = %q{A collection of mixins to make your Sass code look more semantic}
+  s.email = %w{gustavoguichard@gmail.com, josemarluedke@gmail.com, barboza.cardoso@gmail.com}
+  s.summary = %q{Some semantic mixins to enhance the compass plugin}
+  s.homepage = "https://github.com/gustavoguichard/semantic-mixins"
+  s.files = `git ls-files`.split($/)
+  s.executables = s.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  s.test_files = s.files.grep(%r{^(test|spec|features)/})
+  s.require_paths = ["lib"]
+  s.add_dependency('rails', '~> 3.1')
+  s.add_dependency('compass-rails')
+end

metadata

@@ -0,0 +1,87 @@
+--- !ruby/object:Gem::Specification
+name: semantic-mixins
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Gustavo Guichard
+- Josemar David Luedke
+- Rafael Barboza
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-11-14 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+- !ruby/object:Gem::Dependency
+  name: compass-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: A collection of mixins to make your Sass code look more semantic
+email:
+- gustavoguichard@gmail.com,
+- josemarluedke@gmail.com,
+- barboza.cardoso@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.md
+- README.md
+- lib/assets/stylesheets/semantic-mixins.sass
+- lib/assets/stylesheets/semantic-mixins/_main.sass
+- lib/semantic-mixins.rb
+- semantic-mixins.gemspec
+homepage: https://github.com/gustavoguichard/semantic-mixins
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: 1.3.5
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: Some semantic mixins to enhance the compass plugin
+test_files: []