Skip to content

Commit 6a8455e

Browse files
jfmdevjfmdev
committed
Add utilities for text colors, background colors, borders and opacity
1 parent 91956e5 commit 6a8455e

23 files changed

+325
-80
lines changed

‎README.md‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,34 @@ A CSS library that provides utility CSS classes which complement [PureCSS](https
44

55
## Installation
66

7-
TODO
7+
TODO (first publish on NPM and jsdelivr)
8+
89

910
## Utilities
1011

1112
### Text colors
1213

13-
TODO
14+
You can change the colors of texts using classes `.pure-txt-black` / `.pure-txt-blue` / `.pure-txt-cyan` / `.pure-txt-green` / `.pure-txt-magenta` / `.pure-txt-red` / `.pure-txt-white` / `.pure-txt-yellow`.
1415

15-
### Backgrounds
16+
Additionally, you can modify the opacity of the colors the `pure-txt-alpha-*` class, where `*` can be replaced with numbers 10, 20, 25, 30, 40, 50, 60, 70, 75, 80 or 90.
1617

17-
TODO
18+
### Background colors
19+
20+
You can change the colors of backgrounds using classes `.pure-bg-black` / `.pure-bg-blue` / `.pure-bg-cyan` / `.pure-bg-green` / `.pure-bg-magenta` / `.pure-bg-red` / `.pure-bg-white` / `.pure-bg-yellow`.
21+
22+
Additionally, you can modify the opacity of the colors the `pure-bg-alpha-*` class, where `*` can be replaced with numbers 10, 20, 25, 30, 40, 50, 60, 70, 75, 80 or 90.
23+
24+
### Borders
25+
26+
You can define borders using the class `.pure-bd-*`, where `*` can be any number between 1 and 5, defining the width (in pixels) of the border. By default the border will be solid and black.
27+
28+
To change the style of a border you can use classes `.pure-bd-solid` / `.pure-bd-dotted` / `.pure-bd-dashed`.
29+
30+
To change the color of a border you can use classes `.pure-bd-black` / `.pure-bd-blue` / `.pure-bd-cyan` / `.pure-bd-green` / `.pure-bd-magenta` / `.pure-bd-red` / `.pure-bd-white` / `.pure-bd-yellow`.
31+
32+
Additionally, you can modify the opacity of the border colors using the `pure-bg-alpha-*` class, where `*` can be replaced with numbers 10, 20, 25, 30, 40, 50, 60, 70, 75, 80 or 90.
33+
34+
To set the radius of the border you can use classes `.pure-bd-radius-*` (where `*` can be any number between 1 and 5) / `.pure-bd-radius-circle` / `.pure-bd-radius-pill`.
1835

1936
### Buttons
2037

@@ -24,21 +41,33 @@ TODO
2441

2542
TODO
2643

44+
### Opacity
45+
46+
The opacity of elements can be modified using the `.pure-opacity-*` class, where `*` can be replaced with numbers 10, 20, 25, 30, 40, 50, 60, 70, 75, 80 or 90.
47+
2748
### Spacing
2849

2950
The library provides `pure-m-*` and `pure-p-*` classes for controlling an element's margin or padding, where `*` can be replaced with any number between `1` and `8`.
3051

3152
To set the margin or padding to a single side, you can use classes `pure-mb-*` / `pure-ml-*` / `pure-mr-*` / `pure-mt-*` and `pure-pb-*` / `pure-pl-*` / `pure-pr-*` / `pure-pt-*`; and to set the margin or padding to the horizontal or vertical sides, you can use classes `pure-mx-*` / `pure-my-*` and `pure-px-*` / `pure-py-*`.
3253

33-
The base spacing used is `0.25rem`, but you can change this value either by overriding the value of the `--pureSpacingUnit` variable or by using the `pure-space-2x` / `pure-space-3x` / `pure-space-4x` / `pure-space-5x` classes.
34-
3554
### Sizing
3655

3756
TODO
3857

58+
3959
## Customization
4060

41-
TODO (Variables)
61+
### Colors
62+
63+
The library uses variables `--pureBlack` / `--pureBlue` / `--pureCyan` / `--pureGreen` / `--pureMagenta` / `--pureRed` / `--pureWhite` / `--pureYellow` to define colors that later are used to define utility classes for texts, background, borders and buttons.
64+
65+
You can override these variables to change the colors used, but on that case you must also override the corresponding RBG variables: `--pureBlackRgb` / `--pureBlueRgb` / `--pureCyanRgb` / `--pureGreenRgb` / `--pureMagentaRgb` / `--pureRedRgb` / `--pureWhiteRgb` / `--pureYellowRgb`.
66+
67+
### Spacing
68+
69+
The base spacing used is `0.25rem`, but you can change this value by overriding the value of the `--pureSpacingUnit` variable.
70+
4271

4372
## Development
4473

@@ -47,6 +76,7 @@ The library was implemented using [Sass](https://sass-lang.com/), you can use th
4776
* `npm run build`
4877
* `npm run dev`
4978

79+
5080
## License
5181

5282
PureCSS Utilities is free software; you can redistribute it and/or modify it under the terms of the Mozilla Public License v2.0. You should have received a copy of the MPL 2.0 along with this software, otherwise you can obtain one at http://mozilla.org/MPL/2.0/.

‎demo.html‎

Lines changed: 150 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,100 +9,215 @@
99
</head>
1010

1111
<body class="pure-p-4">
12-
<h1>PureCSS Utilities Examples</h1>
12+
<h1>PureCSS Utilities examples</h1>
13+
14+
<h2>Text colors</h2>
15+
16+
<div class="pure-txt-black">pure-txt-black</div>
17+
<div class="pure-txt-blue">pure-txt-blue</div>
18+
<div class="pure-txt-cyan">pure-txt-cyan</div>
19+
<div class="pure-txt-green">pure-txt-green</div>
20+
<div class="pure-txt-magenta">pure-txt-magenta</div>
21+
<div class="pure-txt-red">pure-txt-red</div>
22+
<div class="pure-txt-white pure-bg-black">pure-txt-white</div>
23+
<div class="pure-txt-yellow">pure-txt-yellow</div>
24+
25+
<br>
26+
27+
<div class="pure-txt-black pure-txt-alpha-10">pure-txt-black pure-txt-alpha-10</div>
28+
<div class="pure-txt-black pure-txt-alpha-25">pure-txt-black pure-txt-alpha-25</div>
29+
<div class="pure-txt-black pure-txt-alpha-50">pure-txt-black pure-txt-alpha-50</div>
30+
<div class="pure-txt-black pure-txt-alpha-75">pure-txt-black pure-txt-alpha-75</div>
31+
<div class="pure-txt-black pure-txt-alpha-90">pure-txt-black pure-txt-alpha-90</div>
32+
33+
<h2>Background colors</h2>
34+
35+
<div class="pure-bg-black pure-txt-white">pure-bg-black</div>
36+
<div class="pure-bg-blue">pure-bg-blue</div>
37+
<div class="pure-bg-cyan">pure-bg-cyan</div>
38+
<div class="pure-bg-green">pure-bg-green</div>
39+
<div class="pure-bg-magenta">pure-bg-magenta</div>
40+
<div class="pure-bg-red">pure-bg-red</div>
41+
<div class="pure-bg-white">pure-bg-white</div>
42+
<div class="pure-bg-yellow">pure-bg-yellow</div>
43+
44+
<br>
45+
46+
<div class="pure-bg-black pure-bg-alpha-10">pure-bg-black pure-bg-alpha-10</div>
47+
<div class="pure-bg-black pure-bg-alpha-25">pure-bg-black pure-bg-alpha-25</div>
48+
<div class="pure-bg-black pure-bg-alpha-50">pure-bg-black pure-bg-alpha-50</div>
49+
<div class="pure-bg-black pure-bg-alpha-75 pure-txt-white">pure-bg-black pure-bg-alpha-75</div>
50+
<div class="pure-bg-black pure-bg-alpha-90 pure-txt-white">pure-bg-black pure-bg-alpha-90</div>
51+
52+
<h2>Borders</h2>
53+
54+
<h3>Border widths</h3>
55+
56+
<div class="pure-p-2 pure-bd-1">pure-bd-1</div>
57+
<br>
58+
<div class="pure-p-2 pure-bd-2">pure-bd-2</div>
59+
<br>
60+
<div class="pure-p-2 pure-bd-3">pure-bd-3</div>
61+
<br>
62+
<div class="pure-p-2 pure-bd-4">pure-bd-4</div>
63+
<br>
64+
<div class="pure-p-2 pure-bd-5">pure-bd-5</div>
65+
66+
<h3>Border styles</h3>
67+
68+
<div class="pure-p-2 pure-bd-2 pure-bd-solid">pure-bd-solid</div>
69+
<br>
70+
<div class="pure-p-2 pure-bd-2 pure-bd-dotted">pure-bd-dotted</div>
71+
<br>
72+
<div class="pure-p-2 pure-bd-2 pure-bd-dashed">pure-bd-dashed</div>
73+
74+
<h3>Border colors</h3>
75+
76+
<div class="pure-p-2 pure-bd-1 pure-bd-black">pure-bd-black</div>
77+
<br>
78+
<div class="pure-p-2 pure-bd-1 pure-bd-blue">pure-bd-blue</div>
79+
<br>
80+
<div class="pure-p-2 pure-bd-1 pure-bd-cyan">pure-bd-cyan</div>
81+
<br>
82+
<div class="pure-p-2 pure-bd-1 pure-bd-green">pure-bd-green</div>
83+
<br>
84+
<div class="pure-p-2 pure-bd-1 pure-bd-magenta">pure-bd-magenta</div>
85+
<br>
86+
<div class="pure-p-2 pure-bd-1 pure-bd-red">pure-bd-red</div>
87+
<br>
88+
<div class="pure-p-2 pure-bd-1 pure-bd-white">pure-bd-white</div>
89+
<br>
90+
<div class="pure-p-2 pure-bd-1 pure-bd-yellow">pure-bd-yellow</div>
91+
92+
<br>
93+
<br>
94+
95+
<div class="pure-p-2 pure-bd-2 pure-bd-black pure-bd-alpha-10">pure-bd-black pure-bd-alpha-10</div>
96+
<br>
97+
<div class="pure-p-2 pure-bd-2 pure-bd-black pure-bd-alpha-25">pure-bd-black pure-bd-alpha-25</div>
98+
<br>
99+
<div class="pure-p-2 pure-bd-2 pure-bd-black pure-bd-alpha-50">pure-bd-black pure-bd-alpha-50</div>
100+
<br>
101+
<div class="pure-p-2 pure-bd-2 pure-bd-black pure-bd-alpha-75">pure-bd-black pure-bd-alpha-75</div>
102+
<br>
103+
<div class="pure-p-2 pure-bd-2 pure-bd-black pure-bd-alpha-90">pure-bd-black pure-bd-alpha-90</div>
104+
105+
<h3>Border radius</h3>
106+
107+
<div class="pure-p-2 pure-bd-2 pure-bd-radius-1">pure-bd-radius-1</div>
108+
<br>
109+
<div class="pure-p-2 pure-bd-2 pure-bd-radius-2">pure-bd-radius-2</div>
110+
<br>
111+
<div class="pure-p-2 pure-bd-2 pure-bd-radius-3">pure-bd-radius-3</div>
112+
<br>
113+
<div class="pure-p-2 pure-bd-2 pure-bd-radius-4">pure-bd-radius-4</div>
114+
<br>
115+
<div class="pure-p-2 pure-bd-2 pure-bd-radius-5">pure-bd-radius-5</div>
116+
<br>
117+
<div class="pure-p-2 pure-bd-2 pure-bd-radius-pill">pure-bd-radius-pill</div>
118+
<br>
119+
<div class="pure-p-2 pure-bd-2 pure-bd-radius-circle">pure-bd-radius-circle</div>
120+
121+
<h2>Opacity</h2>
122+
123+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-10">pure-opacity-10</div>
124+
<br>
125+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-20">pure-opacity-20</div>
126+
<br>
127+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-25">pure-opacity-25</div>
128+
<br>
129+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-30">pure-opacity-30</div>
130+
<br>
131+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-40">pure-opacity-40</div>
132+
<br>
133+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-50">pure-opacity-50</div>
134+
<br>
135+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-60">pure-opacity-60</div>
136+
<br>
137+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-70">pure-opacity-70</div>
138+
<br>
139+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-75">pure-opacity-75</div>
140+
<br>
141+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-80">pure-opacity-80</div>
142+
<br>
143+
<div class="pure-bg-magenta pure-bg-alpha-25 pure-opacity-90">pure-opacity-90</div>
13144

14145
<h2>Spacing</h2>
15146

16-
<div class="pure-p-1 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
147+
<div class="pure-p-1 pure-bg-blue pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
17148
<div class="pure-bg-white">pure-p-1</div>
18149
</div>
19150
<br>
20-
<div class="pure-p-2 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
151+
<div class="pure-p-2 pure-bg-blue pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
21152
<div class="pure-bg-white">pure-p-2</div>
22153
</div>
23154
<br>
24-
<div class="pure-p-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
155+
<div class="pure-p-3 pure-bg-blue pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
25156
<div class="pure-bg-white">pure-p-3</div>
26157
</div>
27158
<br>
28-
<div class="pure-pb-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
159+
<div class="pure-pb-3 pure-bg-blue pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
29160
<div class="pure-bg-white">pure-pb-3</div>
30161
</div>
31162
<br>
32-
<div class="pure-pl-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
163+
<div class="pure-pl-3 pure-bg-blue pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
33164
<div class="pure-bg-white">pure-pl-3</div>
34165
</div>
35166
<br>
36-
<div class="pure-pr-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
167+
<div class="pure-pr-3 pure-bg-blue pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
37168
<div class="pure-bg-white">pure-pr-3</div>
38169
</div>
39170
<br>
40-
<div class="pure-pt-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
171+
<div class="pure-pt-3 pure-bg-blue pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
41172
<div class="pure-bg-white">pure-pt-3</div>
42173
</div>
43174
<br>
44-
<div class="pure-px-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
175+
<div class="pure-px-3 pure-bg-blue pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
45176
<div class="pure-bg-white">pure-px-3</div>
46177
</div>
47178
<br>
48-
<div class="pure-py-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
179+
<div class="pure-py-3 pure-bg-blue pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
49180
<div class="pure-bg-white">pure-py-3</div>
50181
</div>
51-
<br>
52-
<div class="pure-p-2 pure-spacing-2x pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
53-
<div class="pure-bg-white">pure-p-2 pure-spacing-2x</div>
54-
</div>
55-
<br>
56-
<div class="pure-pl-2 pure-spacing-3x pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
57-
<div class="pure-bg-white">pure-pl-2 pure-spacing-3x</div>
58-
</div>
59182

60183
<br>
61184
<br>
62185

63-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
186+
<div class="pure-bg-green pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
64187
<div class="pure-m-1 pure-bg-white">pure-m-1</div>
65188
</div>
66189
<br>
67-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
190+
<div class="pure-bg-green pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
68191
<div class="pure-m-2 pure-bg-white">pure-m-2</div>
69192
</div>
70193
<br>
71-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
194+
<div class="pure-bg-green pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
72195
<div class="pure-m-3 pure-bg-white">pure-m-3</div>
73196
</div>
74197
<br>
75-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
198+
<div class="pure-bg-green pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
76199
<div class="pure-mb-3 pure-bg-white">pure-mb-3</div>
77200
</div>
78201
<br>
79-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
202+
<div class="pure-bg-green pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
80203
<div class="pure-ml-3 pure-bg-white">pure-ml-3</div>
81204
</div>
82205
<br>
83-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
206+
<div class="pure-bg-green pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
84207
<div class="pure-mr-3 pure-bg-white">pure-mr-3</div>
85208
</div>
86209
<br>
87-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
210+
<div class="pure-bg-green pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
88211
<div class="pure-mt-3 pure-bg-white">pure-mt-3</div>
89212
</div>
90213
<br>
91-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
214+
<div class="pure-bg-green pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
92215
<div class="pure-mx-3 pure-bg-white">pure-mx-3</div>
93216
</div>
94217
<br>
95-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
218+
<div class="pure-bg-green pure-bg-alpha-20 pure-bd-1 pure-bd-black pure-bd-alpha-40">
96219
<div class="pure-my-3 pure-bg-white">pure-my-3</div>
97220
</div>
98-
<br>
99-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
100-
<div class="pure-m-2 pure-spacing-2x pure-bg-white">pure-m-2 pure-spacing-2x</div>
101-
</div>
102-
<br>
103-
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
104-
<div class="pure-ml-2 pure-spacing-3x pure-bg-white">pure-ml-2 pure-spacing-3x</div>
105-
</div>
106221

107222
</body>
108223
</html>

0 commit comments

Comments
 (0)