Blog

Viết CSS cho giao diện Mobile-first – phần 1

Sau khi đã có một bản giao diện HTML cơ bản hoàn chỉnh mà chúng ta đã làm ở phần 4, thì ở phần này chúng ta sẽ bắt đầu làm bước khá quan trọng đó là viết CSS cho giao diện để nó ra giao diện mà chúng ta đã vẽ trên Photoshop.

Trong kế hoạch xây dựng theme lần này chúng ta sẽ làm một Responsive Theme, nghĩa là nó hỗ trợ các cấu trúc giao diện riêng trên các thiết bị di động như điện thoại hay máy tính bảng.

Để làm một giao diện Responsive thì chúng ta cũng có nhiều cách, nhưng trong serie này mình sẽ hướng dẫn bạn làm theo phương thức Mobile-first, tức là chúng ta sẽ viết CSS tập trung cho giao diện điện thoại trước và sau đó là tới máy tính bảng, cuối cùng mới đến Desktop.

 

Mobile-first là như thế nào?

Như mình nói ở trên, Mobile-first nghĩa là chúng ta sẽ tập trung cho các thiết bị di động trước và sau đó thì mới đến giao diện dành cho Desktop. Về mặt kỹ thuật, thì chúng ta làm các bước sau đây:

  1. Viết CSS cho các phần tử tổng thể, các phần tử này sẽ không bao giờ thay đổi dù ở giao diện di động hay desktop (màu font chữ, background,..).
  2. Viết giao diện cho mobile.
  3. Viết giao diện cho máy tính bảng.
  4. Viết giao diện cho Desktop.

Như các bạn đã biết, để làm một giao diện Responsive thì chúng ta sẽ sử dụng @media screen (max-width: xx px), Nhưng đối với mobile-first, chúng ta sẽ không sử dụng max-width mà sẽ là min-width. Chúng ta luôn bắt đầu với giao diện trên mobile trước, sau đó chúng ta sẽ viết giao diện CSS cho Desktop đè lên đó. Mà thực ra cũng không phải đè lên nữa, chúng ta chỉ là viết thêm CSS cho giao diện desktop. Về lợi ích, thì trước mắt mình nhận thấy có một số lợi ích sau nếu bạn dùng mobile-first:

  • Giao diện trên mobile của website sẽ chuẩn hơn vì được đầu tư kỹ ban đầu.
  • Ở mọi kích thước, nó luôn hiển thị tốt.
  • Giảm thiểu khả năng trình duyệt di động phải load trước các style CSS không cần thiết.
  • Dễ fix lỗi và nâng cấp giao diện di động sau này.
  • Quy trình làm giao diện Responsive đơn giản hơn thay vì phải cặm cụi ngồi viết đè CSS như trước kia.

Đó là một số lợi ích trước mắt, còn bất lợi của nó thì nếu bạn mới bắt đầu thì có thể hơi bị rối do việc phải tìm ra một số phần tử sử dụng trên cả giao diện mobile và desktop. Thôi, mình tạm giải thích tới đây, nếu bạn cần hiểu hơn về khái niệm này thì có thể search các bài tiếng Anh trên mạng để đọc thêm về nó nhé.

Bạn cần chuẩn bị

Trước khi bắt đầu, mình xin nhắc lại qua về các công cụ mà mình sẽ sử dụng riêng trong phần viết CSS này:

Vì sao mình lại sử dụng em và % thay cho px

Pixel (px) là một đơn vị cố định theo chuẩn chung dành cho tất cả các sản phẩm số. Ví dụ nếu font chữ của website có size là 16px thì khi bạn xem trên di động hay xem trên desktop thì kích thước của nó hoàn toàn không thay đổi. Nghĩa là nếu bạn nhìn thấy nó nhỏ trên trình duyệt desktop nhưng chưa chắc nó đã nhỏ ở trình duyệt di động.

Khi thiết kế giao diện Responsive, chúng ta sẽ không bao giờ nên sử dụng đơn vị px mà hãy sử dụng đơn vị em và %.

Đơn vị em

