TIN TỨC
Viết responsive web với Skeleton
 

Trong thời đại ngày nay, nhu cầu truy cập và sử dụng web ngày càng gia tăng, người dùng không chỉ lên web bằng máy tính thông thường mà còn sử dụng các thiết bị di động như điện thoại, máy tính bảng,… ngay cả những chiếc Tivi ngày nay cũng có thể phục vụ nhu cầu truy cập web của người dùng.

Để tạo được những website có thể đáp ứng được việc hiển thị tốt trên mọi thiết bị thì chúng ta có một kĩ thuật gọi là Responsive Web Design (tạm dịch là Thiết kế web tự phản hồi).

Có rất nhiều framework miễn phí và mạnh mẽ để giúp ta viết web responsive một cách dễ dàng, nổi bật là Bootstrap của Twitter và Foundation của Zurb. Tuy 2 framework nói trên có nhiều tiện ích và shortcuts để giúp ta làm web responsive dễ dàng, nhưng chúng lại đòi hỏi quá trình học hỏi và nghiên cứu khá lâu, muốn làm chủ được Bootstrap hay Foundation thì thật sự không phải là chuyện của một, hai tuần. Và cũng không phải trang web nào cần responsive cũng sẽ dùng hết những tính năng đó.

img1-1

Hôm nay, mình xin giới thiệu với các bạn về Skeleton, đây là một responsive framework được phát triển bởi một anh chàng tên là Dave Magache trên Github. Skeleton là một framework khá hay dành cho những bạn mới học về responsive web design, tuy không có nhiều tiện ích như Bootstrap hay Foundation nhưng Skeleton rất nhẹ và đặc biệt là cực kì dễ học và sử dụng.

Tại sao lại chọn Skeleton?

Câu trả lời là nhẹ, cực kì nhẹ, chỉ cần sử dụng một file có dung lượng xấp xỉ 20 KB là bạn đã có thể viết responsive web, tuy không có nhiều tiện ích, nhiều class này nọ như trên Bootstrap nhưng hệ thống grid và số class có sẵn đã đủ để bạn tự làm một web responsive. Không những thế, Skeleton còn cực kì dễ học, dễ thao tác, dễ tiếp cận, dễ chỉnh sửa, nếu có thuộc tính nào bị tích hợp sẵn vào Skeleton mà bạn không thích thì chỉ cần mở file skeleton.css ra và chỉnh sửa thuộc tính đó là xong.

Skeleton hỗ trợ hầu hết mọi trình duyệt hiện đại của thời nay như Chrome, Safari, Firefox, Opera, IE, Microsoft Edge,…

Cách cài đặt Skeleton

Để sử dụng Skeleton thì bạn không cần phải cài đặt gì cả, bạn chỉ cần vào link này, nhấn nút Download để tải Skeleton về, khi tải về bạn sẽ có 2 file, hãy đặt file có tên skeleton.css vào một nơi nào đó trong folder chứa website của bạn, dẫn đường link trong file HTML đến skeleton.css như cách mà bạn dẫn link đến file css.

  
// Các bạn nên lưu ý ghi đường dẫn đúng khi link đến file, đây chỉ là ví dụ.

Và… xong! Bạn đã có một môi trường để học và viết Skeleton.

Giới thiệu sơ lược về Skeleton

Skeleton sử dụng font chính là Raleway, đây là một font chữ khá phổ biến được phát triển bởi Google. Do là một framework hướng đến sự đơn giản nên phong cách thiết kế của Skeleton cũng rất đơn giản, không cầu kì, tông màu chính là đen, xanh dương và trắng (Đương nhiên là có thể chỉnh sửa được).

Hệ thống Grid

Để làm responsive web thì người ta cần đến một thứ gọi là grid, đây là hệ thống được sử dụng ở khá nhiều ở các framework responsive.

img2

Nói một cách đơn giản thì Grid như một cái khung gồm nhiều dòng, mỗi dòng có tối đa 12 cột, khi đạt đến một kích thước màn hình nhất định thì các dòng này sẽ tự động xuống hàng hay tự thay đổi cách hiển thị tùy theo cách thiết kế cột của bạn.

  
<div class="container">

  
  <div class="row">
    <div class="one column">Onediv>
    <div class="eleven columns">Elevendiv>
  div>

  
  <div class="row">
    <div class="one-third column">1/3div>
    <div class="two-thirds column">2/3div>
  div>

  
  <div class="row">
    <div class="one-half column">1/2div>
    <div class="one-half column">1/2div>
  div>

div>

 
Cách phân chia cho nhiều thiết bị

Skeleton sử dụng hệ thống grid của mình để tạo phản hồi trên nhiều thiết bị khác nhau, tuy nhiên bạn cũng có thể thay đổi thuộc tính của các thành phần HTML nhất định bằng các thuộc tính @media trong css.

