Skip to content

Commit 3fe2178

Browse files
dzungleedzunglee
authored
Merge pull request #23 from ltv/new-typography
New typography
2 parents 4970779 + a06c7c1 commit 3fe2178

File tree

4 files changed

+374
-3
lines changed

4 files changed

+374
-3
lines changed

‎src/assets/css/typography.scss

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
body {
2+
.card {
3+
@apply bg-white break-words w-full sm:w-3/4 md:w-3/4 mx-auto mt-5 mb-2 shadow rounded-lg flex flex-col
4+
}
5+
.card-header {
6+
@apply p-5 border-b
7+
}
8+
.row {
9+
@apply my-8 w-full h-auto
10+
}
11+
.title {
12+
@apply uppercase text-80 font-semibold text-muted
13+
}
14+
.medium {
15+
@apply flex flex-col md:flex-row md:justify-center md:items-center
16+
}
17+
h1 {
18+
@apply text-1.625 text-primary font-semibold
19+
}
20+
h2 {
21+
@apply text-xl text-primary font-semibold leading-normal
22+
}
23+
h3 {
24+
@apply text-1.0625 text-primary font-semibold
25+
}
26+
h4 {
27+
@apply text-0.9375 text-primary font-semibold
28+
}
29+
h5 {
30+
@apply text-0.8125 text-primary font-semibold
31+
}
32+
h6 {
33+
@apply text-0.625 text-primary font-semibold
34+
}
35+
36+
// Display-1
37+
.display-1 {
38+
@apply text-3.3 text-primary font-semibold
39+
}
40+
.display-2 {
41+
@apply text-2.75 text-primary font-semibold
42+
}
43+
.display-3 {
44+
@apply text-2.1875 text-primary font-semibold
45+
}
46+
.display-4 {
47+
@apply text-1.6275 text-primary font-semibold
48+
}
49+
50+
// Specialized title
51+
.heading {
52+
@apply uppercase text-0.95 text-primary font-semibold tracking-wide #{!important}
53+
}
54+
.heading-title {
55+
@apply uppercase text-1.375 text-primary font-semibold tracking-wide
56+
}
57+
.text-warning {
58+
@apply text-warnning
59+
}
60+
.lead {
61+
@apply text-xl font-light leading-1.7
62+
}
63+
64+
// Paragraphs
65+
p {
66+
@apply text-primary-100 text-base font-light leading-1.7
67+
}
68+
.blockquote {
69+
@apply mb-4 text-xl text-primary-100 font-normal leading-normal
70+
}
71+
.blockquote-footer {
72+
@apply text-primary-200 text-80 block font-normal leading-normal
73+
}
74+
.text-primary {
75+
@apply text-primary-blue #{!important}
76+
}
77+
.text-info {
78+
@apply text-cyan-400 #{!important}
79+
}
80+
.text-success {
81+
@apply text-green-500 #{!important}
82+
}
83+
.text-danger {
84+
@apply text-primary-red
85+
}
86+
87+
}

‎src/components/element-plus.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Custom css, do it later, now use the element plus css
22
import 'assets/css/el-button.scss'
3+
import 'assets/css/typography.scss'
34

45
import 'element-plus/dist/index.css'
56
import 'element-plus/es/components/message/style/css'

‎src/modules/typography/views/index.vue

