https://github.com/philmtd/css-fx-layout
A responsive SCSS flexbox library inspired by Angular Flex-Layout.
https://github.com/philmtd/css-fx-layout
css css-fx-layout flex-layout flexbox flexbox-layout flexbox-library fx-layout responsive scss
Last synced: about 1 month ago
JSON representation
A responsive SCSS flexbox library inspired by Angular Flex-Layout.
- Host: GitHub
- URL: https://github.com/philmtd/css-fx-layout
- Owner: philmtd
- License: mit
- Created: 2019-06-27T20:40:58.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-22T12:16:05.000Z (5 months ago)
- Last Synced: 2025-02-26T14:48:43.114Z (2 months ago)
- Topics: css, css-fx-layout, flex-layout, flexbox, flexbox-layout, flexbox-library, fx-layout, responsive, scss
- Language: SCSS
- Homepage: https://philmtd.github.io/css-fx-layout/
- Size: 2.52 MB
- Stars: 48
- Watchers: 5
- Forks: 11
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - css-fx-layout - A responsive SCSS flexbox library inspired by Angular <b><code> 5888⭐</code></b> <b><code> 767🍴</code></b> [Flex-Layout](https://github.com/angular/flex-layout)). (Table of contents / Third Party Components)
- awesome-angular - css-fx-layout - A responsive SCSS flexbox library inspired by Angular [Flex-Layout](https://github.com/angular/flex-layout). (Table of contents / Third Party Components)
README
# css-fx-layout 📚
[](https://www.npmjs.com/package/css-fx-layout)
This is a lightweight and modular 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.
**Info:** This library is actively maintained and is already feature-complete, functioning as intended. Future releases will focus primarily on providing bug fixes and addressing similar issues to ensure a smooth user experience.
## Features
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.
**Please refer to the documentation on [https://philmtd.github.io/css-fx-layout](https://philmtd.github.io/css-fx-layout) for a full list of all available selectors and features.**
### HTML data-attribute selectors
Using the data attributes is the easiest way to use this library and easier to migrate to from Angular Flex-Layout:
For example css-fx-layout provides attributes like the following, which can be configured through the values passed to them:
* `data-layout` and `data-layout-align`
* `data-layout-gap`
* `data-hide-...` and `data-show-...`
* `data-flex`
### CSS class selectors
Using the CSS classes is more verbose and the more "CSS-y" way of styling your HTML:
For example css-fx-layout provides classes with naming patterns like:
* `fx-layout-...` and `fx-align-...`
* `fx-gap-...`
* `show-...` and `hide-...`
* `fx-flex-...`
### Responsive API
The library provides a responsive API which allows to create different layouts for different screen sizes using known breakpoints
like `xs`, `sm`, `md`, `lg`, `xl` and including `lt-` and `gt-` variations of them. Please check out the [documentation](https://philmtd.github.io/css-fx-layout/docs/responsive)
for details on how to use it.
## Getting started
Add the library to your project's `package.json`:
```bash
npm i -s css-fx-layout
```
Then follow the [Getting Started](https://philmtd.github.io/css-fx-layout/docs/getting-started) guide in the documentation.
## Examples
These are just two simple examples how to use `css-fx-layout`. Visit [the examples page](https://philmtd.github.io/css-fx-layout/examples) for more and live-rendered
examples.
### Layout
#### Example 1
This is the simplest example. It will make the div a flex container and align the three spans in a row:
CSS Classes
Data Attributes
```html
One
Two
Three
```
```html
One
Two
Three
```
The resulting layout:
#### Example 2
An advanced example that aligns the items in reverse order with a gap of four pixels and vertically centered:
CSS Classes
Data Attributes
````html
One
Two
Three
````
````html
One
Two
Three
````
The resulting layout:
## What problem 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 and without JavaScript.
By now Angular Flex-Layout has been deprecated and this library can be a replacement for most of the popular parts.