https://github.com/threepointone/es-grid-kiss

es6 tagged literals + css grids
https://github.com/threepointone/es-grid-kiss

Last synced: about 2 months ago
JSON representation

es6 tagged literals + css grids

• Host: GitHub
• URL: https://github.com/threepointone/es-grid-kiss
• Owner: threepointone
• Created: 2016-11-20T17:48:53.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-11-25T09:27:29.000Z (about 8 years ago)
• Last Synced: 2024-10-14T16:48:57.753Z (2 months ago)
• Language: JavaScript
• Size: 82 KB
• Stars: 37
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
es-grid-kiss

---

[postcss-grid-kiss](https://github.com/sylvainpolletvillard/postcss-grid-kiss), but in your js 

```jsx

import { grid } from 'es-grid-kiss'

const App = () => grid`

        "+------------------------------------+      "

        "|           ${} ↑           | 120px"

        "+------------------------------------+      "

        "                                            "

        "+-- 30% --------+  +--- auto --------+      "

        "| ${} |  |   ${}    | auto "

        "+---------------+  +-----------------+      "

        "                                            "

        "+------------------------------------+      "

        "|              ↓                     | 60px "

        "|         → ${} ←           |      "

        "+------------------------------------+      "

`

```

usage

---

add `'es-grid-kiss/lib/babel'` to the `plugins` field of your babel config

nb:

---

css grids are behind flags on major browsers, and the [polyfill](https://github.com/FremyCompany/css-grid-polyfill/) gives mixed results. ymmv.

todo 

---

- css only fallback

- non-babel version, if there's any demand