Skip to content

Commit 288a53b

Browse files
JimcoJimco
committed
docs: add en docs for style lib
1 parent 8c23428 commit 288a53b

File tree

26 files changed

+1603
-113
lines changed

26 files changed

+1603
-113
lines changed

‎docs/.vitepress/config/en.ts‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ export const en = defineConfig({
5252
text: 'Quick Start',
5353
link: 'start/quick-start',
5454
},
55-
{
56-
text: 'Customize',
57-
link: 'start/customize',
58-
},
55+
// {
56+
// text: 'Customize',
57+
// link: 'start/customize',
58+
// },
5959
{
6060
text: 'Browser Support',
6161
link: 'start/browsers',
@@ -110,14 +110,22 @@ export const en = defineConfig({
110110
text: 'Spacing',
111111
link: 'utilities/spacing',
112112
},
113-
{
114-
text: 'Position',
115-
link: 'utilities/position',
116-
},
113+
// {
114+
// text: 'Position',
115+
// link: 'utilities/position',
116+
// },
117117
{
118118
text: 'Ratio',
119119
link: 'utilities/ratio',
120120
},
121+
{
122+
text: 'Object Fit',
123+
link: 'utilities/object-fit',
124+
},
125+
// {
126+
// text: 'Font Size',
127+
// link: 'utilities/font-size',
128+
// },
121129
],
122130
},
123131
],

‎docs/en/index.md‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ layout: home
55
hero:
66
name: "Responsive Toolkit"
77
text: "Build responsive websites easily and reliably"
8-
tagline: My great project tagline
98
actions:
109
- theme: brand
1110
text: Design Guide
@@ -15,10 +14,10 @@ hero:
1514
link: /style/start/quick-start
1615

1716
features:
18-
- title: Feature A
19-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
20-
- title: Feature B
21-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
22-
- title: Feature C
23-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
17+
- title: Lightweight
18+
details: Stylesheet under 10kb after Gzip, zero dependencies, easy integration without extra configuration
19+
- title: Responsive
20+
details: Built on CSS features like Flex and Grid, all style classes support responsive prefixes with full compatibility for modern browsers
21+
- title: Customizable
22+
details: Supports Sass variables for easy style customization according to project needs
2423
---

‎docs/en/style/layout/breakpoints.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,58 @@ order: 200
33
---
44

55
# Breakpoints
6+
7+
Responsive Style utilizes breakpoints to determine responsive layout behavior across varying device viewport sizes. These width thresholds are customizable.
8+
9+
## Core Concepts
10+
11+
- **Breakpoints**: Critical thresholds in responsive design that determine content display at specific screen sizes. Typically pixel values where styles apply below/above specified widths.
12+
- **Media Queries**: CSS feature allowing conditional style application based on device parameters. We primarily use min-width queries.
13+
- **Mobile-First**: Responsive Style employs mobile-first approach, applying minimal base styles for smallest breakpoints then layering enhancements for larger devices. Optimizes CSS efficiency and rendering performance.
14+
15+
## Default Breakpoints
16+
17+
Predefined breakpoints (customizable via SCSS variables):
18+
19+
| Name | Class Prefix | Breakpoint |
20+
| ----------- | ------------ | ---------- |
21+
| Extra small | - | `<576px` |
22+
| Small | `.sm:` | `≥576px` |
23+
| Medium | `.md:` | `≥768px` |
24+
| Large | `.lg:` | `≥992px` |
25+
| Extra large | `.xl:` | `≥1200px` |
26+
27+
Breakpoint widths are multiples of 12, providing consistent foundation across common devices. Customize in `_variables.scss`:
28+
29+
```scss
30+
$grid-breakpoints: (
31+
xs: 0,
32+
sm: 576px,
33+
md: 768px,
34+
lg: 992px,
35+
xl: 1200px,
36+
) !default;
37+
```
38+
39+
## Usage
40+
41+
All utility classes support responsive prefixes. Follow **mobile-first** principle: non-prefixed styles apply to all breakpoints.
42+
43+
<Story title="Hide at breakpoints" defaultShowCode>
44+
<div class="demo-bps text-center p-4">
45+
<div class="d-none my-2"><b>Hide</b> on all screens</div>
46+
<div class="sm:d-none my-2"><b>Hide</b> on sm and wider screens</div>
47+
<div class="md:d-none my-2"><b>Hide</b> on md and wider screens</div>
48+
<div class="lg:d-none my-2"><b>Hide</b> on lg and wider screens</div>
49+
<div class="xl:d-none my-2"><b>Hide</b> on xl and wider screens</div>
50+
</div>
51+
</Story>
52+
53+
<Story title="Show at breakpoints" defaultShowCode>
54+
<div class="demo-bps text-center p-4">
55+
<div class="d-none sm:d-block my-2"><b>Show</b> on sm and wider screens</div>
56+
<div class="d-none md:d-block my-2"><b>Show</b> on md and wider screens</div>
57+
<div class="d-none lg:d-block my-2"><b>Show</b> on lg and wider screens</div>
58+
<div class="d-none xl:d-block my-2"><b>Show</b> on xl and wider screens</div>
59+
</div>
60+
</Story>

