Top 5 CSS Framework phổ biến mà bạn cần lưu ý

Nhật Linh

Các CSS Framework ngày nay dần trở nên phổ biến hơn và thật khó tưởng tượng một trang web không sử dụng CSS Framework. Cũng như tất cả các công cụ phát triển, CSS framework đang trong quá trình phát triển và cải tiến liên tục, do đó chúng tôi khuyên bạn nên nắm bắt theo xu hướng hiện đại.

Để giúp bạn dễ dàng theo kịp, Quản Trị Mạng đưa ra Top 5 CSS Framework phổ biến mà bạn có thể sẽ quan tâm. Mời các bạn tham khảo!

1. Bootstrap

Framework này là một trong những “ngôi sao” trên GitHub và được xem là CSS framework có độ tương thích tốt nhất. Được thiết kế dành cho các lập trình viên front-end, nó giúp xây dựng các khái niệm trong thiết kế web, các dự án đầu tiên trên mobile, grid systems (phương pháp sắp đặt các thành phần HTML theo dạng lưới dựa trên CSS), typography, các nút và…

Bootstrap không có bất kỳ tính năng mở rộng nào nhưng có những tính năng bổ sung sẵn có từ bên thứ ba và ngoài các phần tử HTML (HTML element) thông thường, Bootstrap cũng có các UI element (phần tử giao diện người dùng) phổ biến khác. Tính năng cơ bản của nó là RWD (Responsive Web Design - thiết kế trang web hiển thị tương thích với mọi kích thước thiết bị) và thiết kế mobile first (di động trước tiên).

Phiên bản Bootstrap 3 hỗ trợ nhiều trình duyệt (đây là phiên bản mới nhất của họ) và vì Bootstrap 2 đã hỗ trợ responsive web design (tạm dịch: “thiết kế web có độ phản hồi cao”). Phiên bản Bootstrap 4 hiện đang được phát triển.

Xem thư viện Pen Bootstrap của Dash Bouquet (@dashbouquetdevelopment) trên CodePen hoặc xem thử code bên dưới:

HTML:

<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
 <link rel="stylesheet" href="https://rawgit.com/LeshikJanz/libraries/master/Bootstrap/baguetteBox.min.css">
 
 <title>Freebie: 4 Bootstrap Gallery Templates</title>
</head>
<body>
<div class="container gallery-container">
 <h1>Bootstrap 3 Gallery</h1>
 <p class="page-description text-center">Fluid Layout With Overlay Effect</p>
 
 <div class="tz-gallery">
 <div class="row">
 <div class="col-sm-12 col-md-4">
 <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="Bridge">
 </a>
 </div>
 <div class="col-sm-6 col-md-4">
 <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" alt="Park">
 </a>
 </div>
 <div class="col-sm-6 col-md-4">
 <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/tunnel.jpg">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/tunnel.jpg" alt="Tunnel">
 </a>
 </div>
 <div class="col-sm-12 col-md-8">
 <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/traffic.jpg">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/traffic.jpg" alt="Traffic">
 </a>
 </div>
 <div class="col-sm-6 col-md-4">
 <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/rails.jpg">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/rails.jpg" alt="Coast">
 </a>
 </div> 
 <div class="col-sm-6 col-md-4">
 <a class="lightbox" href="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/coast.jpg">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/coast.jpg" alt="Rails">
 </a>
 </div>
 </div>
 </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
 baguetteBox.run('.tz-gallery');
</script>
</body>
</html>

CSS:

body {
 background-color: #434c50;
 min-height: 100vh;
 font: normal 16px sans-serif;
 padding: 40px 0;
}
.container.gallery-container {
 background-color: #fff;
 color: #35373a;
 min-height: 100vh;
 padding: 30px 50px;
}
.gallery-container h1 {
 text-align: center;
 margin-top: 50px;
 font-family: 'Droid Sans', sans-serif;
 font-weight: bold;
}
.gallery-container p.page-description {
 text-align: center;
 margin: 25px auto;
 font-size: 18px;
 color: #999;
}
.tz-gallery {
 padding: 40px;
}
/* Override bootstrap column paddings */
.tz-gallery .row > div {
 padding: 2px;
}
.tz-gallery .lightbox img {
 width: 100%;
 border-radius: 0;
 position: relative;
}
.tz-gallery .lightbox:before {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -13px;
 margin-left: -13px;
 opacity: 0;
 color: #fff;
 font-size: 26px;
 font-family: 'Glyphicons Halflings';
 content: '\e003';
 pointer-events: none;
 z-index: 9000;
 transition: 0.4s;
}
.tz-gallery .lightbox:after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 background-color: rgba(46, 132, 206, 0.7);
 content: '';
 transition: 0.4s;
}
.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
 opacity: 1;
}
.baguetteBox-button {
 background-color: transparent !important;
}
@media(max-width: 768px) {
 body {
 padding: 0;
 }
}

Kết quả:

Bootstrap 3 Gallery

Fluid Layout With Overlay Effect

Bootstrap 3 Gallery - 1

Bootstrap 3 Gallery - 2

Bootstrap 3 Gallery -3

Bootstrap 3 Gallery - 4