Lines changed: 254 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,257 @@
1-
<template></template>
1+
<template>
2+
<!-- Heading section -->
3+
<div class="card">
4+
<div class="card-header">
5+
<h3 class="text-lg">Headings</h3>
6+
</div>
7+
<div class="p-5">
8+
<!-- Heading 1 -->
9+
<div class="row medium">
10+
<div class="md:w-1/4">
11+
<span class="title block">Heading 1</span>
12+
</div>
13+
<div class="md:w-3/4">
14+
<h1>Fancy Dasboard</h1>
15+
</div>
16+
</div>
17+
<!-- Heading 2 -->
18+
<div class="row medium">
19+
<div class="md:w-1/4">
20+
<span class="title block">Heading 2</span>
21+
</div>
22+
<div class="md:w-3/4">
23+
<h2>Fancy Dasboard</h2>
24+
</div>
25+
</div>
26+
<!-- Heading 3 -->
27+
<div class="row medium">
28+
<div class="md:w-1/4">
29+
<span class="title block">Heading 3</span>
30+
</div>
31+
<div class="md:w-3/4">
32+
<h3>Fancy Dasboard</h3>
33+
</div>
34+
</div>
35+
<!-- Heading 4 -->
36+
<div class="row medium">
37+
<div class="md:w-1/4">
38+
<span class="title block">Heading 4</span>
39+
</div>
40+
<div class="md:w-3/4">
41+
<h4>Fancy Dasboard</h4>
42+
</div>
43+
</div>
44+
<!-- Heading 5 -->
45+
<div class="row medium">
46+
<div class="md:w-1/4">
47+
<span class="title block">Heading 5</span>
48+
</div>
49+
<div class="md:w-3/4">
50+
<h5>Fancy Dasboard</h5>
51+
</div>
52+
</div>
53+
<!-- Heading 6 -->
54+
<div class="row medium">
55+
<div class="md:w-1/4">
56+
<span class="title block">Heading 6</span>
57+
</div>
58+
<div class="md:w-3/4">
59+
<h6>Fancy Dasboard</h6>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
65+
<!-- Display section -->
66+
<div class="card">
67+
<div class="card-header">
68+
<h3 class="text-lg">Display titles</h3>
69+
</div>
70+
<div class="p-5">
71+
<!-- Display 1 -->
72+
<div class="row medium">
73+
<div class="md:w-1/4">
74+
<span class="title block">Display 1</span>
75+
</div>
76+
<div class="md:w-3/4">
77+
<h1 class="display-1">Fancy Dasboard</h1>
78+
</div>
79+
</div>
80+
<!-- Display 2 -->
81+
<div class="row medium">
82+
<div class="md:w-1/4">
83+
<span class="title block">Heading 2</span>
84+
</div>
85+
<div class="md:w-3/4">
86+
<h2 class="display-2">Fancy Dasboard</h2>
87+
</div>
88+
</div>
89+
<!-- Heading 3 -->
90+
<div class="row medium">
91+
<div class="md:w-1/4">
92+
<span class="title block">Heading 3</span>
93+
</div>
94+
<div class="md:w-3/4">
95+
<h3 class="display-3">Fancy Dasboard</h3>
96+
</div>
97+
</div>
98+
<!-- Heading 4 -->
99+
<div class="row medium">
100+
<div class="md:w-1/4">
101+
<span class="title block">Heading 4</span>
102+
</div>
103+
<div class="md:w-3/4">
104+
<h4 class="display-4">Fancy Dasboard</h4>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
110+
<!-- Specialized titles -->
111+
<div class="card">
112+
<div class="card-header">
113+
<h3 class="text-lg">Specialized titles</h3>
114+
</div>
115+
<div class="p-5">
116+
<!-- Heading -->
117+
<div class="row medium">
118+
<div class="md:w-1/4">
119+
<span class="title block">Heading</span>
120+
</div>
121+
<div class="md:w-3/4">
122+
<h3 class="heading">Fancy Dasboard</h3>
123+
</div>
124+
</div>
125+
<!-- Heading title -->
126+
<div class="row medium">
127+
<div class="md:w-1/4">
128+
<span class="title block">Heading Title</span>
129+
</div>
130+
<div class="md:w-3/4">
131+
<h2 class="heading-title text-warning">Fancy Dasboard</h2>
132+
</div>
133+
</div>
134+
<!-- Heading section -->
135+
<div class="row medium">
136+
<div class="md:w-1/4">
137+
<span class="title block">Heading Section</span>
138+
</div>
139+
<div class="md:w-3/4">
140+
<h3 class="display-3">Fancy Dasboard</h3>
141+
</div>
142+
</div>
143+
<!-- -->
144+
<div class="row medium">
145+
<div class="md:w-1/4">
146+
<span class="title block"></span>
147+
</div>
148+
<div class="md:w-3/4">
149+
<h4 class="lead text-muted">Fancy Dasboard</h4>
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
155+
<!-- Paragraphs Section -->
156+
<div class="card">
157+
<div class="card-header">
158+
<h3 class="text-lg">Paragraphs</h3>
159+
</div>
160+
<div class="p-5">
161+
<!-- Paragraphs -->
162+
<div class="row medium">
163+
<div class="md:w-1/4">
164+
<span class="title block">Paragraph</span>
165+
</div>
166+
<div class="md:w-3/4">
167+
<p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
168+
</div>
169+
</div>
170+
<!-- Lead -->
171+
<div class="row medium">
172+
<div class="md:w-1/4">
173+
<span class="title block">Lead Text</span>
174+
</div>
175+
<div class="md:w-3/4">
176+
<p class="lead">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
177+
</div>
178+
</div>
179+
<!-- Blockqoute -->
180+
<div class="row medium">
181+
<div class="md:w-1/4">
182+
<span class="title block">Quote</span>
183+
</div>
184+
<div class="md:w-3/4">
185+
<blockquote class="blockquote ">
186+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
187+
<footer class="blockquote-footer">
188+
<div class="before:content-['\2014\A0'] inline-block mr-1">
189+
Someone famous in
190+
</div>
191+
<cite title="Source Title">Source Title</cite>
192+
</footer>
193+
</blockquote>
194+
</div>
195+
</div>
196+
<!-- Muted text -->
197+
<div class="row medium">
198+
<div class="md:w-1/4">
199+
<span class="title block">Muted Text</span>
200+
</div>
201+
<div class="md:w-3/4">
202+
<p class="text-muted">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
203+
</div>
204+
</div>
205+
<!-- Primary text -->
206+
<div class="row medium">
207+
<div class="md:w-1/4">
208+
<span class="title block">Primary Text</span>
209+
</div>
210+
<div class="md:w-3/4">
211+
<p class="text-primary">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
212+
</div>
213+
</div>
214+
<!-- Info text -->
215+
<div class="row medium">
216+
<div class="md:w-1/4">
217+
<span class="title block">Info Text</span>
218+
</div>
219+
<div class="md:w-3/4">
220+
<p class="text-info">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
221+
</div>
222+
</div>
223+
<!-- Info text -->
224+
<div class="row medium">
225+
<div class="md:w-1/4">
226+
<span class="title block">Success Text</span>
227+
</div>
228+
<div class="md:w-3/4">
229+
<p class="text-success">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
230+
</div>
231+
</div>
232+
<!-- Warn text -->
233+
<div class="row medium">
234+
<div class="md:w-1/4">
235+
<span class="title block">Warning Text</span>
236+
</div>
237+
<div class="md:w-3/4">
238+
<p class="text-warning">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
239+
</div>
240+
</div>
241+
<!-- Danger text -->
242+
<div class="row medium">
243+
<div class="md:w-1/4">
244+
<span class="title block">Text Danger</span>
245+
</div>
246+
<div class="md:w-3/4">
247+
<p class="text-danger">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
248+
</div>
249+
</div>
250+
</div>
251+
</div>
252+
253+
254+
</template>
2255

