🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
css-fx-layout
Advanced tools
css-fx-layout - npm Package Compare versions
Comparing version 1.1.1 to 2.0.0
@@ -0,9 +1,17 @@ | ||
| ## 2.0.0 (2022-12-27) | ||
| ### Breaking Changes and New Features | ||
| The library now only exposes mixins which can be used to generate the desired CSS selectors. | ||
| There also won't be pre-compiled CSS files available with the releases anymore. | ||
| The available selectors don't change. You only have to include the library differently. Please | ||
| consult the [README](./README.md) or the [Wiki](https://github.com/philmtd/css-fx-layout/wiki) for detailed instructions on how to get you | ||
| started with css-fx-layout. | ||
| ## 1.1.1 (2022-12-26) | ||
| * fix release process | ||
| ## 1.1.0 (2022-12-26) | ||
| * use the css gap property for layout-gap | ||
| * add fx-flex and fx-flex-grow | ||
| * add fx-flex and fx-flex-grow | ||
@@ -10,0 +18,0 @@ ## 1.0.1 (2019-08-31) |
| { | ||
| "name": "css-fx-layout", | ||
| "version": "1.1.1", | ||
| "description": "A lightweight SCSS only flexbox library inspired by Angular's flex-layout.", | ||
| "version": "2.0.0", | ||
| "description": "A lightweight SCSS flexbox library inspired by Angular Flex-Layout.", | ||
| "repository": "https://github.com/philmtd/css-fx-layout", | ||
| "scripts": { | ||
| "build": "node build.js" | ||
| "test": "node test.js" | ||
| }, | ||
| "author": "Philip Dakowitz", | ||
| "license": "MIT", | ||
| "style": "src/fxlayout.scss", | ||
| "main": "src/fxlayout.scss", | ||
| "exports": { | ||
| ".": { | ||
| "sass": "./_index.scss" | ||
| } | ||
| }, | ||
| "devDependencies": { | ||
@@ -14,0 +17,0 @@ "sass": "^1.57.1" |
219
README.md
@@ -6,3 +6,3 @@ # css-fx-layout | ||
| This is a lightweight SCSS/CSS only flexbox library. It is inspired by Angular's [flex-layout](https://github.com/angular/flex-layout) and can replace the | ||
| This is a lightweight SCSS flexbox library. It is inspired by Angular's [Flex-Layout](https://github.com/angular/flex-layout) and can replace the | ||
| most popular functions of the (by now deprecated) Angular library. | ||
@@ -12,29 +12,83 @@ | ||
| This library gives you the option between using data-attributes or CSS classes. Both options give you the same features but the CSS classes can be more verbose when you want a more complex layout. | ||
| This library gives you the option between using CSS classes or data-attributes. Both options give you the same features but the CSS classes can be more verbose when you want a more complex layout. | ||
| Check out the [Wiki](https://github.com/philmtd/css-fx-layout/wiki) for a detailed documentation. | ||
| ### CSS classes | ||
| Using the CSS classes is more verbose but the recommended way to use this library: | ||
| * `.fx-layout-` and `.fx-align-`: CSS classes to control the flexbox container | ||
| * `.fx-gap--`: CSS classes to add gaps between the elements in a flex container | ||
| * `.show-` and `.hide-`: CSS classes which can be used to show/hide elements depending on the screen size | ||
| * `.fx-flex` and `.fx-glex-grow`: Classes to control flex behaviour of an element | ||
| ### HTML data-attributes | ||
| Using the data attributes is the easiest way to use this library: | ||
| Using the data attributes is the easiest way to use this library and easier to migrate to from Angular Flex-Layout: | ||
| * `data-layout`, `data-layout-align` HTML attributes to be used to control the flexbox container | ||
| * `data-layout-gap` attribute to add margin between the elements in a flex container | ||
| * `data-hide-` and `data-show-` attributes which can be used to show/hide elements depending on the screen size | ||
| * `data-fx-flex` and `data-fx-flex-grow` | ||
| * `data-layout` and `data-layout-align`: HTML attributes to be used to control the flexbox container | ||
| * `data-layout-gap`: attribute to add gaps between the elements in a flex container | ||
| * `data-hide-` and `data-show-`: attributes which can be used to show/hide elements depending on the screen size | ||
| * `data-fx-flex` and `data-fx-flex-grow`: Control flex behaviour of an element | ||
| ### CSS classes | ||
| ## Getting started | ||
| Using the CSS classes is more verbose but there are reasons why one might prefer this: | ||
| Add the library to your project's `package.json`: | ||
| * `.fx-layout-` and `.fx-align-` CSS classes to control the flexbox container | ||
| * `.fx-gap--` CSS classes to add margin between the elements in a flex container | ||
| * `.show-` and `.hide-` CSS classes which can be used to show/hide elements depending on the screen size | ||
| * `.fx-flex` and `.fx-glex-grow` | ||
| ```bash | ||
| npm i -s css-fx-layout | ||
| ``` | ||
| Then use the provided mixins in your main stylesheet to include the css-fx-layout selectors. You can choose between using CSS classes | ||
| or HTML data attributes (or, while not recommended, use both). If you want to use the layout-gap functionality you can customise which selectors | ||
| are going to be generated by providing the start, end and unit as shown in the example below. | ||
| <table> | ||
| <tr> | ||
| <th>CSS Classes</th> | ||
| <th>HTML Data Attributes</th> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| ````scss | ||
| @use "css-fx-layout" as fx; | ||
| // If you choose to use CSS class selectors: | ||
| @include fx.class-selectors; | ||
| @include fx.gap-class-selectors(1, 16, px em); | ||
| ```` | ||
| </td> | ||
| <td> | ||
| ````scss | ||
| @use "css-fx-layout" as fx; | ||
| // If you choose to use attribute selectors: | ||
| @include fx.attribute-selectors; | ||
| @include fx.gap-attribute-selectors(1, 16, px em); | ||
| ```` | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| ## Examples | ||
| ### Layout | ||
| This is the most simple example. It will make the div a flex container and align the three spans in a row: | ||
| ````html | ||
| <div data-layout="row"> | ||
| #### Example 1 | ||
| This is the simplest example. It will make the div a flex container and align the three spans in a row: | ||
| <table> | ||
| <tr> | ||
| <th>CSS Classes</th> | ||
| <th>Data Attributes</th> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| ```html | ||
| <div class="fx-layout-row"> | ||
| <span>One</span> | ||
@@ -44,7 +98,9 @@ <span>Two</span> | ||
| </div> | ||
| ```` | ||
| ``` | ||
| Here's the same example using the CSS classes: | ||
| ````html | ||
| <div class="fx-layout-row"> | ||
| </td> | ||
| <td> | ||
| ```html | ||
| <div data-layout="row"> | ||
| <span>One</span> | ||
@@ -54,7 +110,30 @@ <span>Two</span> | ||
| </div> | ||
| ```` | ||
| ``` | ||
| An advanced example that aligns the items in reverse order with a margin of four pixels and vertically centered: | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| The resulting layout: | ||
| <img src="./docs/example-1.png" alt="Example 1" width="280px" /> | ||
| #### Example 2 | ||
| An advanced example that aligns the items in reverse order with a gap of four pixels and vertically centered: | ||
| <table> | ||
| <tr> | ||
| <th>CSS Classes</th> | ||
| <th>Data Attributes</th> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| ````html | ||
| <div data-layout="row reverse" data-layout-align="start center" data-layout-gap="4px"> | ||
| <div class="fx-layout-row | ||
| fx-layout-reverse | ||
| fx-align--start-x | ||
| fx-align--x-center | ||
| fx-gap--4px"> | ||
| <span>One</span> | ||
@@ -66,5 +145,9 @@ <span>Two</span> | ||
| The same example using CSS classes: | ||
| </td> | ||
| <td> | ||
| ````html | ||
| <div class="fx-layout-row fx-layout-reverse fx-align--start-x fx-align--x-center fx-gap--4px"> | ||
| <div data-layout="row reverse" | ||
| data-layout-align="start center" | ||
| data-layout-gap="4px"> | ||
| <span>One</span> | ||
@@ -76,9 +159,64 @@ <span>Two</span> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| The resulting layout: | ||
| <img src="./docs/example-2.png" alt="Example 2" width="280px" /> | ||
| #### Example 3 | ||
| Vertically and horizontally center an element in its parent. | ||
| <table> | ||
| <tr> | ||
| <th>CSS Classes</th> | ||
| <th>Data Attributes</th> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| ```html | ||
| <div class="fx-layout-row | ||
| fx-align--center-x | ||
| fx-align--x-center"> | ||
| <span>One</span> | ||
| </div> | ||
| ``` | ||
| </td> | ||
| <td> | ||
| ```html | ||
| <div data-layout="row" | ||
| data-layout-align="center center"> | ||
| <span>One</span> | ||
| </div> | ||
| ``` | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| The resulting layout: | ||
| <img src="./docs/example-3.png" alt="Example 3" width="280px" /> | ||
| ### Show/Hide | ||
| #### Example 4 | ||
| This will hide the first span on phones and show the second span only on desktop sizes. The third span is always visible. | ||
| <table> | ||
| <tr> | ||
| <th>CSS Classes</th> | ||
| <th>Data Attributes</th> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| ```html | ||
| <div> | ||
| <span data-hide-phone>One</span> | ||
| <span data-show-desktop>Two</span> | ||
| <span class="hide-phone">One</span> | ||
| <span class="show-desktop">Two</span> | ||
| <span>Three</span> | ||
@@ -88,7 +226,9 @@ </div> | ||
| The same example using CSS classes: | ||
| </td> | ||
| <td> | ||
| ```html | ||
| <div> | ||
| <span class="hide-phone">One</span> | ||
| <span class="show-desktop">Two</span> | ||
| <span data-hide-phone>One</span> | ||
| <span data-show-desktop>Two</span> | ||
| <span>Three</span> | ||
@@ -98,13 +238,16 @@ </div> | ||
| ## Installation | ||
| ### npm package (SCSS) | ||
| `npm i -s css-fx-layout` | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| ### Compiled CSS | ||
| Download the minified CSS from the [releases page](https://github.com/philmtd/css-fx-layout/releases/). | ||
| There are no pre-compiled CSS files available for css-fx-layout 2 and above. | ||
| Version 1 releases provided minified pre-compiled CSS files. If you are interested in them you can find and download them from | ||
| the [releases page](https://github.com/philmtd/css-fx-layout/releases/). | ||
| ## Why? | ||
| ## What issue does this library solve? | ||
| Initially I created this library because I liked the convenient syntax of Angular flex-layout and wanted to use it in non-Angular projects. | ||
| By now Angular flex-layout has been deprecated and this library can be a replacement for most of the popular parts. | ||
| Initially I created this library because I liked the convenient syntax of Angular Flex-Layout and wanted to use it in non-Angular | ||
| projects and without JavaScript. | ||
| By now Angular Flex-Layout has been deprecated and this library can be a replacement for most of the popular parts. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Fixed alerts
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
19474
53.21%- Number of package files
16
45.45%- Lines of code
18
Infinity%- Number of lines in readme file
246
138.83%- Number of medium supply chain risk alerts
0
-100%Worsened metrics
- Number of low supply chain risk alerts
2
100%No dependency changes