vr_flex 1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 510772f7e6874b7acd68748b55dc835b57e08985
+  data.tar.gz: d01050ca807d040c6e4e65a45823b9b42d24478c
+SHA512:
+  metadata.gz: f3e600d2cc6369662047c963019457ee5317d2683b1a7eddaea06f77f1cf8a65dd44ed9f5a34ad6aad2c7c56982d5d026025173123d8bf64bfe9795488eca4da
+  data.tar.gz: bfda17e40ec61ce5eb42e2e727d6dd2eccec1db24ba0c68596969665ebe5944426d504df13b7aba20db51200c6e8b4007755475c7eb7ee2efb1e3b8e28dd6adf

data/README.md

@@ -0,0 +1,9 @@
+A simple Flexbox Compass extension 
+==================================
+
+This extension implements all necessary syntaxes for today's use:
+by one writing we get all syntaxes for successful work of flex-box.
+It ensures that flex box would work with both new and old browsers,
+e.g., android 4.1, android 4.3, iOS Safari, Safari, IE 10.
+Import vr_flex and you`re ready to go!
+Open [_vr_flex-demo.scss] (https://bitbucket.org/meshkis16/vr_flex/src/8991054a30e902f7d15cb5474d4e46efe5928892/templates/project/_vr_flex-demo.scss) for examples of how to use vr_flex.

data/lib/vr_flex.rb

@@ -0,0 +1,11 @@
+# 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('vr_flex', :path => extension_path)

data/stylesheets/_vr_flex.scss

@@ -0,0 +1,159 @@
+@mixin flex-on(
+               $display: flex,
+               $direction: null,
+               $wrap: null,
+               $justify: null,
+               $align-items: null,
+               $align-content: null) {
+// Nustatom objekta kaip konteineri ir uzduodam
+// isdestymo parametra: flex | inline-flex
+  @if $display == flex {
+    // 2009
+    display: -webkit-box;
+
+    // 2012
+    display: -webkit-flex;
+    display: -ms-flexbox; // 2011 (IE 10)
+    display: flex;
+  } @else if $display == inline-flex {
+    display: -webkit-inline-box;
+    display: inline-box;
+
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+  } @else {
+    display: $display;
+  }
+
+// Nustatom flex-direction
+// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
+//      - box-direction (normal | reverse)
+// 2011 - flex-direction (row | row-reverse | column | column-reverse)
+// 2012 - flex-direction (row | row-reverse | column | column-reverse)
+  $direction-2009: $direction;
+  $box-direction: null;
+
+  @if $direction == row {
+    $direction-2009: horizontal;
+    $box-direction: normal;
+  } @else if $direction == row-reverse {
+    $direction-2009: horizontal;
+    $box-direction: reverse;
+  } @else if $direction == column {
+    $direction-2009: vertical;
+    $box-direction: normal;
+  } @else if $direction == column-reverse {
+    $direction-2009: vertical;
+    $box-direction: reverse;
+  }
+
+  -webkit-box-orient: $direction-2009;
+  -webkit-box-direction: $box-direction;
+
+  -webkit-flex-direction: $direction;
+  -ms-flex-direction: $direction;
+  flex-direction: $direction;
+
+// Nustatom flex-wrap
+// 2009 - box-lines (single | multiple)
+// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
+// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
+  $alt-value: $wrap;
+
+  @if $wrap == nowrap {
+    $alt-value: single;
+  } @else if $wrap == wrap {
+    $alt-value: multiple;
+  } @else if $wrap == wrap-reverse {
+    $alt-value: multiple;
+  }
+
+  -webkit-box-lines: $alt-value;
+  -webkit-flex-wrap: $wrap;
+  -ms-flex-wrap: $wrap;
+  flex-wrap: $wrap;
+
+// Nustatom justify-content
+// 2009 - box-pack (start | end | center | justify)
+// 2011 - flex-pack (start | end | center | justify)
+// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
+  $alt-value: $justify;
+
+  @if $justify == flex-start {
+    $alt-value: start;
+  } @else if $justify == flex-end {
+    $alt-value: end;
+  } @else if $justify == space-between {
+    $alt-value: justify;
+  } @else if $justify == space-around {
+    $alt-value: distribute;
+  }
+
+  -webkit-box-pack: $alt-value;
+  -webkit-justify-content: $justify;
+  -ms-flex-pack: $alt-value;
+  justify-content: $justify;
+
+// Nustatom align-items
+// 2009 - box-align (start | end | center | baseline | stretch)
+// 2011 - flex-align (start | end | center | baseline | stretch)
+// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
+  $alt-value: $align-items;
+
+  @if $align-items == flex-start {
+    $alt-value: start;
+  } @else if $align-items == flex-end {
+    $alt-value: end;
+  }
+
+  -webkit-box-align: $alt-value;
+  -webkit-align-items: $align-items;
+  -ms-flex-align: $alt-value;
+  align-items: $align-items;
+
+// Nustatom align-content
+// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
+// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
+  $value-2011: $align-content;
+
+  @if $align-content == "flex-start" {
+    $value-2011: start;
+  } @else if $align-content == "flex-end" {
+    $value-2011: end;
+  } @else if $align-content == "space-between" {
+    $value-2011: justify;
+  } @else if $align-content == "space-around" {
+    $value-2011: distribute;
+  }
+
+  -webkit-align-content: $align-content;
+  -ms-flex-line-pack: $value-2011;
+  align-content: $align-content;
+}
+
+
+// 2009 - box-flex (integer)
+// 2011 - flex (decimal | width decimal)
+// 2012 - flex (integer integer width)
+@mixin flex($value: null) {
+
+  // Grab flex-grow for older browsers.
+  $flex-grow: nth($value, 1);
+
+  -webkit-box-flex: $flex-grow;
+  -webkit-flex: $value;
+  -ms-flex: $value;
+  flex: $value;
+}
+
+// 2009 - box-ordinal-group (integer)
+// 2011 - flex-order (integer)
+// 2012 - order (integer)
+@mixin order($int: 0) {
+
+  -webkit-box-ordinal-group: $int;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}

data/templates/project/_vr_flex-demo.scss

@@ -0,0 +1,62 @@
+// This extension implements all necessary syntaxes for today's use:
+// by one writing we get all syntaxes for successful work of flex-box.
+// It ensures that flex box would work with both new and old browsers,
+// e.g., android 4.1, android 4.3, iOS Safari, Safari, IE 10.
+// Import vr_flex and you`re ready to go!
+
+@import "vr_flex";
+
+//****************//
+// vr_flex mixins //
+//****************//
+
+// Establish flexbox layout with default all values
+@include flex-on;
+
+//Optional arguments
+@include flex-on($display, $direction, $wrap, $justify, $align-items, $align-content);
+
+    // $display         -   Establish flexbox layout
+    // $direction       -   Set the flex-direction
+    // $wrap            -   Allow the items to wrap as needed with this property
+    // $justify         -   Defines the alignment along the main axis
+    // $align-items     -   Align flex items
+    // $align-content   -   This aligns a flex container's lines within when there is extra space in the cross-axis
+
+// Variable defaults
+
+    // $display: flex
+    // $direction: row
+    // $wrap: nowrap
+    // $justify: flex-start
+    // $align-items: stretch
+    // $align-content: stretch
+
+
+// Set the flex value for flex items
+@include flex($flex); 
+
+// Variable default
+    // $flex: 0 1 auto;   
+
+// Change the order of flex items
+@include order($order);
+
+//*********//
+// Example //
+//*********//
+
+.main-div {
+    @include flex-on(flex, row, nowrap, space-between, center, center );
+    .child-div {
+        @include flex(1 1 auto);
+        @include order(2);
+    }
+}
+
+//***************//
+// Other example //
+//**************//
+.main-div {
+    @include flex-on($display: inline-flex, $justify: space-between, $align-content: center );
+}

