flexy-gem 1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,15 @@
1
+ ---
2
+ !binary "U0hBMQ==":
3
+ metadata.gz: !binary |-
4
+ MjViYTFjOWExMGI1NmVjYTk4ZGJjNjI0MDFlYTY0MzQ5ZTM3NmVjMw==
5
+ data.tar.gz: !binary |-
6
+ Zjk2OGZkNjhmZGY3NzkwNzNlN2RkYzQyY2I3MjJlNmQwN2M0OWY5Mg==
7
+ SHA512:
8
+ metadata.gz: !binary |-
9
+ YTk1NWI2MGE0NTk1MmY2M2FjNDBhMjI2YTdjNjUzNGZhZTY3OTM1ZjlkYjI4
10
+ MDZkODkzMTZkMTg2ZmRmNTAzOTNlYmM0YzA1YWQ5ZGFmMjI3NzE5NTAzOTc1
11
+ MDYzMGIyYzdlODhkN2IxNzdlZjA1YTFjZDRkYWZhYjFlZDJiYWU=
12
+ data.tar.gz: !binary |-
13
+ YjU1YWM0MWNkMjg1ZTliOTM1YWQ0ZmZkNmZmZjRlMmY5NDk4OTlmYmJlMjk4
14
+ ZDE2MzRiMTg3NzAxZWQwN2EyNTIzNWU5MzdmZGNlNjgwZTNlM2I5MjRmMDhi
15
+ MjBjYzljMmU0NGVjM2EzZmE3MTk5ZDYwOWI4NTY0YWU3NTQ2MDk=
File without changes
@@ -0,0 +1,4 @@
1
+ A simple Flexbox extension
2
+ ==========================
3
+
4
+ Open [_flexy-demo.scss](https://github.com/richardhuf84/Flexy) for examples of how to use Flexy.
@@ -0,0 +1,30 @@
1
+ # All gems that are required for this extension to work should go here.
2
+ # These are the requires you would normally put in your config.rb file
3
+ # By default, you should always included Compass. Do not include your
4
+ # extension.
5
+ require 'compass'
6
+
7
+ # This tells Compass what your Compass extension is called, and where to find
8
+ # its files
9
+ # Replace 'extension' with the name of your extension. Spaces allowed.
10
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
11
+ Compass::Frameworks.register('flexy-gem', :path => extension_path)
12
+
13
+ # Version and date of version for your Compass extension.
14
+ # Replace Extension with the name of your extension
15
+ # Letters, numbers, and underscores only
16
+ # Version is a number. If a version contains alphas, it will be created as
17
+ # a prerelease version
18
+ # Date is in the form of YYYY-MM-DD
19
+ module Flexygem
20
+ VERSION = "1.0"
21
+ DATE = "2015-02-09"
22
+ end
23
+
24
+ # This is where any custom SassScript should be placed. The functions will be
25
+ # available on require of your extension without the need for users to import
26
+ # any partials. Uncomment below.
27
+
28
+ # module Sass::Script::Functions
29
+ #
30
+ # end
@@ -0,0 +1,40 @@
1
+ @import "compass/css3/shared";
2
+
3
+ $flexy-support: not -moz, -webkit, not -o, not -ms, official !default;
4
+
5
+ @mixin flexy(
6
+ $el: li,
7
+ $direction: null,
8
+ $align: null,
9
+ $justify: null,
10
+ $flex: null) {
11
+
12
+ // Establish the flex formatting context
13
+ @include experimental-value(display, flex, $flexy-support...);
14
+
15
+ // Set a flex-direction
16
+ @include experimental(flex-direction, $direction, $flexy-support...);
17
+
18
+ // Align flex items
19
+ @include experimental(align-items, $align, $flexy-support...);
20
+
21
+ // Define the flex container alignment and distribution of space
22
+ @include experimental(justify-content, $justify, $flexy-support...);
23
+
24
+ // Target flex items and define a flex value
25
+ & > #{$el} {
26
+ @include experimental(flex, $flex, $flexy-support...);
27
+ }
28
+ }
29
+
30
+ @mixin flexy-grow($item, $amt) {
31
+ // Define the flex grow factor of a flex item
32
+ & > :nth-child(#{$item}) {
33
+ @include experimental(flex-grow, $amt, $flexy-support...);
34
+ }
35
+ }
36
+
37
+ @mixin flexy-order($order) {
38
+ // Set the layout of a flex item
39
+ @include experimental(order, $order, $flexy-support...);
40
+ }
@@ -0,0 +1,59 @@
1
+ // Import Flexy and you're ready to go!
2
+
3
+ @import "flexy-gem";
4
+
5
+ ///////////////////////////////
6
+ // Flexy Variables ///////////
7
+ /////////////////////////////
8
+
9
+ // Config variable for setting flexbox support
10
+ $flexy-support: not -moz, -webkit, not -o, not -ms, official;
11
+
12
+ //////////////////////////////
13
+ // Flexy Mixins /////////////
14
+ ////////////////////////////
15
+
16
+ // Establish flexbox layout with default all values
17
+ @include flexy;
18
+
19
+ // Optional Arguments
20
+ @include flexy($el, $direction, $align, $justify, $flex);
21
+
22
+ // $el - Defines the element or class to target as flex items
23
+ // $direction - Set the flex-direction
24
+ // $align - Align flex items
25
+ // $justify - Set the flex container alignment
26
+ // $flex - Set the flex value for flex items
27
+
28
+ // Variable Defaults
29
+
30
+ // $el: li
31
+ // $direction: row
32
+ // $align: stretch
33
+ // $justify: flex-start
34
+ // $flex: 0 1 auto
35
+
36
+ // Target a specific flex item and apply a flex-grow
37
+ @include flexy-grow($item, $amt);
38
+
39
+ // Change the order of flex items
40
+ @include flexy-order($order);
41
+
42
+ //////////////////////////////
43
+ // Examples /////////////////
44
+ ////////////////////////////
45
+
46
+ .main-nav {
47
+ @include flexy($align: center, $flex: 1);
48
+ @include flexy-grow(2, 3);
49
+ }
50
+ .content-row {
51
+ @include flexy(".col", $flex: 1);
52
+ @include flexy-grow(1, 2);
53
+ .secondary-content {
54
+ @include flexy-order(3);
55
+ }
56
+ .extra-content {
57
+ @include flexy-order(2);
58
+ }
59
+ }
@@ -0,0 +1,22 @@
1
+ # Description
2
+ description "A simple Flexbox Compass extension";
3
+
4
+ # Stylesheet Import
5
+ file '_flexy-demo.scss', :like => :stylesheet, :media => 'screen, projection'
6
+
7
+ # Javascript Import
8
+ # file 'scripts.js', :like => :javascript, :to => 'scripts.js'
9
+
10
+ # General File Import
11
+ # file 'README.md', :to => "README.md"
12
+
13
+ # Compass Extension Help
14
+ help %Q{
15
+ Open flexy-demo.scss for help and examples.
16
+ }
17
+
18
+ # Compass Extension Welcome Message
19
+ # Users will see this when they create a new project using this template.
20
+ welcome_message %Q{
21
+ You have successfully installed the Flexy demo! Open _flexy-demo.scss for examples.
22
+ }
metadata ADDED
@@ -0,0 +1,77 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: flexy-gem
3
+ version: !ruby/object:Gem::Version
4
+ version: '1.0'
5
+ platform: ruby
6
+ authors:
7
+ - Richard Huf
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2015-02-09 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: sass
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ! '>='
18
+ - !ruby/object:Gem::Version
19
+ version: 3.2.0
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ! '>='
25
+ - !ruby/object:Gem::Version
26
+ version: 3.2.0
27
+ - !ruby/object:Gem::Dependency
28
+ name: compass
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ! '>='
32
+ - !ruby/object:Gem::Version
33
+ version: 0.12.1
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ! '>='
39
+ - !ruby/object:Gem::Version
40
+ version: 0.12.1
41
+ description: A simple Flexbox Compass extension.
42
+ email:
43
+ - richardhuf84@gmail.com
44
+ executables: []
45
+ extensions: []
46
+ extra_rdoc_files: []
47
+ files:
48
+ - CHANGELOG.md
49
+ - README.md
50
+ - lib/flexy-gem.rb
51
+ - stylesheets/_flexy-gem.scss
52
+ - templates/project/_flexy-demo.scss
53
+ - templates/project/manifest.rb
54
+ homepage: https://github.com/richardhuf84/Flexy
55
+ licenses: []
56
+ metadata: {}
57
+ post_install_message:
58
+ rdoc_options: []
59
+ require_paths:
60
+ - lib
61
+ required_ruby_version: !ruby/object:Gem::Requirement
62
+ requirements:
63
+ - - ! '>='
64
+ - !ruby/object:Gem::Version
65
+ version: '0'
66
+ required_rubygems_version: !ruby/object:Gem::Requirement
67
+ requirements:
68
+ - - ! '>='
69
+ - !ruby/object:Gem::Version
70
+ version: 1.3.6
71
+ requirements: []
72
+ rubyforge_project: flexy-gem
73
+ rubygems_version: 2.2.2
74
+ signing_key:
75
+ specification_version: 4
76
+ summary: Using Flexbox has never been easier!
77
+ test_files: []