You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CODE_OF_CONDUCT.md
+11-39Lines changed: 11 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,12 +2,7 @@
2
2
3
3
## Our Pledge
4
4
5
-
In the interest of fostering an open and welcoming environment, we as
6
-
contributors and maintainers pledge to making participation in our project and
7
-
our community a harassment-free experience for everyone, regardless of age, body
8
-
size, disability, ethnicity, sex characteristics, gender identity and expression,
9
-
level of experience, education, socio-economic status, nationality, personal
10
-
appearance, race, religion, or sexual identity and orientation.
5
+
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
11
6
12
7
## Our Standards
13
8
@@ -22,55 +17,32 @@ include:
22
17
23
18
Examples of unacceptable behavior by participants include:
24
19
25
-
- The use of sexualized language or imagery and unwelcome sexual attention or
26
-
advances
20
+
- The use of sexualized language or imagery and unwelcome sexual attention or advances
27
21
- Trolling, insulting/derogatory comments, and personal or political attacks
28
22
- Public or private harassment
29
-
- Publishing others' private information, such as a physical or electronic
30
-
address, without explicit permission
31
-
- Other conduct which could reasonably be considered inappropriate in a
32
-
professional setting
23
+
- Publishing others' private information, such as a physical or electronic address, without explicit permission
24
+
- Other conduct which could reasonably be considered inappropriate in a professional setting
33
25
34
26
## Our Responsibilities
35
27
36
-
Project maintainers are responsible for clarifying the standards of acceptable
37
-
behavior and are expected to take appropriate and fair corrective action in
38
-
response to any instances of unacceptable behavior.
28
+
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
39
29
40
-
Project maintainers have the right and responsibility to remove, edit, or
41
-
reject comments, commits, code, wiki edits, issues, and other contributions
42
-
that are not aligned to this Code of Conduct, or to ban temporarily or
43
-
permanently any contributor for other behaviors that they deem inappropriate,
44
-
threatening, offensive, or harmful.
30
+
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
45
31
46
32
## Scope
47
33
48
-
This Code of Conduct applies both within project spaces and in public spaces
49
-
when an individual is representing the project or its community. Examples of
50
-
representing a project or community include using an official project e-mail
51
-
address, posting via an official social media account, or acting as an appointed
52
-
representative at an online or offline event. Representation of a project may be
53
-
further defined and clarified by project maintainers.
34
+
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
54
35
55
36
## Enforcement
56
37
57
-
Instances of abusive, harassing, or otherwise unacceptable behavior may be
complaints will be reviewed and investigated and will result in a response that
60
-
is deemed necessary and appropriate to the circumstances. The project team is
61
-
obligated to maintain confidentiality with regard to the reporter of an incident.
62
-
Further details of specific enforcement policies may be posted separately.
38
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [email protected]. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
63
39
64
-
Project maintainers who do not follow or enforce the Code of Conduct in good
65
-
faith may face temporary or permanent repercussions as determined by other
66
-
members of the project's leadership.
40
+
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
67
41
68
42
## Attribution
69
43
70
-
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71
-
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
44
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72
45
73
46
[homepage]: https://www.contributor-covenant.org
74
47
75
-
For answers to common questions about this code of conduct, see
76
-
https://www.contributor-covenant.org/faq
48
+
For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+8-28Lines changed: 8 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,47 +2,27 @@
2
2
3
3
I'm really happy that you're interested in helping out with this little project.
4
4
5
-
As this is very early days for the project there's not a lot in the way of
6
-
resources, but please check out the [documentation](./README.md), and also the
7
-
[list of issues](https://github.com/phantomstudios/PACKAGE-NAME/issues).
5
+
As this is very early days for the project there's not a lot in the way of resources, but please check out the [documentation](./README.md), and also the [list of issues](https://github.com/phantomstudios/css-components/issues).
8
6
9
7
Please submit an issue if you need help with anything.
10
8
11
-
We have a [code of conduct](./CODE_OF_CONDUCT.md) so please make sure you follow
12
-
it.
13
-
14
-
## Testing
15
-
16
-
Testing is performed using `jest` and is tested on Windows, Linux and MacOS with
17
-
Node 10 and 12 runtimes. For a PR to be considered all these environments need to
18
-
pass. Testing is automated using GitHub Actions CI.
9
+
We have a [code of conduct](./CODE_OF_CONDUCT.md) so please make sure you follow it.
19
10
20
11
## Submitting changes
21
12
22
13
Please send a
23
-
[GitHub Pull Request to PACKAGE-NAME](https://github.com/phantomstudios/PACKAGE-NAME/pull/new/master)
24
-
with a clear list of what you've done (read more about
25
-
[pull requests](https://help.github.com/en/articles/about-pull-requests)). When you send a pull
26
-
request, please make sure you've covered off all the points in the template.
14
+
[GitHub Pull Request to css-components](https://github.com/phantomstudios/css-components/pull/new/master) with a clear list of what you've done (read more about [pull requests](https://help.github.com/en/articles/about-pull-requests)). When you send a pull request, please make sure you've covered off all the points in the template.
27
15
28
-
Make sure you've read about our workflow (below); in essence make sure each Pull
29
-
Request is atomic but don't worry too much about the commits themselves as we use
30
-
squash-and-merge.
16
+
Make sure you've read about our workflow (below); in essence make sure each Pull Request is atomic but don't worry too much about the commits themselves as we use squash-and-merge.
31
17
32
18
## Our workflow
33
19
34
-
We use [GitHub flow](https://guides.github.com/introduction/flow/); it's a lot
35
-
like git-flow but simpler and more forgiving. We use the `squash and merge`
36
-
strategy to merge Pull Requests.
20
+
We use [GitHub flow](https://guides.github.com/introduction/flow/); it's a lot like git-flow but simpler and more forgiving. We use the `squash and merge` strategy to merge Pull Requests.
37
21
38
22
In effect this means:
39
23
40
-
- Don't worry about individual commits. They will be preserved, but not on the
41
-
main `master` branch history, so feel free to commit early and often, using
42
-
git as a save mechanism.
43
-
- Your Pull Request title and description become very important; they are the
44
-
history of the master branch and explain all the changes.
45
-
- You ought to be able to find any previous version easily using GitHub tabs, or
- Don't worry about individual commits. They will be preserved, but not on the main `master` branch history, so feel free to commit early and often, using git as a save mechanism.
25
+
- Your Pull Request title and description become very important; they are the history of the master branch and explain all the changes.
26
+
- You ought to be able to find any previous version easily using GitHub tabs, or [Releases](https://github.com/phantomstudios/css-components/releases)
A simple, lightweight, and customizable CSS components library that lets you wrap your css styles in a component-like structure. Inspired by css-in-js libraries like [styled-components](https://styled-components.com/) and [stitches](https://stitches.dev/).
8
8
9
9
## Introduction
10
10
11
-
Package introduction, couple of paragraphs.
11
+
At its core, css-components is a simple wrapper around standard CSS. It allows you to write your CSS how you wish then compose them into a component ready to be used in React.
12
12
13
-
```javascript
14
-
importuseLibraryfrom"@phntms/PACKAGE-NAME";
13
+
Here is a minimal example of a button component with an optional variant:
15
14
16
-
const { something } =useLibrary({
17
-
argument1:"something",
18
-
argument2:"something else",
15
+
```ts
16
+
import { styled } from"@phntms/css-components";
17
+
importcssfrom"./styles.module.css";
18
+
19
+
exportconst Button =styled("button", css.root, {
20
+
primary: {
21
+
true: css.primary,
22
+
},
19
23
});
20
24
```
21
25
26
+
This outputs a nice clean component that can be used in React:
27
+
28
+
```tsx
29
+
import { Button } from"./Button";
30
+
31
+
exportconst App = () => (
32
+
<div>
33
+
<Button>Default</Button>
34
+
<Buttonprimary>Primary</Button>
35
+
</div>
36
+
);
37
+
```
38
+
22
39
## Installation
23
40
24
41
Install this package with `npm`.
25
42
26
43
```bash
27
-
npm i @phntms/PACKAGE-NAME
44
+
npm i @phntms/css-components
28
45
```
29
46
30
47
## Usage
31
48
32
-
Example 1 description.
49
+
Here is a full example of a button component with an optional variant called `primary`:
The variants config object is a simple object that allows you to define the variants that your component supports. Each variant is a key in the object and the value is an object that defines the possible values(css classes) for that variant.
98
+
99
+
```tsx
100
+
const StyledButton =styled("button", css.root, {
101
+
big: {
102
+
// Boolean values are supported
103
+
true: css.big,
104
+
},
105
+
color: {
106
+
// String values are supported
107
+
primary: css.primary,
108
+
secondary: css.secondary,
109
+
},
110
+
size: {
111
+
// Number values are supported
112
+
1: css.size1,
113
+
2: css.size2,
114
+
},
115
+
});
72
116
```
73
117
74
-
## API
118
+
## Compound Variants
119
+
120
+
For more complex variant setups you can use the compound variants argument to define what styles should be applied when multiple variants are used.
121
+
122
+
```tsx
123
+
const StyledButton =styled(
124
+
"button",
125
+
css.root,
126
+
{
127
+
border: {
128
+
true: css.bordered,
129
+
},
130
+
color: {
131
+
primary: css.primary,
132
+
secondary: css.secondary,
133
+
},
134
+
},
135
+
[
136
+
{
137
+
border: true,
138
+
color: "primary",
139
+
css: css.blueBorder,
140
+
},
141
+
{
142
+
border: true,
143
+
color: "secondary",
144
+
css: css.greyBorder,
145
+
},
146
+
]
147
+
);
148
+
```
75
149
76
-
### Input
150
+
##Other
77
151
78
-
-`argument1` : Required - Description of argument.
79
-
-`argument2` : Optional - Description of argument.
152
+
Wherever you specify a css selector, you can also pass in an array of classes to help composing and reusing styles.
80
153
81
-
### Output
154
+
```tsx
155
+
import { styled } from"@phntms/css-components";
156
+
importsharedfrom"../sharedstyles.module.css";
157
+
importcssfrom"./styles.module.css";
82
158
83
-
-`something`: Description of output.
159
+
const Link =styled("a", [shared.link, shared.fontNormal, css.root], {
For _questions_ on how to use `PACKAGE-NAME` or what went wrong when you tried something, our primary resource is by opening a
4
-
[GitHub Issue](https://github.com/phantomstudios/PACKAGE-NAME/issues), where you can get help from developers.
3
+
For _questions_ on how to use `css-components` or what went wrong when you tried something, our primary resource is by opening a [GitHub Issue](https://github.com/phantomstudios/css-components/issues), where you can get help from developers.
0 commit comments