- Phân tích tổng quan thiết kế PSD
- Màu sắc, Font, Space
- Thiết lập Class, Structure cho Design
- Code cơ bản: box-sizing, font toàn bộ website,...
- PS cơ bản
- Tách ảnh để sử dụng vào Design
Khai báo những màu sắc vào biến ở trong SASS _variables.scss
: màu sắc, font chữ, class chung, thiết lập code cơ bản
Sử dụng Photoshop lấy font -> tra trên gg font -> đưa vào _variables.scss
Sử dụng Photoshop đo khoảng cách -> đưa vào _variable.scss, thiết lập class trong _structure.scss
Những đoạn code sử dụng xuyên suốt trong project, img, a, font family, font size, đơn vị
/* _typography.scss */
html{
font-size: 62.5%;
}
/* _global.scss */
a{
text-decoration: none;
}
img{
display: block;
max-width: 100%;
}
body{
font-family: $primary-font;
line-height: 1;
color: $title-color;
}
--> import
- Alt con mắt click chuột trái vào
- Image -> Trim
- C1 File -> Export -> Save for web (shift alt ctrl S) -> bấm jpeg, Maximum
- C2 chuột phải -> Quick Export of PNG