Hướng dẫn skeleton css - bộ xương css

Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn. Cảm ơn bạn!ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Skeleton là một hiệu ứng được sử dụng khi đang load dữ liệu giúp cho trang web trở nên sinh động và mượt mà hơn, các trang web nổi tiếng cũng đang dùng phương pháp loading này để làm đẹp. Cùng mình tìm hiểu về cách làm hiệu ứng này qua video hướng dẫn nhé.

Chúc các bạn học tốt 😁

Đã đăng vào thg 5 12, 1:26 SA 3 phút đọc 3 phút đọc

Hiện nay có rất nhiều framework miễn phí mà mạnh mẽ để giúp ta viết web responsive một cách dễ dàng, nổi bật nhất chắc mọi người đều biết đấy là Bootstrap của Twitter và Foundation của Zurb. Tuy 2 framework nói trên có nhiều tiện ích nhưng nó lại đòi hỏi quá trình học và nghiên cứu khá lâu và cũng không phải trang web nào cũng dùng hết tính năng đó.

Chính vì vậy hôm nay mình xin giới thiệu với mọi người về Skeleton, đây là một framework được phát triển mớii Dave Magache. 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ư 2 framework trên nhưng nó lại rất nhẹ và đặc biệt cực kì dễ học và sử dụng.

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

• Dung lượng: Thật sự là nó rất nhẹ, chỉ cần sử dụng một file có dung lượng xấp xỉ 20kb là chúng ta có thể viết responsive web rồi.
• Nhanh chóng: Skeleton còn cực kì dễ học, dễ thao tác, dễ tiếp cận và dễ chỉnh sửa
• Hỗ trợ nhiều trình duyệt: Skeleton hỗ trợ hầu hết mọi trình duyệt như Chrome, Safari, Firefox, Opera, IE, Microsoft Edge,...

Cách cài đặt Skeleton

Để sử dụng Skeleton thì chúng ta không cần phải cài đặt gì cả, chỉ cần vào trang Skeleton và Download để tải về. Sau khi tải về sẽ có 2 file, chúng ta sẽ copy file có tên là skeleton.css vào trong thư mục website và dẫn đường link css vào trong file HTML.

Chỉ cần như vậy là chúng ta đã cài đặt xong một môi trường để thử nghiệm Skeleton rồi

Sơ lược về Skeleton

Skeleton sử dụng font chính là Raleway, đây mà 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ì.

Hệ thống Grid

Grid được sử dụng ở hầu hết các framework responsive. Grid là 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ị tuỳ theo cách thiết kế của chúng ta.

EX:

  

    
One
    
Eleven
  

  

    
Two
    
Ten
  

  

    
1/3
    
2/3
  
  
  

    
1/2
    
1/2
  

Kiểu chữ

Tất cả các size chữ được đặt bằng rem. Vì vậy kích thước phông chữ và các mối quan hệ không gian có thể được định kích thước tương ứng dưạ trên một thuộc tính kích thước phông chữ duy nhất. EX:EX:

Heading
Heading
Heading
Heading
Heading
Heading

Buttons

Buttons trong Skeleton có 2 loại cơ bản. .button cơ bản và .button-primary

EX:

Anchor button
Button element




Anchor button
Button element

Forms

Ở 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.

EX:

  

    

      Your email
      
    
    

      Reason for contacting
      
        Questions
        Admiration
        Can I get your number?
      
    
  
  Message
  
  
    
    Send a copy to yourself
  
  

Kết luận

Như vậy là chúng ta đã cùng nhau đi tìm hiểu về Skeleton rồi. Đến đây có lẽ mọi người cũng đã phần nào đánh giá được ưu, nhược điểm của framework này rồi.

Tài liệu: http://getskeleton.com/

All rights reserved