Đây là đơn vị không cố định và sẽ thay đổi tùy theo kích thước font chữ mà một phần tử mẹ chứa nó đang có. 1em tương đương với kích thước font chữ của thành phần mẹ nó. Về mặc định, 1em sẽ bằng 100%, tương đương với 16px và 12pt.

Thường thì chúng ta sẽ sử dụng em cho size chữ, margin, padding, min-width, max-width.

Đơn vị %

Đơn vị % là đơn vị mà nó sẽ tính tỷ lệ % được sử dụng dựa trên tổng kích thước giao diện trên trình duyệt. Khi xây dựng các cột trong website mà muốn nó hiển thị responsive thật tốt thì chúng ta phải sử dụng đơn vị này.

Ví dụ, chúng ta có .div1 với width: 50% và .div2 với width: 50%. Thì lúc này, dù kích thước màn hình trình duyệt của bạn là bao nhiêu thì 2 thẻ div này vẫn có kích thước bằng nhau.

Website tính đơn vị em: http://pxtoem.com/

Cài đặt công cụ Viewport Resizer

Khi làm việc với giao diện Responsive, chúng ta sẽ cần liên tục thay đổi kích thước trình duyệt để xem thành quả của mình, nhưng cách đó sẽ không tối ưu lắm.

Vì vậy cách tốt nhất là bạn hãy vào website http://lab.maltewassermann.com/viewport-resizer/ để cài đặt Viewport Resizer lên trình duyệt. Cách cài cũng khá đơn giản, bạn chỉ cần kéo nút màu xanh lên thanh bookmark của trình duyệt.

Cài đặt Viewport ResizerBây giờ bạn muốn kiểm tra trang nào dưới nhiều kích thước trình duyệt khác nhau thì chỉ cần truy cập vào website và sau đó ấn vào nút bookmark Resizer là xong. Lưu ý là nó chỉ có tác dụng với trang nào có thẻ meta viewport ở thẻ head.

Thiết lập project trước khi viết CSS

Qua một đống các khái niệm mình cần bạn biết thì bây giờ chúng ta đã có thể tiến hành vào công việc khá quan trọng để bắt đầu đó là thiết lập project mà chúng ta đang định làm.

Để bắt đầu, thì đầu tiên bạn mở phần mềm Prepros lên và thêm project với thư mục giao diện html mà bạn đã làm ở phần 4

Thêm project cho PreprosLúc này tất cả các file LESS trong thư mục sẽ được tự động biên dịch mỗi khi bạn ấn lưu trong editor. Bây giờ chúng ta ko cần đụng vào nó nữa, hãy ẩn nó xuống bằng cách ấn nút Minimize.

Hãy mở file index.html lên và thêm đoạn này vào bên trong cặp thẻ head.

1
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><!--Bật Responsive-->

Tiếp tục, hãy tạo thêm thư mục css trong thư mục giao diện cũ, sau đó tạo thêm 3 file bao gồm

  • mobile.less
  • tablet.less
  • desktop.less

Tạo 3 files LESS cho từng trình duyệtVề ý nghĩa, thì chúng ta sẽ cho mỗi đoạn code tương ứng trên mỗi loại màn hình một file CSS riêng cho dễ chỉnh sửa sau này. Tiếp theo, hãy chèn đoạn HTML này vào cặp thẻ

chen-css-responsive-head

Giải thích:

  • Khi kích thước trình duyệt có chiều rộng ít nhất là 18.750em thì nó sẽ load file mobile.css
  • Khi kích thước trình duyệt có chiều rộng ít nhất là 34.375em thì nó sẽ load file tablet.css
  • Khi kích thước trình duyệt có chiều rộng ít nhất là 48em thì nó sẽ load file desktop.css

Bạn cũng nên kiểm tra lại xem trong cặp <head> của bạn đã có thẻ nhúng file style.css vào chưa nhé, nếu chưa có thì chèn thêm vào như trong hình.

Đoạn code phần head

Chắc bạn sẽ phải hỏi, vì sao khi nãy chúng ta tạo file .less mà bây giờ thì chúng ta nhúng file .css? Đơn giản là file .css sẽ được tạo ra sau khi bạn save các file .less lại vì ta đang bật Prepros mà hehe. Bạn thử mở qua file desktop.less và ấn Ctrl+S để lưu thì sẽ thấy.