Bootstrap 3 Gallery - 5

Bootstrap 3 Gallery - 6

Kết luận: Bootstrap tuy rất phổ biến nhưng nó có thể không tốt hơn khi so với các framework khác. Tuy nhiên, phần lớn mọi người sử dụng nó là do sự nổi tiếng và do có rất nhiều nguồn tài nguyên có sẵn (như hướng dẫn, các plugin bổ sung,...) giúp làm việc với Bootstrap dễ dàng hơn.

2. Foundation

Foundation là một dự án mã nguồn mở và là một trong những đối thủ “nặng ký” trong thế giới các CSS framework. Nó nổi tiếng bởi vô cùng "mượt", độ tương thích cao và có thể sử dụng cho nhiều mục đích: xây dựng trang web, tạo mẫu email, xây dựng mobile app và web app.

Framework này cũng rất thân thiện với người dùng vì nó cung cấp đào tạo, hỗ trợ và tư vấn. Nó có một số thành phần độc đáo (Keystrokes, Joyride, Flex Video,…) và một số add-on. Ngoài RWD và mobile first, tính năng cơ bản của nó bao gồm cả phần tử semantic.

Xem ví dụ về Pen Foundation bởi Dash Bouquet (@dashbouquetdevelopment) trên CodePen hoặc xem thử code bên dưới:

HTML:

<div style="width: 100%; text-align: center">
 <h1>Custom search bar using Zurb Foundation</h1>
<input type="search" name="search" placeholder="Search.." class="animated-search-form">
</div>

CSS:

body {
 padding: 0 20%;
}
.animated-search-form[type=search] {
 width: 10rem;
 border: 0.125rem solid #e6e6e6;
 box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.18);
 border-radius: 0;
 background-image: url("//image.ibb.co/i7NbrQ/search_icon_15.png");
 background-position: 0.625rem 0.625rem;
 background-repeat: no-repeat;
 padding: 0.75rem 1.25rem 0.75rem 2rem;
 transition: width 0.4s ease-in-out;
}
.animated-search-form[type=search]:focus {
 width: 100%;
}

Kết luận: Foundation đã tuyên bố rằng họ có quy trình làm việc hoàn hảo và hỗ trợ tuyệt vời cho các nhà phát triển. Đây là một framework chuyên nghiệp với nhiều hướng dẫn có sẵn, bạn có thể học sử dụng Foundation ngay lập tức.

3. Bulma

Bulma là một open source (mã nguồn mở) và framework miễn phí rất tốt về mặt tiết kiệm thời gian, công sức và ngày càng trở nên phổ biến, bởi nó rất đơn giản để học và sử dụng.

Thứ nhất, Bulma chứa các UI component tuyệt vời như tab, navigation bar (thanh điều hướng), box, panel và hơn thế, framework này được thiết kế để cung cấp cho bạn một giao diện người dùng rõ ràng và hấp dẫn. Thứ hai, Bulma cực kỳ đơn giản, bạn chỉ cần nhập vào những tính năng cần thiết để có thể bắt đầu công việc của mình. Cuối cùng, framework này có các class dễ đọc, một lợi thế rất lớn cho một số nhà phát triển.

Xem ví dụ Pen Bulma của Dash Bouquet (@dashbouquetdevelopment) trên CodePen hoặc xem code bên dưới:

HTML:

<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
 <a class="navbar-item">
 <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
 </a>
 <div class="navbar-item has-dropdown is-hoverable">
 <a class="navbar-link">
 Docs
 </a>
 <div class="navbar-dropdown is-boxed">
 <a class="navbar-item">
 Overview
 </a>
 <a class="navbar-item">
 Elements
 </a>
 <a class="navbar-item">
 Components
 </a>
 <hr class="navbar-divider">
 <div class="navbar-item">
 Version 0.6.0
 </div>
 </div>
 </div>
</nav>
<section class="hero">
 <div class="hero-body">
 <p class="title">
 Example of Bulma navigation bar
 </p>
 </div>
</section>

Kết luận: Bulma dễ hiểu và dễ sử dụng, đồng thời sở hữu tất cả các tính năng cần thiết giúp bạn tạo ra các sản phẩm tuyệt vời và hiệu quả.

4. Ulkit

Mặc dù Ulkit không được nhiều người biết đến và sử dụng nhưng framework này có chức năng giống các framework tương tự khác và chắc chắn bạn nên chú ý.

Framework này nhẹ, linh hoạt và được sử dụng để tạo các giao diện web nhanh nhưng mạnh mẽ. Về cơ bản, Ulkit là một bộ sưu tập các component dễ dàng tùy biến, nó có HTML Editor, Flex, các tiện ích khác và các component độc đáo. Tính năng cơ bản của nó là RWD và mobile first. Ulkit được sử dụng rộng rãi trong rất nhiều WordPress theme.

Xem ví dụ của Pen Ulkit bởi Dash Bouquet (@dashbouquetdevelopment) trên CodePen hoặc xem code bên dưới:

