cssinjs / cssinjs/jss

[jss-expand] Add optional syntax for CSS grids templateAreas

Open
#737 5 comments 1 reaction 0 assignees View on GitHub
complexity:moderate feature request
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

CSS grid template areas' [ascii-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) is "special" and would probably benefit from being documented.

The best way I've come up with to get it working involves back-tick and single quotes.

```css
templateAreas: `
'head head head'
'left panel right'
'foot foot foot'`
```

An alternative that might be supported (and might lend itself to better dynamics) is using an array syntax:

```css
templateAreas: [
'head head head',
'left panel right',
'foot foot foot']
```

- [ ] document current syntax
- [ ] add a nicer syntax to jss-expand

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.