Skip to content

Commit 0a5e6dc

Browse files
jfmdevjfmdev
committed
Create project and add spacing utilities
0 parents  commit 0a5e6dc

21 files changed

+903
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎LICENSE.txt‎

Lines changed: 373 additions & 0 deletions
Large diffs are not rendered by default.

‎README.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# PureCSS Utilities
2+
3+
A CSS library that provides utility CSS classes which complement [PureCSS](https://purecss.io/).
4+
5+
## Installation
6+
7+
TODO
8+
9+
## Utilities
10+
11+
### Text colors
12+
13+
TODO
14+
15+
### Backgrounds
16+
17+
TODO
18+
19+
### Buttons
20+
21+
TODO
22+
23+
### Flex
24+
25+
TODO
26+
27+
### Spacing
28+
29+
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`.
30+
31+
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-*`.
32+
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+
35+
### Sizing
36+
37+
TODO
38+
39+
## Customization
40+
41+
TODO (Variables)
42+
43+
## Development
44+
45+
The library was implemented using [Sass](https://sass-lang.com/), you can use the following commands to build it:
46+
47+
* `npm run build`
48+
* `npm run dev`
49+
50+
## License
51+
52+
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: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>PureCSS Utilities</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
8+
<link rel="stylesheet" href="dist/all.css">
9+
</head>
10+
11+
<body class="pure-p-4">
12+
<h1>PureCSS Utilities Examples</h1>
13+
14+
<h2>Spacing</h2>
15+
16+
<div class="pure-p-1 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
17+
<div class="pure-bg-white">pure-p-1</div>
18+
</div>
19+
<br>
20+
<div class="pure-p-2 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
21+
<div class="pure-bg-white">pure-p-2</div>
22+
</div>
23+
<br>
24+
<div class="pure-p-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
25+
<div class="pure-bg-white">pure-p-3</div>
26+
</div>
27+
<br>
28+
<div class="pure-pb-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
29+
<div class="pure-bg-white">pure-pb-3</div>
30+
</div>
31+
<br>
32+
<div class="pure-pl-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
33+
<div class="pure-bg-white">pure-pl-3</div>
34+
</div>
35+
<br>
36+
<div class="pure-pr-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
37+
<div class="pure-bg-white">pure-pr-3</div>
38+
</div>
39+
<br>
40+
<div class="pure-pt-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
41+
<div class="pure-bg-white">pure-pt-3</div>
42+
</div>
43+
<br>
44+
<div class="pure-px-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
45+
<div class="pure-bg-white">pure-px-3</div>
46+
</div>
47+
<br>
48+
<div class="pure-py-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
49+
<div class="pure-bg-white">pure-py-3</div>
50+
</div>
51+
52+
<br>
53+
<br>
54+
55+
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
56+
<div class="pure-m-1 pure-bg-white">pure-m-1</div>
57+
</div>
58+
<br>
59+
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
60+
<div class="pure-m-2 pure-bg-white">pure-m-2</div>
61+
</div>
62+
<br>
63+
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
64+
<div class="pure-m-3 pure-bg-white">pure-m-3</div>
65+
</div>
66+
<br>
67+
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
68+
<div class="pure-mb-3 pure-bg-white">pure-mb-3</div>
69+
</div>
70+
<br>
71+
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
72+
<div class="pure-ml-3 pure-bg-white">pure-ml-3</div>
73+
</div>
74+
<br>
75+
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
76+
<div class="pure-mr-3 pure-bg-white">pure-mr-3</div>
77+
</div>
78+
<br>
79+
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
80+
<div class="pure-mt-3 pure-bg-white">pure-mt-3</div>
81+
</div>
82+
<br>
83+
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
84+
<div class="pure-mx-3 pure-bg-white">pure-mx-3</div>
85+
</div>
86+
<br>
87+
<div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
88+
<div class="pure-my-3 pure-bg-white">pure-my-3</div>
89+
</div>
90+
91+
</body>
92+
</html>

‎dist/all.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/all.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/background.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/background.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/base.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/base.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)