Design System
Hi! Welcome! Feel free to review the style guide/design system for my portfolio website. I developed this system by incorporating the Client First approach by Finsweet and customizing it to suit my site. It is under ongoing development!
TYPOGRAPHY
Regular Headings
H1: Lexend Medium; 2.027 rem; 40px Line height
H2: Lexend Medium; 1.802rem; 32px Line height
H3: Lexend Medium; 1.424rem; 28px Line height
H4: Lexend Medium; 1.266rem; 24px line height
H5: Lexend Medium; 1.125 rem; 24px line height
H6: Lexend Medium; 1rem; 24px line height
Heading Styles
Guideline: Used when the same style as heading as desired; The heading style normally comes with no margin as default, with the option of adding the combined class "with margin".
text-style
text-size
text-color
text-align
MARGINS
Margin Bottoms
Margin Vertical
Paddings
Padding Box
padding-box-xsmall
padding-box-small
padding-box-medium
Padding Horizontal
padding-horizontal-xxsmall
padding-horizontal-medium
Padding Vertical
padding-vertical-small
Grid Layout
Grid One line
grid-1x1-1:2
grid-1x1-1:3
grid-1x1-even
grid-1x2-2:1
grid-1x3-even
grid-1x4-even
grid-1x5-even
Grid Multiple Lines
grid-2x2-even
grid-5x2-even
Flex Layout
Flex for positioning
flex-center
flex-right
flex-left
Flex vertical common layout
flex-vertical-xsmall-center
flex-vertical-xsmall-left
flex-vertical-small-center
Flex horizontal common layout
flex-horizontal-icon
Used to align small icons and text
mobile-flex
Use for align center a container only in mobile settings
Sizes
4:3 Ratio
size-4:3-medium (384px*288px/256px*192px)
size-4:3-small (256px*192px)
16:9 Ratio
size-16:9-large
size-16:9-medium
1:1 Ratio
320px*320px/280px*280px
180px*180px
56px*56px
56px*56px
Commonly-used Max-width
size-mobile-screen-regular
Used for usual phone screen mock up regular
size-mobile-screen-large
Used for usual phone mock up larger
Min-height
min-height-title
*The value hasn't been determined yet. However, it is intended to used for making sure the elements from, in the case that one of the title might be too line.
Sample Title
Images
Guideline: In general, image style is applied directly to the image itself. The size is applied using a container (e.g., lightbox)
Image style
image-border
image-shadow
Image size
image-90%
image-80%
image-50%
Image Cover
Icons
Regular Icons
icon-1x1-xlarge (fa-900)
For now, the xlarge size icon is only used for decoration purpose for specific blocks, so it is center by default
icon-1x1-large (fa-900)
icon-1x1-medium (fa-400)
Include 0.5rem right margin by default
icon-1x1-small (fa-400)
Include 0.5rem right margin by default
icon-1x1-small (fa-900)
Include 0.5rem right margin by default
Special Icons
number-component
divide-line-title
divide-line-thicker
icon-dot
Background
Colored Background
colored-background-cornered
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
colored-background-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