3256
<script lang="ts">
4257
import { defineComponent } from 'vue'

‎tailwind.config.js

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,38 @@ module.exports = {
33
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
44
theme: {
55
extend: {
6-
colors: {},
7-
fontSize: {},
6+
colors: {
7+
primary: {
8+
DEFAULT: 'rgb(50 50 93)',
9+
100: 'rgb(82 95 127)',
10+
200: 'rgb(136 152 170)',
11+
blue: 'rgb(94 114 228)',
12+
red: 'rgb(245 54 92)',
13+
},
14+
muted: {
15+
DEFAULT: 'rgb(136 152 170)',
16+
},
17+
warnning: {
18+
DEFAULT: 'rgb(251 99 64)',
19+
},
20+
},
21+
fontSize: {
22+
0.625: ['0.625rem', '1.5'],
23+
0.8125: ['0.8125rem', '1.5'],
24+
0.9375: ['0.9375rem', '1.5'],
25+
0.95: ['0.95rem', '1.5'],
26+
1.0625: ['1.0625rem', '1.5'],
27+
1.375: ['1.375rem', '1.5'],
28+
1.625: ['1.625rem', '1.5'],
29+
1.6275: ['1.6275rem', '1.5'],
30+
2.1875: ['2.1875rem', '1.5'],
31+
2.75: ['2.75rem', '1.5'],
32+
3.3: ['3.3rem', '1.5'],
33+
80: ['80%', '1.5'],
34+
},
35+
lineHeight: {
36+
'1.7': '1.7',
37+
},
838
boxShadow: {},
939
},
1040
translate: {},

0 commit comments

Comments
 (0)