Skip to content

Commit 300ed2a

Browse files
author
ncpa0cpl
committed
feat: added new class components: card, list, separator and nav-sidebar
1 parent be573af commit 300ed2a

16 files changed

Lines changed: 259 additions & 21 deletions

‎docs/README.md‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
# Components
1+
# Documentation
2+
3+
## Components
24

35
1. [box](./components/box.md)
46
2. [button](./components/button.md)
@@ -9,3 +11,39 @@
911
7. [message](./components/message.md)
1012
8. [slider](./components/slider.md)
1113
9. [switch](./components/switch.md)
14+
10. [card](./components/card.md)
15+
11. [list](./components/list.md)
16+
12. [separator](./components/separator.md)
17+
13. [nav-sidebar](./components/nav-sidebar.md)
18+
19+
## Themes
20+
21+
A theme must be provided to a container that houses all of elements decorated with classes provided by this CSS library. Without the theme elements will not be properly styled.
22+
23+
At this moment there is only one theme provided by default, a dark theme, to use it simply add a `dark-theme` class to the container.
24+
25+
### Example
26+
27+
```html
28+
<body class="dark-theme">
29+
<!-- Elements -->
30+
</body>
31+
```
32+
33+
## Patterns
34+
35+
### Font size
36+
37+
Since most of all of the elements padding, margins etc. are using the `em` unit (size relative to the element `font-size`). It is recommended to have a default font size set on the container element, and have every other element inherit it, if a nested component needs to change the size of it's children, it can then simply define a new font size and all of it's children will automatically get resized.
38+
39+
#### Example
40+
41+
```css
42+
*:not(:is(body, h1, h2, h3, h4, h5, h6)) {
43+
font-size: inherit;
44+
}
45+
46+
body {
47+
font-size: 14px;
48+
}
49+
```

‎docs/components/box.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
Box is a simple container element. By default comes with a flex display type.
66

77
```html
8-
<div class="box"></div>
8+
<div class="box">
9+
<!-- content -->
10+
</div>
911
```
1012

1113
## Darker box
1214

1315
Box elements when the `dark` class name is assigned to them change their background color to a darker one.
1416

1517
```html
16-
<div class="box dark"></div>
18+
<div class="box dark">
19+
<!-- content -->
20+
</div>
1721
```

‎docs/components/card.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
[go back to Docs](../README.md)
2+
3+
# Card
4+
5+
Card is a simple container element with a significant border radius and brighter background color than a regular box.
6+
7+
```html
8+
<div class="card">
9+
<!-- content -->
10+
</div>
11+
```
12+
13+
### Activable
14+
15+
Card can be `activable` which will cause it's background color to change when hovered over.
16+
17+
```html
18+
<div class="card activable">
19+
<!-- content -->
20+
</div>
21+
```

‎docs/components/frame.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,7 @@
55
Frame class adds a simple non-rounded border around the element.
66

77
```html
8-
<div class="frame"></div>
8+
<div class="frame">
9+
<!-- content -->
10+
</div>
911
```

‎docs/components/list.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
[go back to Docs](../README.md)
2+
3+
# List
4+
5+
List is a container that has significant border radius and applies special styling to all of it's children with the `list-element` class name.
6+
7+
```html
8+
<div class="list">
9+
<div class="list-element">
10+
<!-- content -->
11+
</div>
12+
<div class="list-element">
13+
<!-- content -->
14+
</div>
15+
<div class="list-element">
16+
<!-- content -->
17+
</div>
18+
</div>
19+
```
20+
21+
### Activable elements
22+
23+
When an element is `activable`, hovering over it will change it's background color.
24+
25+
```html
26+
<div class="list">
27+
<div class="list-element activable">
28+
<!-- content -->
29+
</div>
30+
</div>
31+
```

‎docs/components/nav-sidebar.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
[go back to Docs](../README.md)
2+
3+
# Navigation Sidebar
4+
5+
Navigation sidebar is a container for a list of navigation buttons. It is intended to be used vertically only.
6+
7+
```html
8+
<div class="nav-sidebar">
9+
<button class="nav-sidebar-btn">
10+
<span>Home Page</span>
11+
</button>
12+
<button class="nav-sidebar-btn">
13+
<span>About Page</span>
14+
</button>
15+
<button class="nav-sidebar-btn">
16+
<span>Contact Page</span>
17+
</button>
18+
</div>
19+
```
20+
21+
When a `nav-sidebar-btn` has the `active` class name, it's background color will change.
22+
23+
To create sections of the sidebar a [separator](./separator.md) can be used.

‎docs/components/separator.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
[go back to Docs](../README.md)
2+
3+
# Separator
4+
5+
Separator provides a simple horizontal or vertical line with a small margin around it. It is usually intended inside a flexbox, if the separator is used in other display type container it is not guaranteed to work properly, manually setting the width and height of the separator is necessary in such case.
6+
7+
### Horizontal separator
8+
9+
```html
10+
<span class="separator"></span>
11+
```
12+
13+
### Vertical separator
14+
15+
```html
16+
<span class="separator vertical"></span>
17+
```

‎src/components/box.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.box {
22
display: flex;
3-
background-color: color("bg");
3+
background-color: color("bg1");
44

5-
&.dark {
5+
&.light {
66
background-color: color("bg2");
77
}
88
}

‎src/components/button.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
border 0.2s;
1111

1212
&.primary {
13-
background-color: color("primary");
13+
background-color: color("primary-darker");
1414

1515
&:hover {
1616
background-color: color("primary-hover");

‎src/components/card.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.card {
2+
border-radius: size("cradius");
3+
background-color: color("bg2");
4+
padding: 0.85em 1.15em;
5+
6+
&.activable {
7+
&:hover {
8+
background-color: color("dimmed");
9+
}
10+
}
11+
}

0 commit comments

Comments
 (0)