flexlay - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

package.json

 {
   "name": "flexlay",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "CSS library for easy use of CSS flexbox, based on Angular Material Layout",
@@ -16,3 +16,4 @@ "main": "null",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
@@ -35,4 +36,9 @@ "keywords": [
   "devDependencies": {
+    "del": "^2.2.2",
+    "gulp": "github:gulpjs/gulp#4.0",
+    "gulp-clean-css": "^2.3.2",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.0.0",
     "node-sass": "^3.8.0"
   }
 }

README.md

 # Flexlay
 
-Flexlay is a CSS-only library aiming to build on the concepts initially defined on Angular Material 1 on how to model
-a layout using CSS flexbox, being both capable of standalone use apart from Angular, or as a CSS core foundation for
-a Angular 2 Module.
+Flexlay is a CSS-only library to simplify common use cases regarding CSS Flexbox properties. Heavily inspired by [Angular Material 1 Layout System](https://material.angularjs.org/latest/layout/introduction), flexlay allows you to setup flexbox layouts through simple attributes in your HTML.
 
-This project is still a proof of concept and has just started development. If you're horribly missing Material Layout
-on Angular2, want a CSS-flexbox library more comprehensive than flexboxgrid, just wants to contribute to open source
-but are scared of huge projects with so many files, I am really open for you to help out on this project. Help me
-make the best out of this idea.
-
 ## Usage
 
-After doing an `npm install flexlay`, you can do `<link rel="stylesheet" href="./node_modules/flexlay/dist/flexlay.css"`
-in your HTML.
+* NPM: `npm install flexlay --save`
+* CDN: `https://unpkg.com/flexlay@latest/dist/flexlay.min.css`
 
-## Project Status
+## Layout Model
 
-The initial workload of copying/translating/improving the layout system sources fron Angular Material 1 has been
-done, at least to a rough 85%. The `npm` deployment has been recently set up and released version `0.2.1`. It's then
-publicly available to all brave users who would like to go on a wonderful flexbox journey. Check the roadmap to see
-what's going on. Changes are stable enough to be used in one of my projects and feature completion will be based on
-personal requirements and community initiative.
+The easiest way to use this library is to think in the layout model it provides (powered by flex of course), based on 3 core concepts:
+ * Define row or column layouts (provided by `fl-layout`)
+ * Define layout alignment of its childs (provided by `fl-layout-align`)
+ * Define flex behaviour of the childs (provided by `fl-flex`)
+ 
+*Thorough documentation will be available in the short future. Use the Material system as a temporary reference.*
+ 
+## Responsive support
 
-## Documentation
-*Nice, you've charmed me with your sweet words, but how the hell do I use this?*
+All attribute selectors have responsive support, initially following [Material Design Breakpoints](https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints):
+* Add a `-<breakpoint name>` suffix to rules you only want targeting a specific screen size
+* Add a `-gt-<breakpoint name>` suffix to rules you want targeting screen sizes greater than a specific breakpoint.
 
-I'm sorry, documentation is lower in the roadmap. However, be safe that there a really great kind of mirror
-documentation that works perfect: [The Angular Material 1 Layout System](https://material.angularjs.org/1.0.5/layout/introduction).
-I religiously follow all rules there, with the usage being the same, except for a couple of caveats simple to follow:
+Most work is laid out to support custom breakpoints but is yet to be finished. It needs enough support requests to be actually implemented.
 
-1. All attributes possess a `fl-` prefix to avoid naming collisions. For example, instead of using `flex-sm="33"`, you
-must use `fl-flex-sm="33"`.
-2. When using `layout-align` you must set both axis e.g. `layout-align="end stretch"`. Using only one will have
-unexpected results.`
+## Developer Notes
 
-## What is implemented
-* Parent properties: `layout`, `layout-align`, `layout-wrap`, `layout-fill`
-* Child properties: `flex`, `flex-order`, `flex-offset`
-* All implemented accepting breakpoint modifiers
+**Contributors are welcome!** I started out this library out of need to use the Material Layout outside Angular 1, and I ended up using it in all my projects now. I want you to find the value it provides as I do, and contribute to make it better.
 
-## What is missing (IRRC)
-* Parent properties: `layout-padding`, `layout-margin`
-* Show/Hide properties: `show`, `hide`
+The project is sourced in SCSS and commented enough to understand how it works. Open a PR or Issue to help or ask how things work.
 
-## Roadmap
+## Developer Roadmap
 
-This is the original sketch (and its status) of the steps planned at the startup of the project.
-
-- [X] Setup a node-sass buildchain (I'll use NPM because reasons)
-- [X] Initial styles based on Angular Material
-- [X] Setup NPM deployment
-- [ ] Setup tests (what kind? Im not CSS Test Expert. At most, I know linting)
-- [ ] Setup documentation (readme.md style? gh-pages style? what can make this easier?)
-- [ ] Define serious conceptual documents for things missing, mental models that needs refinement, etc. Part of docs.
-- [ ] Whatever the community ends up really asking of this
+* Create documentation website
+* Expose bower and more CDN's
+* Expose rules also as SCSS mixins
+* Expose entire project as a configurable SCSS mixin

No alert changes

Improved metrics

Total package byte prevSize

221623

increased by35.81%

Number of package files

13

increased by333.33%

Worsened metrics

Dev dependency count

6

increased by500%

Lines of code

4621

decreased by-21.38%

Number of lines in readme file

39

decreased by-31.58%

No dependency changes