‎docs/en/style/layout/columns.md‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,255 @@ order: 220
33
---
44

55
# Columns
6+
7+
Responsive Style's columns system uses containers, rows and columns for layout alignment. Built with flexbox, it provides a 12-column responsive columns. Key principles:
8+
9+
- Columns created via `.row > .col` structure
10+
- Content should be placed within `.col` elements
11+
- Column spans 1-12 (e.g. 3 equal columns use `<div class="col" />`)
12+
- Excess columns wrap to new row when total exceeds 12
13+
- Add responsive prefixes like `.sm:col-4` for breakpoint-specific layouts
14+
15+
## Basic Columns
16+
17+
Use predefined `.row` and `.col` classes with parent `.container` for centered layouts:
18+
19+
<Story title="Basic Columns">
20+
<div class="demo-columns container text-center my-5">
21+
<div class="row mb-3 mb-3">
22+
<div class="col">
23+
Column 12
24+
</div>
25+
</div>
26+
<div class="row mb-3 mb-3">
27+
<div class="col">
28+
Column 6
29+
</div>
30+
<div class="col">
31+
Column 6
32+
</div>
33+
</div>
34+
<div class="row mb-3 mb-3">
35+
<div class="col">
36+
Column 3
37+
</div>
38+
<div class="col">
39+
Column 6
40+
</div>
41+
<div class="col">
42+
Column 3
43+
</div>
44+
</div>
45+
</div>
46+
</Story>
47+
48+
## Horizontal Alignment
49+
50+
Control column alignment with `.justify-content-*` + responsive prefixes:
51+
52+
<Story title="Horizontal Alignment">
53+
<div class="demo-columns container text-center my-5">
54+
<div class="row justify-content-start lg:justify-content-center mb-3">
55+
<div class="col-4">
56+
One of two columns
57+
</div>
58+
<div class="col-4">
59+
One of two columns
60+
</div>
61+
</div>
62+
<div class="row justify-content-center mb-3">
63+
<div class="col-4">
64+
One of two columns
65+
</div>
66+
<div class="col-4">
67+
One of two columns
68+
</div>
69+
</div>
70+
<div class="row justify-content-end mb-3">
71+
<div class="col-4">
72+
One of two columns
73+
</div>
74+
<div class="col-4">
75+
One of two columns
76+
</div>
77+
</div>
78+
<div class="row justify-content-around mb-3">
79+
<div class="col-4">
80+
One of two columns
81+
</div>
82+
<div class="col-4">
83+
One of two columns
84+
</div>
85+
</div>
86+
<div class="row justify-content-between mb-3">
87+
<div class="col-4">
88+
One of two columns
89+
</div>
90+
<div class="col-4">
91+
One of two columns
92+
</div>
93+
</div>
94+
<div class="row justify-content-evenly mb-3">
95+
<div class="col-4">
96+
One of two columns
97+
</div>
98+
<div class="col-4">
99+
One of two columns
100+
</div>
101+
</div>
102+
</div>
103+
</Story>
104+
105+
## Vertical Alignment
106+
107+
Adjust vertical alignment using `.align-items-*` classes:
108+
109+
<Story title="Vertical Alignment">
110+
<div class="demo-columns container text-center bg-gray my-5">
111+
<div class="row align-items-start lg:align-items-center" style="height: 150px;">
112+
<div class="col">
113+
One of three columns
114+
</div>
115+
<div class="col">
116+
One of three columns
117+
</div>
118+
<div class="col">
119+
One of three columns
120+
</div>
121+
</div>
122+
</div>
123+
<div class="demo-columns container text-center bg-gray my-5">
124+
<div class="row align-items-center" style="height: 150px;">
125+
<div class="col">
126+
One of three columns
127+
</div>
128+
<div class="col">
129+
One of three columns
130+
</div>
131+
<div class="col">
132+
One of three columns
133+
</div>
134+
</div>
135+
</div>
136+
<div class="demo-columns container text-center bg-gray my-5">
137+
<div class="row align-items-end" style="height: 150px;">
138+
<div class="col">
139+
One of three columns
140+
</div>
141+
<div class="col">
142+
One of three columns
143+
</div>
144+
<div class="col">
145+
One of three columns
146+
</div>
147+
</div>
148+
</div>
149+
</Story>
150+
151+
Or apply individual alignment with `.align-self-*`:
152+
153+
<Story title="Individual Vertical Alignment">
154+
<div class="demo-columns container text-center bg-gray">
155+
<div class="row" style="height: 150px;">
156+
<div class="col align-self-start">
157+
One of three columns
158+
</div>
159+
<div class="col align-self-center">
160+
One of three columns
161+
</div>
162+
<div class="col align-self-end">
163+
One of three columns
164+
</div>
165+
</div>
166+
</div>
167+
</Story>
168+
169+
## Column Ordering
170+
171+
Control visual order with `.order-*` classes (responsive supported):
172+
173+
<Story title="Column Ordering">
174+
<div class="demo-columns container text-center my-5">
175+
<div class="row">
176+
<div class="col">
177+
First in DOM, no order applied
178+
</div>
179+
<div class="col order-5">
180+
Second in DOM, with a larger order
181+
</div>
182+
<div class="col order-1">
183+
Third in DOM, with an order of 1
184+
</div>
185+
</div>
186+
</div>
187+
</Story>
188+
189+
Use special `.order-first` and `.order-last` utilities:
190+
191+
<Story title="Special Order Classes">
192+
<div class="demo-columns container text-center my-5">
193+
<div class="row">
194+
<div class="col order-last">
195+
First in DOM, ordered last
196+
</div>
197+
<div class="col">
198+
Second in DOM, unordered
199+
</div>
200+
<div class="col order-first">
201+
Third in DOM, ordered first
202+
</div>
203+
</div>
204+
</div>
205+
</Story>
206+
207+
## Column Offsets
208+
209+
Shift columns with `.offset-*` classes:
210+
211+
<Story title="Column Offsets">
212+
<div class="demo-columns container text-center my-5">
213+
<div class="row">
214+
<div class="md:col-4">.md:col-4</div>
215+
<div class="md:col-4 md:offset-4">.md:col-4 .md:offset-4</div>
216+
</div>
217+
<div class="row">
218+
<div class="md:col-3 md:offset-3">.md:col-3 .md:offset-3</div>
219+
<div class="md:col-3 md:offset-3">.md:col-3 .md:offset-3</div>
220+
</div>
221+
<div class="row">
222+
<div class="md:col-6 md:offset-3">.md:col-6 .md:offset-3</div>
223+
</div>
224+
</div>
225+
</Story>
226+
227+
## Quick Reference
228+
229+
| Class | Styles |
230+
| ------------ | --------------------------------- |
231+
| `.row` | `display: flex; flex-wrap: wrap;` |
232+
| `.col` | `flex: 1 0 0;` |
233+
| `.col-1` | `width: 8.33333333%` |
234+
| `.col-2` | `width: 16.66666667%` |
235+
| `.col-3` | `width: 25%` |
236+
| `.col-4` | `width: 33.33333333%` |
237+
| `.col-5` | `width: 41.66666667%` |
238+
| `.col-6` | `width: 50%` |
239+
| `.col-7` | `width: 58.33333333%` |
240+
| `.col-8` | `width: 66.66666667%` |
241+
| `.col-9` | `width: 75%` |
242+
| `.col-10` | `width: 83.33333333%` |
243+
| `.col-11` | `width: 91.66666667%` |
244+
| `.col-12` | `width: 100%` |
245+
| `.offset-1` | `margin-left: 8.33333333%` |
246+
| `.offset-2` | `margin-left: 16.66666667%` |
247+
| `.offset-3` | `margin-left: 25%` |
248+
| `.offset-4` | `margin-left: 33.33333333%` |
249+
| `.offset-5` | `margin-left: 41.66666667%` |
250+
| `.offset-6` | `margin-left: 50%` |
251+
| `.offset-7` | `margin-left: 58.33333333%` |
252+
| `.offset-8` | `margin-left: 66.66666667%` |
253+
| `.offset-9` | `margin-left: 75%` |
254+
| `.offset-10` | `margin-left: 83.33333333%` |
255+
| `.offset-11` | `margin-left: 91.66666667%` |
256+
257+
> All classes support responsive prefixes like `sm:`, `md:`, `lg:`, `xl:` etc.

0 commit comments

Comments
 (0)