<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-match uk-grid-small" style="display: flex; flex-wrap: wrap;" uk-grid>
 <div class="uk-text-center">
 <div class="uk-inline-clip uk-transition-toggle">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
 <div class="uk-transition-fade uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">
 <p class="uk-h4 uk-margin-remove">Fade</p>
 </div>
 </div>
 <p class="uk-margin-small-top">Fade</p>
 </div>
 <div class="uk-text-center">
 <div class="uk-inline-clip uk-transition-toggle">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
 <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default">
 <p class="uk-h4 uk-margin-remove">Bottom</p>
 </div>
 </div>
 <p class="uk-margin-small-top">Bottom</p>
 </div>
 <div class="uk-text-center">
 <div class="uk-inline-clip uk-transition-toggle">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
 <img class="uk-transition-scale-up uk-position-cover" src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" alt="">
 </div>
 <p class="uk-margin-small-top">2 Images</p>
 </div>
 <div class="uk-text-center">
 <div class="uk-inline-clip uk-transition-toggle">
 <img class="uk-transition-scale-up uk-transition-opaque" src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
 </div>
 <p class="uk-margin-small-top">Scale Up Image</p>
 </div>
 <div class="uk-text-center">
 <div class="uk-inline-clip uk-transition-toggle uk-light">
 <img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" alt="">
 <div class="uk-position-center">
 <div class="uk-transition-slide-top-small"><h4 class="uk-margin-remove">Headline</h4></div>
 <div class="uk-transition-slide-bottom-small"><h4 class="uk-margin-remove">Subheadline</h4></div>
 </div>
 </div>
 <p class="uk-margin-small-top">Small Top + Bottom</p>
 </div>
</div>

Kết luận: Framework này cho phép bạn có một cơ chế linh hoạt để tuỳ biến và có thể hữu ích tùy thuộc vào yêu cầu của bạn.

5. Semantic UI

Như tên gọi, Semantic UI nhằm mục đích làm cho quá trình xây dựng trang web trở nên semantic hơn. Tính năng cơ bản của nó là sử dụng ngôn ngữ tự nhiên, do đó làm cho code dễ đọc và dễ hiểu hơn.

Nguyên tắc cốt lõi của nó là sự mâu thuẫn, ngữ nghĩa và dễ điều khiển. Framework này xử lý các từ và các lớp như thành phần có thể trao đổi và nổi bật với JS trực quan và gỡ lỗi đơn giản.

Semantic là một framework cực kỳ sáng tạo và đầy đủ tính năng nhất của một Front-End Framework còn lại trong danh sách này. Từ cách lập cấu trúc dự án, cấu trúc code đến đặt tên hàm, login code và độ sạch của code tất cả đều làm rất tốt.

Semantic UI thực tế cung cấp tài liệu tổ chức tốt và một trang web có hướng dẫn về cách bắt đầu hoạt động. Tóm lại, Semantic UI có hơn 3.000 biến chủ đề, hơn 50 thành phần giao diện người dùng và hơn 5.000 cam kết. Chắc chắn đáng thử!

Xem ví dụ Pen Semantic-UI bởi Dash Bouquet (@dashbouquetdevelopment) trên CodePen hoặc xem thử code bên dưới:

HTML:

<div style="display: flex; flex-direction: column;">
 <div style="display: flex; flex-wrap: wrap;">
 <button class="ui button" role="button" onclick={handleHide()}>Hide</button>
 <button class="ui button" role="button" onclick={handleFlip()}>Flip</button>
 <button class="ui button" role="button" onclick={handleScale()}>Scale</button>
 <button class="ui button" role="button" onclick={handleFadeUp()}>Fade</button>
 <button class="ui button" role="button" onclick={handleLooping()}>Looping</button>
 <button class="ui button" role="button" onclick={handleStop()}>Stop Looping</button>
 </div> 
 <img style="max-height: 250px; max-width: 200px;" class="ui green leaf image transition visible" src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Ulkit%20example/rose.png" />
 </div>

JavaScript:

function handleFlip() {
$('.green.leaf')
 .transition('horizontal flip', '500ms')
 .transition('horizontal flip', '500ms')
}
function handleHide() {
$('.green.leaf')
 // default everything
 .transition()
}
function handleScale() {
$('.green.leaf')
 // default everything
 .transition({
 animation : 'scale',
 duration : '2s'
 })}
function handleFadeUp() {
$('.green.leaf')
 // fade up out is used if available
 .transition({
 animation : 'fade up',
 duration : '2s'
 })
}
function handleLooping() {
$('.green.leaf')
 .transition('set looping')
 .transition('bounce', '2000ms')
}
function handleStop() {
$('.green.leaf')
 .transition('remove looping')
}

Kết luận: Lựa chọn tốt dành cho những ai muốn tạo một trang web đẹp và tương thích trên mọi kích thước.

Tổng kết

Trên đây là 5 framework CSS hàng đầu mà chúng tôi thấy đáng để sử dụng và trải nghiệm. Hãy nhận xét dưới phần bình luận nếu bạn đã thử chúng hoặc muốn đề xuất một cái gì đó khác.

Tham khảo thêm một số bài viết:

Chúc các bạn vui vẻ!

Thứ Năm, 26/07/2018 10:08

4,4 ★ 7 👨 2.353