Skip to content

Commit

Permalink
readme update
Browse files Browse the repository at this point in the history
  • Loading branch information
ZeeCoder committed Mar 1, 2017
1 parent cf4a682 commit 310152c
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 3 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# CHANGELOG

## 1.2.1 (2017-03-01)

- README update

## 1.2.0 (2017-02-28)

- Made "or" queries work as they do for @media queries
Expand Down
33 changes: 31 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,32 @@
A PostCSS plugin and Javascript runtime combination, which allows you to write
@container queries in your CSS the same way you would write @media queries.

## screenshot

## How to use

### Install

`npm install --save-dev @zeecoder/container-query`

## PublicAPI
- `Container.js` - JS Runtime
- `containerQuery.js` - PostCSS Plugin
- `initialiseAllContainers.js` - helper function

The rest is not considered to be a part of the Public API, which means they can
change at any time. (Including minor / patch releases.)
The rest in build/ is not considered to be a part of the Public API, which means
anything in it can change at any time. (Including minor / patch releases.)

## Limitations
- No "or" for @container queries right now, so this is not possible:
`@container ( ... ) or ( ... ) { ... }`
- `@container` queries cannot be nested
- LESS doesn't compile with the current syntax

## Supported Browsers

- Works with all modern browsers

## Notes
- Lead with ## WHAT (image) followed by ## WHY
- list supported browsers
Expand All @@ -46,3 +58,20 @@ change at any time. (Including minor / patch releases.)

- To avoid circular deps, use overflow: hidden and avoid using container units on defined containers
- Use native CSS techniques to achieve your goal whenever possible (css grid, flexbox)


## Thoughts on design

Here is a list of goals I started with, in case you're wondering about the
tool's design:

- Should be thoroughly unit tested
- Use containers (as opposed to "element query"),
- Resemble @media queries so that it's familiar and easy to use,
- Uses PostCSS for preprocessing instead of a JS runtime parser,
- Modular, so it plays nicely with js bundlers and "Component-based" UI
libraries (Webpack / Browserify / React etc.)
- Doesn't need to be valid CSS syntax (since it's based on PostCSS)
- Be easy enough to use, but a transpiling step in the frontend build
process would be assumed
- Should work especially well with css component naming methodologies, like BEM or SUIT
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@zeecoder/container-query",
"version": "1.2.0",
"version": "1.2.1",
"description": "A PostCSS plugin and Javascript runtime combination, which allows you to write @container queries in your CSS the same way you would write @media queries.",
"main": "index.js",
"author": "Viktor Hubert <[email protected]>",
Expand Down

0 comments on commit 310152c

Please sign in to comment.