Nâng cao kiến thức CSS từ 50 bài viết hàng đầu trong năm 2019 (Phần 3)

Giới thiệu

Trong phần 2 của bài viết chúng ta đã cũng nhau khám phá những bài viết tiếp theo trong series Nâng cao kiến thức CSS từ 50 bài viết hàng đầu. Trong bài viết hôm nay chúng ta cùng nhau tìm hiểu tiếp nhé. Nếu bạn nào chưa xem phần 2 của series có thể xem tại

Nâng cao kiến thức CSS từ 50 bài viết hàng đầu trong năm 2019 (Phần 2)

Lesson

  1. How to get better at writing CSS?
  • Tìm hiểu cách viết mã CSS tốt hơn

  1. Pattern Library First: An Approach For Managing CSS.
  • Tìm hiểu các quản lý code CSS

  1. 4 CSS tricks I’ve learnt the hard way.
  • 4 thủ thuật CSS hữu ích

  1. One CSS Trick You Didn’t Know About!
  • CSS tips hữu ích có thể bạn chưa biết

User Interface

  1. Drawing Images with CSS Gradients
  • Tìm hiểu cách vẽ hình ảnh sử dụng CSS Gradients

  1. Learn Bulma in 5 minutes.
  • Tìm hiểu Bulma cơ bản trong 5 phút

Bulma là một Framework CSS đơn giản, hiện đại được 1 số lập trình viên ưa thích hơn Bootstrap. Bulma nhẹ hơn Boostrap và có thiết kế tốt hơn.

Setup

Cài đặt Bulma vô cùng dễ dàng, có nhiều cách khác nhau như sử dụng NPM, tải về trực tiếp từ trang Document hoặc sử dụng CDN. Ở đây ví dụ chúng ta sử dụng link CDN. Điều này sẽ cho phép chúng ta sử dụng các class của Bulma. Bulma - một tập hợp các class.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
Modifiers

Đầu tiên, chúng ta nên tìm hiểu về modifier class. Tính năng này cho phép chúng ta thay thế style của bất kỳ phần tử nào trong Bulma. Chúng bắt đầu với is-* hoặc has-*, thay thế * bằng style mà bạn muốn. Để hiểu khái niệm này, chúng ta xét ví dụ về Button sau:

<button class="button">Click here</button>

Để có 1 button với style chung bình thường chúng ta sử dụng class button như trên.

Như chúng ta có thể thấy đây là một thiết kế phẳng như bên trên. Để thay đổi style của Button trên chúng ta sử dụng Bulma modifiers. Ở đây chúng ta sẽ style cho Button lớn hơn với border-radius và màu xanh lá cây.

<button class="button **is-large is-success is-rounded**">Click here</button>

Chúng ta cũng có thể sử dụng modifier để kiểm soát trạng thái của Button. Chúng ta thêm class is-focused

Cuối cùng, chúng ta sử dụng has-* modifier. Chúng kiểm soát style bên trong phần tử. Ở đây chúng ta sẽ thêm class has-text-weight-bold

Ở đây, mình đưa ra 1 số ví dụ cơ bản. Các bạn có thể tìm hiểu sâu hơn tại Document của Bulma.

Columns

Hầu hết các Framework CSS đều có khái niệm columns để xây dựng Layout Website. Columns của Bulma dựa trên Flexbox do đó rất đơn giản để chúng ta kiểm soát Layout. Ví dụ dưới đây tạo 1 row với 4 column

<div class="columns">  
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth column</div>
</div>

Đầu tiên, chúng ta tạo container với thẻ div có class columns và các thẻ div con bên trong nó với class column.

Ở đây mình chỉ giới thiệu cơ bản về Framework Bulma. Bạn có thể lên trang Document của Bulma để tìm hiểu sâu hơn.

  1. CSS Border-Radius Can Do That? How to create very cool effects with a rarely used feature.
  • Tạo các hình khối sử dụng CSS Border-radius

  1. About making cards with CSS.
  • Tìm hiểu cách tạo thẻ card trong CSS

  1. Dark theme in a day: Using a bunch of modern CSS to create a night mode for an app.
  • Tìm hiểu cách tạo dark theme bằng CSS

  1. Having fun with link hover effects.
  • Tạo các hiệu ứng hover link sử dụng CSS

Kết luận

Như vậy trong phần 3 bài viết này mình đã giới thiệu với các bạn các bài viết hàng đầu hướng dẫn các kỹ thuật liên quan đến CSS. Hẹn gặp lại các bạn ở phần tiếp theo nhé.

Bài viết tham khảo: https://medium.mybridge.co/learn-css-from-top-50-articles-for-the-past-year-v-2019-4570d9da53c