flex_classes 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5b724fbaa7891b62439196479a3b6a90d83dc0fd
-  data.tar.gz: 0cc5738a991339cc56e24025354aa04af79daca8
+  metadata.gz: 938abf59d57c97f4e7465f4359d509d79a3db629
+  data.tar.gz: '096335e1288a37abf283007879b5a3e3b823439e'
 SHA512:
-  metadata.gz: e2d9ebc3ef0ce5e916f5440046c7e85df03038a1f5710f427c02f17bc28f890f3cda95affa8dde5214ce0f0f98af7442efd6d29dd0a1e7cddf39522c1285a351
-  data.tar.gz: 29a3632436f789c1c6d335665faca207a80f61715c35f27aa8e6335d2812ff128166a8908f616ad5842e134ffecf41d7fb71a363876975eea3a8ce6aa96bc26d
+  metadata.gz: 902e5655eaf10318708b7108b9882e39979a988f70c098a40bce260d92830c22918e787fcc26dee979d5e365a9e4af12590d0efdcff5ab7aaad2d736d85f3eef
+  data.tar.gz: 2912f19c250fa017c8f9ed296b0468beb76d8bc1c1af9fabdc34c41905d10011755ef2bfc0d0555f571dfeeef6555e908086c80b07d02096acd5af3a4f7f3ea7