Bây giờ bạn có thể mở file index.html lên và thử thu nhỏ trình duyệt lại xem, mặc dù chúng ta chưa viết CSS gì nhưng nó đã tự động resize theo trình duyệt rồi. Đó là tác dụng của việc chèn cặp thẻ meta name=”viewport” phía trên.

Bắt đầu viết CSS giao diện Mobile-first

Sau khi thiết lập xong thì chúng ta có thể bước vào phần quan trọng nhất đó là viết CSS cho giao diện mobile-first mà chúng ta cần làm.

Khi làm việc với LESS hay các CSS Processor khác thì mình thường có một thói quen là thiết lập biến cho nó. Các biến này là những giá trị mà chúng ta sẽ thường xuyên sử dụng như màu sắc, kiểu chữ,….Bạn có thể thêm bất cứ biến gì bạn thích, nhưng ở đây mình chỉ thêm một vài biến. Hãy vào thư mục less_file và tạo thêm một file variables.less. Sau đó chèn đoạn code sau vào:

Các biến cần sử dụng thường xuyên
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*
 # Thiết lập các biến cần dùng thường xuyên
*/
/*--COLOR--*/
@color-background-black: #222222;
@color-background-gray: #e9eaed;
@color-text-link: #1e4684;
@color-text-link-hover: #e24116;
@color-text-topbar: #dfd23c;
/*--MISC--*/
.border-gray (@size) {
 border: @size solid #dddddd;
}
.button {
 color: #FFF;
 text-shadow: none;
 background-color: #F7902F;
 background-image: -moz-linear-gradient(top, #f7902f, #f27018);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F7902F), to(#F27018));
 background-image: -webkit-linear-gradient(top, #F7902F, #F27018);
 background-image: -o-linear-gradient(top, #f7902f, #f27018);
 background-image: linear-gradient(to bottom, #F7902F,#F27018);
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff7902f', endColorstr='#fff27018', GradientType=0);
 border-color: #F15D0A #ED4A04 #E93502;
 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

Các mã màu ở trong biến là mình lấy trong file Photoshop đó và có thể đổi lại nếu bạn thích. Bây giờ bạn mở file style.less lên và thêm đoạn code này vào đầu file.

1
2
3
@import 'less_file/grid.less';
@import 'less_file/variables.less';
@total-width: 100%;

2 dòng đầu tiên là chúng ta sẽ import các đoạn CSS có trong 2 file kia để có thể sử dụng. Đoạn thứ 3 là chúng ta đưa giao diện về dạng fluid. Sau này chúng ta muốn thu gọn phần nào thì dùng CSS thu lại.

Như mình đã nói ở đầu bài, quy trình đầu tiên của việc viết CSS theo xu hướng mobile-first là sẽ viết CSS cho các phần tử tổng thể để chúng ta có thể sử dụng nó trên mọi màn hình, tức là chúng ta sẽ viết nó vào file style.less. Đầu tiên bạn viết

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
/*
 # Trong đây chỉ là CSS của những thành phần cơ bản sử dụng mọi màn hình.
*/
/*------------------------------------------------------------------
*----------------Main Style----------------------------------------*/
body {
 font-size: 93.8%;
 line-height: 1.5em;
 background: @color-background-gray;
 font-family: Helvetica,Arial,sans-serif;
}
a {
 color: @color-text-link;
 text-decoration: none;
 &:hover {
  color: @color-text-link-hover;
 }
}

Sở dĩ mình đưa font-size về 93.8% thì đó là tips để chúng ta quy đổi về giá trị em với tỷ lệ 1em = 15px, dễ tính sau này. :D Cũng như mình đưa kiểu font, màu chữ và màu của link trên toàn giao diện. Bây giờ giao diện ta tạm có:

Viết CSS cho giao diện mobile-first

Tiếp tục, hãy viết thêm đoạn này để nếu đoạn văn bản của bạn có quá dài thì nó cũng không tràn ra khỏi khung cũng như không bị vỡ khung trên các trình duyệt IE.

1
2
3
*, *:before, *:after {
 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

Bây giờ bạn hãy nhìn file Photoshop và chúng ta có một số phần như sau mà sẽ sử dụng cho giao diện điện thoại lẫn giao diện desktop, như:

  • Màu nền của top-bar và màu chữ của nó.
  • Màu nền của header và màu chữ, màu link.
  • Màu nền của footer và màu chữ, màu link.
  • Style chữ cho phần sidebar.
  • Chia cột khung bài mới ở sidebar.
  • Khung .category-post.
  • Cái viền của khung .featured-post .box.
  • Khung search.
  • Khung đăng ký nhận bản tin.

Bây giờ ta bắt đầu từng phần một nhé.

Đầu tiên là cái .top-bar

CSS trang trí .top-bar
01
02
03
04
05
06
07
08
09
10
11
12
.top-bar {
        background: @color-text-link;
        width: 100%;
        margin: 0;
        color: #fff;
        padding: 0 15px;
        position: fixed;
        font-size: 0.9em;
        z-index: 1000;
        border-bottom: 1px solid #fff;
        a { color: @color-text-topbar; font-style: italic }
}

Bây giờ bạn kéo thanh cuộn thì cái top-bar đã đi theo do có thuộc tính position: fixed.

Kế tiếp là #header

CSS tổng thể cho phần header
01
02
03
04
05
06
07
08
09
10
11
#header {
        padding-top: 3em;
        background: @color-background-black;
        color: #fff;
        a {
                color: #fff;
                &:hover {
                        color: @color-text-link-hover;
                }
        }
}

Bây giờ tạm thời ta có

tổng thể phần header sau khi thêm CSS

Bây giờ là tới phần viền của từng bài viết trong .featured-post nhé.

Đoạn CSS trang trí khung bài nổi bật
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*--Featured Post--*/
.featured-post {
        margin-bottom: 1em;
        .box {
                padding: 0.299em;
                background: #fff;
                .border-gray(1px);
                .post {
                        position: relative;
                        .post-title {
                                background: fade(#000, 80%);
                                position: absolute;
                                bottom: -5.9%;
                                width: 100%;
                                padding: 0.3em 1em 0.3em 0.5em;
                                a {
                                        color: #fff;
                                        font-size: 0.9em;
                                }
                        }
                } //end .post
        } //end .box
}

Kết quả ta có

Viết CSS cho .featured-post

Đi xuống xíu nữa là chúng ta cần sửa lại kiểu và size chữ của phần .post-meta và kẻ khung cho phần .post-below nè, nhưng trước hết bạn hãy tải ảnh này và bỏ vào thư mục img.

Trang trí khu vực .content-main
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.content-main {
        .post {
                background: #fff;
                .post-meta {
                        font-style: italic;
                        margin: -1em 0 1em 0;
                }
                .post-exceprt {
                        font-size: 0.9em;
                }
                .post-below {
                        margin-top: 1em;
                        .row(12);
                        .facebook, .googleplus {
                                .column(3,12);
                        }
                        .more {
                                float: right !important;
                                .column(3);
                                a {
                                        font-weight: bold;
                                        background: url(img/read-more.png) no-repeat right;
                                        padding-right: 1.3em;
                                        color: #222;
                                        &:hover {
                                                color: @color-text-link;
                                        }
                                }
                        }
                }
        } //end .post
        .pagination {
                background: lighten(#ddd, 10%);
                color: lighten(#222, 25%);
                padding: 1em;
                font-size: 1.1em;
                font-weight: bolder;
                .border-gray(1px);
        } //end pagination
} //end .content-main

Ta có kết quả như….

theme-dev-phan-5-5

Bây giờ chúng ta xử 2 cái khung chia bài theo category luôn hen, các bạn viết ngay dưới //end pagination

Code CSS cho phần .category-content
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
.category-content {
        .column(12);
        h3 { text-align: center; font-size: 1.3em }
        .post-info {
                background: #fff;
                padding: 1em;
                .border-gray(1px);
                img { display: block; margin: 0 auto}
                h4 { font-size: 1.2em }
                ul { list-style: none; margin: 0; padding: 0 }
                li {
                        margin-left: 1em;
                        &:before {
                                content: "»";
                                margin-right: 5px;
                        }
                }
        }
} // end .category-content

Ta có 2 khung như sau

theme-dev-phan-5-6

Thế là xong phần content, bây giờ chúng ta nhảy qua trang trí phần sidebar nhé.

Trước tiên là cái form, hơi dài á nha.

Code CSS trang trí form tìm kiếm
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/*--Sidebar--*/
.sidebar {
        font-size: 0.9em;
        padding-top: 2em;
        clear: both;
        h4.widget-title {
                text-align: center;
                font-size: 1.3em;
        }
        .search {
                background: #fff;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                padding-top: 2px;
                position: relative;
                input { border: none }
                input {
                        padding: 0.5em;
                        width: 80%;
                        height: 42px;
                        &:focus { outline: none }
                }
                input {
                        position: absolute;
                        right: 2px;
                        -moz-box-shadow:inset 0px 1px 0px 0px #f5f5f5;
                        -webkit-box-shadow:inset 0px 1px 0px 0px #f5f5f5;
                        box-shadow:inset 0px 1px 0px 0px #f5f5f5;
                        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fafafa), color-stop(1, #ffffff) );
                        background:-moz-linear-gradient( center top, #fafafa 5%, #ffffff 100% );
                        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ffffff');
                        background-color:#fafafa;
                        -webkit-border-top-left-radius:4px;
                        -moz-border-radius-topleft:4px;
                        border-top-left-radius:4px;
                        -webkit-border-top-right-radius:4px;
                        -moz-border-radius-topright:4px;
                        border-top-right-radius:4px;
                        -webkit-border-bottom-right-radius:4px;
                        -moz-border-radius-bottomright:4px;
                        border-bottom-right-radius:4px;
                        -webkit-border-bottom-left-radius:4px;
                        -moz-border-radius-bottomleft:4px;
                        border-bottom-left-radius:4px;
                        text-indent:0px;
                        border:1px solid #ededed;
                        display:inline-block;
                        color:#8c8c8c;
                        font-family:Arial;
                        font-size:15px;
                        font-weight:bold;
                        font-style:normal;
                        height:40px;
                        line-height:40px;
                        width:57px;
                        text-decoration:none;
                        text-align:center;
                        &:hover {
                                background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #fafafa) );
                                background:-moz-linear-gradient( center top, #ffffff 5%, #fafafa 100% );
                                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa');
                                background-color:#ffffff;
                        }
                        &:active {
                                position:relative;
                                top:1px;
                        }
                }
        } //end .search
} //end .sidebar

Kết quả ta sẽ có như thế này, nhìn có khi còn gọn hơn bản mẫu :D

Trang trí khung tìm kiếm

Ráng lên nào, còn phần nữa chúng ta cần phải làm cho xong cái sidebar này đó là chia ra 2 cột hiển thị bài mới trên widget, nhân tiện viết một đoạn dành cho .ads luôn. Viết ngay phía dưới } //end .search nhé.

Code CSS trang trí .sidebar
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
.recent-post {
        ul {
                .row(12);
                list-style: none;
                padding: 0;
                li {
                        clear: both;
                        .post-thumbnail { .column(4); img { max-width: 100% } }
                        a { .column(8); font-weight: bold; }
                }
        }
} // end .recent-post
.ads {
        img { width: 100%; }
} //end .ads

Cuối cùng ta có…

theme-dev-phan-5-8

Cuối cùng, bạn viết cho #footer một đoạn ngắn thế này thôi là được.

Code CSS cho #footer
1
2
3
4
5
6
7
/*--Footer--*/
#footer {
        background: @color-background-black;
        color: #fff;
        font-size: 0.8em;
        padding: 0.3em 1.5em;
}

Xong rồi đấy, bây giờ bạn đã có một giao diện nhìn rất chi là bựa phải không? Nhưng cứ yên tâm là chúng ta sẽ tiếp tục sửa lại cho từng loại kích thước màn hình để nó trở nên đẹp mắt và đầy đủ hơn.

Tải source đầy đủ

Ở phần tiếp theo, mình sẽ hướng dẫn bạn viết giao diện cho mobile đạt chuẩn nhé. Bây giờ thì mình phải tạm dừng vì bài khá dài rồi. :D

Posted in: Web design

Leave a Comment (0) ↓

Leave a Comment

*