data/templates/project/manifest.rb

@@ -0,0 +1,26 @@
+# Description
+description "This extension implements all necessary syntaxes for today's use:
+            by one writing we get all syntaxes for successful work of flex-box. 
+            It ensures that flex box would work with both new and old browsers,
+            e.g., android 4.1, android 4.3, iOS Safari, Safari, IE 10."
+
+# Stylesheet Import
+file '_vr_flex-demo.scss', :like => :stylesheet, :media => 'screen, projection'
+
+# Javascript Import
+# file 'scripts.js', :like => :javascript, :to => 'scripts.js'
+
+# General File Import
+# file 'README.md', :to => "README.md"
+
+# Compass Extension Help
+help %Q{
+  Open vr_flex-demo.scss for help and examples.
+}
+
+# Compass Extension Welcome Message
+#  Users will see this when they create a new project using this template.
+welcome_message %Q{
+  You have successfully installed the vr_flex demo! Open _vr_flex-demo.scss
+    for examples.
+}

metadata

@@ -0,0 +1,82 @@
+--- !ruby/object:Gem::Specification
+name: vr_flex
+version: !ruby/object:Gem::Version
+  version: '1.0'
+platform: ruby
+authors:
+- Tadas Masidlauskas
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-04-03 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+description: |-
+  This extension implements all necessary syntaxes for today's use:
+                      by one writing we get all syntaxes for successful work of flex-box.
+                      It ensures that flex box would work with both new and old browsers,
+                      e.g., android 4.1, android 4.3, iOS Safari, Safari, IE 10.
+                      Import vr_flex and you`re ready to go!
+email:
+- meshkis16@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- README.md
+- lib/vr_flex.rb
+- stylesheets/_vr_flex.scss
+- templates/project/_vr_flex-demo.scss
+- templates/project/manifest.rb
+homepage: https://bitbucket.org/meshkis16/vr_flex
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: vr_flex
+rubygems_version: 2.4.6
+signing_key: 
+specification_version: 4
+summary: Use Flexbox in all browsers!
+test_files: []