data/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.0] - 2018-06-06
+### added
+- variables for setting values in app stylesheet
+- readme
+- changelog
+
+
+## [0.1.1] - 2018-06-05
+### added
+- bug-fix in initialization in rails app tree
+
+
+## [0.1.0] - 2018-06-04
+### added
+- base code and features

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    flex_classes (0.1.0)
+    flex_classes (0.1.1)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -1,8 +1,6 @@
 # FlexClasses
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/flex_classes`. To experiment with that code, run `bin/console` for an interactive prompt.
-
-TODO: Delete this and the text above, and describe your gem
+This gem provides set of CSS classes which adds related CSS properties to dom element
 
 ## Installation
 
@@ -20,16 +18,97 @@ Or install it yourself as:
 
     $ gem install flex_classes
 
+After it import 'flex_classes' into your sass stylesheet
+
+```sass
+@import 'flex_classes'
+```
+
 ## Usage
 
-TODO: Write usage instructions here
+### align child nodes at middle
+```html
+<div class="flex row middle">
+```
+
+```haml
+.flex.row.middle
+```
+
+### add vertical margins, allow wrap, align child nodes at center middle with margins
+```haml
+.flex.row.center.middle.m-v.childs-m.can-wrap
+```
+
+
+## List all classes
+
+### base
+class | description
+---   | ---
+flex  | display: flex; and allow to use all other classes
+row   | flex-direction: row
+col   | flex-direction: column
+
+
+### align
+These classes works only with "row" or "col" class.
+Distribute content of flex col/row at middle/center/bottom/top of container frame.
+
+class | description
+--- | ---
+center   | same as "text-align: center": "justify-content: center" for rows and "align-items: center" for cols
+middle   | same as "vertical-align: middle": "align-items: center" for rows and "justify-content: center" for cols
+top      | "align-items: flex-start" for rows and "justify-content: flex-start" for cols
+bottom   | "align-items: flex-end" for rows and "justify-content: flex-end" for cols
+stretch  | full width for flex-col and full height for flex-row
+
+
+### margins
+class | description
+--- | ---
+m         | all sides
+m-v       | vertical
+m-h       | horizontal
+m-top     | only top
+m-bottom  | only bottom
+
+
+### margins for child nodes
+class | description
+--- | ---
+childs-m    | all sides
+childs-m-h  | horizontal for children 
+childs-m-v  | vertical for children 
+
+
+### paddings
+class | description
+--- | ---
+p         | all sides
+p-v       | vertical
+p-h       | horizontal
+p-top     | only top
+p-bottom  | only bottom
+
+
+### other
+class | description
+--- | ---
+can-wrap      | flex-wrap: wrap
+space-between | justify-content: space-between
+eq-childs     | element > * { flex: 1 1; }
+
 
-## Development
+## Customizing values of margin and padding
+You can set next variables in your app stylesheet before @import 'flex_classes':
 
-After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
++ $flex-classes-margin-vertical: 6px
++ $flex-classes-margin-horizontal: 10px
++ $flex-classes-padding-vertical: 6px
++ $flex-classes-padding-vertical: 10px
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/flex_classes.
+Bug reports and pull requests are welcome on GitHub at https://github.com/smolovsky/flex_classes

data/app/assets/stylesheets/flex_classes.sass

@@ -1,17 +1,26 @@
 // MIT License
 // Copyright (c) 2018 Kiryl Smalouski
 
+
+// allow set values in app. 
+// require @import instead require in app-stylesheet
+$flex-classes-margin-vertical: 6px !default
+$flex-classes-margin-horizontal: 10px !default
+
+$flex-classes-padding-vertical: 6px !default
+$flex-classes-padding-vertical: 10px !default
+
 .flex
   display: flex
   box-sizing: border-box
 
-  $def-m-h: 10px
-  $def-m-v: 6px
-  $def-m: $def-m-v $def-m-h
+  $fc-m-h: 10px
+  $fc-m-v: 6px
+  $fc-m: $fc-m-v $fc-m-h
 
-  $def-p-h: 10px
-  $def-p-v: 6px
-  $def-p: $def-p-v $def-p-h
+  $fc-p-h: 10px
+  $fc-p-v: 6px
+  $fc-p: $fc-p-v $fc-p-h
 
 
   &.row
@@ -23,20 +32,15 @@
     &.middle
       align-items: center
 
-    &.bottom
-      align-items: flex-end
-
     &.top
       align-items: flex-start
 
+    &.bottom
+      align-items: flex-end
+
     &.stretch
       align-items: stretch
 
-    &.childs-m
-      & > *
-        margin: $def-m
-
-
   &.col
     flex-direction: column
 
@@ -46,19 +50,15 @@
     &.middle
       justify-content: center
 
-    &.bottom
-      justify-content: flex-end
-
     &.top
       justify-content: flex-start
 
+    &.bottom
+      justify-content: flex-end
+
     &.stretch
       align-items: stretch
 
-    &.childs-m
-      & > *
-        margin: $def-m
-
 
   &.space-between
     justify-content: space-between
@@ -75,53 +75,57 @@
   //         margins
   // ------------------------
   &.m
-    margin: $def-m
+    margin: $fc-m
 
   &.m-v
-    margin-top: $def-m-v
-    margin-bottom: $def-m-v
+    margin-top: $fc-m-v
+    margin-bottom: $fc-m-v
 
   &.m-h
-    margin-left: $def-m-h
-    margin-right: $def-m-h
+    margin-left: $fc-m-h
+    margin-right: $fc-m-h
 
 
   &.m-top
-    margin-top: $def-m-v
+    margin-top: $fc-m-v
 
   &.m-bottom
-    margin-bottom: $def-m-v
+    margin-bottom: $fc-m-v
+
+  &.childs-m
+    & > *
+      margin: $fc-m
 
   &.childs-m-h
     & > *
-      margin-left: $def-m-h
-      margin-right: $def-m-h
+      margin-left: $fc-m-h
+      margin-right: $fc-m-h
 
   &.childs-m-v
     & > *
-      margin-top: $def-m-v
-      margin-bottom: $def-m-v
+      margin-top: $fc-m-v
+      margin-bottom: $fc-m-v
 
 
   // ------------------------
   //         paddings
   // ------------------------
   &.p
-    padding: $def-p
+    padding: $fc-p
 
   &.p-top
-    padding-top: $def-p-v
+    padding-top: $fc-p-v
 
   &.p-bottom
-    padding-bottom: $def-p-v
+    padding-bottom: $fc-p-v
 
   &.p-v
-    padding-top: $def-p-v
-    padding-bottom: $def-p-v
+    padding-top: $fc-p-v
+    padding-bottom: $fc-p-v
 
   &.p-h
-    padding-left: $def-p-h
-    padding-right: $def-p-h
+    padding-left: $fc-p-h
+    padding-right: $fc-p-h
 
 
 

data/lib/flex_classes/version.rb

@@ -1,3 +1,3 @@
 module FlexClasses
-  VERSION = "0.1.1"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: flex_classes
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Kiryl Smalouski
@@ -46,6 +46,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".gitignore"
+- CHANGELOG.md
 - Gemfile
 - Gemfile.lock
 - LICENSE