flex-attributes - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

package.json

 {
   "name": "flex-attributes",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A css library that allows you to compose mobile first, adaptive flexbox layouts and grids with attributes.",
@@ -5,0 +5,0 @@ "main": "flex-attributes.css",

README.MD

 Flex Attributes
 =============
 
-This library allows you to compose layout with flexbox in html. Containers
-are composed by combining `flex-column`|`flex-row` with `flex-flow`.
+This library allows you to compose layout with flexbox in html, allowing for rapid prototyping, easy visulization of layout in HTML, and reduced CSS footprint and duplication.
 
-`flex-column` or `flex-row` sets the element to be a flex container and sets the direction, `flex-flow` defines how children align on the main, and secondary axis.
+Installation
+------------
+
 ```
-flex-column="reverse nowrap" flex-flow="space-between baseline"
+npm install flex-attributes
 ```
 
-`flex-row` and `flex-column` can be shorthanded and default to the flexbox defaults
+Add, import, or require `flex-attributes/dist/flex-attributes.css` into your project.
 
-```
-flex-row flex-flow="start baseline"
-```
+You can compile the source files with your own breakpoints in ./src/variables.styl with gulp build
 
-`flex-flow` can be shorthanded to just the main axis
-```
-flex-row flex-flow="space-between"
-```
 
-Installation
+Examples
 ------------
+Containers are composed by combining `flex`, `column` or `row`, and `layout`. 
 
-```
-npm install flex-attributes
-bower install flex-attributes
-```
+`layout` accepts 1 or 2 arguments, main axis (justify-content), then secondary axis (align-items).
 
-Add, import, or require `flex-attributes/dist/flex-attributes.css` into your project.
+ `flex row layout="space-between stretch"`
+
+Grids are composed by using `grid-lg-*` etc.
+
+Children are grown and shrunk with `grow="3"` or `shrink="4"`
+
+`column` and `row`, as well as `grid-*` can be declared with a breakpoints 
+
+`flex column row-md layout="space-between"` (will render a column on screens smaller than 970px)
+ 
+`grid-md-6` (will render a column with flex-basis of 50%, on devices larger than 970px)
+
+Breakpoints (Bootstrap)
+------------
+
+`xs` screens greater than 0px
+
+`sm` screens greater than 750px
+
+`md` screens greater than 970px
+
+`lg` screens greater than 1170px

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

46

increased by43.75%

Worsened metrics

Total package byte prevSize

32318

decreased by-37.73%

Number of package files

10

decreased by-16.67%

Lines of code

1158

decreased by-43.73%

No dependency changes