img3

Do Skeleton là framework hướng đến sự ưu tiên dành cho di động, nên các @media này sẽ lấy giá trị của độ rộng màn hình thấp nhất (min-width), nghĩa là từ các thiết bị có màn hình kích thước nhỏ đến lớn. Những thuộc tính ngoài @media sẽ được áp dụng trên mọi thiết bị, riêng trong các @media thì bạn có thể thay đổi thuộc tính của các thành phần trên các kích cỡ màn hình xác định.

Có vẻ khá khó hiểu, bạn xem đoạn code sau sẽ dễ hiểu hơn:

// Mobile first queries

// Lớn hơn điện thoại di động, thì ta sử dụng độ rộng là 400px
@media (min-width: 400px) {}

// Lớn hơn những chiếc 'phablet' thì độ rộng là 550px
@media (min-width: 550px) {}

// Lớn hơn những chiếc máy tính bảng thì độ rộng là 750px 
@media (min-width: 750px) {}

// Lớn hơn những chiếc máy tính (để bàn, laptop,...) thì độ rộng là 1000px
@media (min-width: 1000px) {}

// Còn nếu lớn hơn những chiếc máy tính có màn hình HD (như tivi, laptop 2K, 4K,... thì ta nâng độ rộng lên 1200px luôn 
@media (min-width: 1200px) {}

Với những kích cỡ màn hình xác định này thì việc tùy chỉnh các thành phần web sẽ trở nên dễ dàng hơn, bạn sẽ không lo web của mình bị ‘bể’ nữa :)

Một vài thành phần mặc định
  • ButtonCác nút Button trong Skeleton khá là đơn giản, bạn có thể khai báo tag button, hay nếu muốn button của bạn là một link (a) hay một input thì bạn chỉ cần thêm class button vào là được. Còn nếu muốn button của bạn có màu xanh thì thêm class button-primary là xong :) Rất dễ phải không nào?

img4-1

  • Danh sách (List)

List trong Skeleton thì cũng giống như trên HTML, bạn khai báo tag ul hay ol rồi thêm li,… tóm lại là y như bên HTML mà bạn thường làm :)img5-1

  • Table

Table trong Skeleton cũng đơn giản, không có border ở ngoài cùng, có khung code như sau:

img6-1

  • Các loại Form (khung điền thông tin)

Ở các framework khác thì việc tạo form đẹp và responsive có lẽ mất khá nhiều thời gian, nhưng trong Skeleton thì mọi việc đã được đơn giản hóa cho bạn, ví dụ:

  
  <div class="form-container"> 

  
          <div class="row form"> 

  
            <div class="six columns">
              <label for="emailAddress">Your emaillabel>
              <input type="email" placeholder="example@mail.com" id="emailAddress" class="u-full-width">
            div>

  
            <div class="six columns">
              <label for="reasonForContacting">Reason for contactinglabel>
              <select id="reasonForContacting" class="u-full-width">
                <option value="opt1">Questionsoption>
                <option value="opt2">Ask for images downloadingoption>
                <option value="opt3">Personal Messageoption>
              select>
            div>

  
          div>

  
          <label for="message">Messagelabel>
          <textarea name="message" cols="30" rows="10" class="u-full-width">textarea>

  
          <input type="submit" value="SUBMIT" class="button-primary">

  
        div>

Kết quả mình sẽ có một cái form hoàn chỉnh như thế này:img8

  • Chèn code vào trang

Để thực hiện việc chèn code thì bạn bao quanh tag một tag


, như sau:

img7-1

Kết luận

Skeleton rất hay, tuy không có nhiều tính năng vượt trội hay nổi bật, nhưng nó đáp ứng đủ nhu cầu làm web responsive của những doanh nghiệp nhỏ hay cá nhân, nên nếu bạn bè hay người thân của bạn muốn làm cái web responsive thì đây là một framework mà bạn nên sử dụng 😀

Ưu điểm:

  • Gọn, nhẹ, nhanh.
  • Dễ học, dễ thao tác.
  • Đơn giản, dễ chỉnh sửa.

Nhược điểm:

  • Ít tính năng, số class không phong phú.
  • Chưa thực sự hoàn thiện, còn trong giai đoạn phát triển. (Nhưng vẫn sử dụng được.)

Skeleton có hẳn một trang demo mà các bạn có thể tham khảo, ngoài ra mình cũng có tạo một demo khác trên GitHub, các bạn có thể tham khảo tại đây.

Skeleton khá là đơn giản, trên đây mình chỉ nếu một vài ví dụ điển hình, nếu muốn biết thêm chi tiết thì bạn có thể tham khảo thêm ở trang web chính của Skeleton.

*Một vài đoạn code đã được trích từ trang web chính của Skeleton.

Source: BundleBug

css framework responsive skeleton web