https://github.com/ryanve/flow.css

CSS all over again
https://github.com/ryanve/flow.css

css functional-css

Last synced: about 1 month ago
JSON representation

CSS all over again

• Host: GitHub
• URL: https://github.com/ryanve/flow.css
• Owner: ryanve
• License: 0bsd
• Created: 2017-08-07T02:20:15.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-05-22T05:09:42.000Z (over 4 years ago)
• Last Synced: 2024-10-06T00:19:55.692Z (about 1 month ago)
• Topics: css, functional-css
• Language: CSS
• Homepage: https://www.npmjs.com/package/flow.css
• Size: 11.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# flow.css

```

npm install flow.css

```

### `@import` all

```css

@import 'node_modules/flow.css/flow';

```

### `@import` incrementally

```css

@import 'node_modules/flow.css/display';

@import 'node_modules/flow.css/clear';

@import 'node_modules/flow.css/float';

```

## [Classes](flow.css)

[Order reflects cascade](flow.css)

### [`display`](display.css)

| Selector | Value | [Full display](https://drafts.csswg.org/css-display/#display-value-summary) | Fallback |

|:---------|:------|:-------------|:---------|

| `.inline-flow` | `inline` | `inline flow` ||

| `.inline-root` | `inline-block` | `inline flow-root` ||

| `.inline-flex` | `inline-flex` | `inline flex` | `inline-block` |

| `.inline-grid` | `inline-grid` | `inline flex` | `inline-block` |

| `.inline-table` | `inline-table` | `inline table` ||

| `.block-flow` | `block` | `block flow` ||

| `.block-root` | `flow-root` | `block flow-root` | `block` |

| `.block-flex` | `flex` | `block flex` | `block` |

| `.block-grid` | `grid` | `block grid` | `block` |

| `.block-table` | `table` | `block table` ||

| `.play-none` | `none` | `none` ||

| `.play-tent` | `contents` | `contents` ||

| `[hidden]` | `none` | `none` ||

### [`float`](float.css)

- `.float-none`

- `.float-left`

- `.float-right`

- `.float-start`

- `.float-end`

### [`clear`](clear.css)

- `.clear-none`

- `.clear-left`

- `.clear-right`

- `.clear-both`

- `.clear-start`

- `.clear-end`

- `.clear-after`