Các framework CSS ngày nay đang trở nên phổ biến và thành thật mà nói, thật khó tưởng tượng một trang web mà không sử dụng chúng sẽ như thế nào. Và vì tất cả các công cụ phát triển (development tool), framework CSS đang trong tình trạng 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 xu hướng hiện đại. Để giúp bạn dễ dàng theo kịp, chúng tôi đã đưa ra top 5 framework CSS phổ biến nhất năm 2017 mà bạn có thể sẽ muốn triển khai (trong trường hợp nếu bạn chưa sử dụng chúng).
1. Bootstrap
Framework này là một trong những “ngôi sao” trên GitHub và được xem là framework CSS có độ tương thích tốt nhất. Được thiết kế để phát triển cụ thể front-end, nó giúp xây dựng các concept trong thiết kế web, các dự án trên mobile đầu tiên, grid systems (hệ thống lưới), typography, các button và vân vân.
Bootstrap không có bất kỳ tính năng extra (thêm) nhưng có những tính năng bổ sung từ bên thứ ba và ngoài các HTML element thông thường Bootstrap cũng có các UI element phổ biến khác. Tính năng cơ bản của nó là RWD (Responsive Web Design) và mobile first.
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:
1
2
3
4
5
6
7
8
9
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
|
<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:
1
2
3
4
5
6
7
8
9
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
73
74
|
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
Kết luận: Bootstrap tuy rất phổ biến nhưng nó có thể không tốt hơn 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, vv) giúp việc làm 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 framework CSS. Nó nổi tiếng bởi vô cùng mượt, responsive (tương thích) và có thể được 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ì nó cung cấp training, hỗ trợ và tư vấn. Nó có một số component độc đáo (Keystrokes, Joyride, Flex Video, …) và một số add-on. Tính năng cơ bản của nó, ngoài RWD và mobile first, bao gồm cả semantic (giả sử nghĩa học).
Xem ví dụ về Pen Foundation bởi Dash Bouquet (@dashbouquetdevelopment) trên CodePen hoặc xem thử code bên dưới:
HTML:
1
2
3
4
|
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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 rất chuyên nghiệp với nhiều hướng dẫn có sẵn, bạn sẽ có thể học sử dụng Foundation ngay lập tức.
3. Bulma
Là một open source và framework miễn phí rất tốt về mặt tiết kiệm thời gian, công sức của bạn và ngày càng phổ biến, bởi vì 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ế nữa vì 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 import (nhập) vào những tính năng cần thiết và bạn có thể bắt đầu công việc của mình. Cuối cùng, framework này có các class rất dễ đọc, mà điều lại là 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<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 nó 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
Không được nhiều người biết (và sử dụng) nhưng framework này có chức năng giống như các framework tương tự khác và chắc chắn nên được 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ẽ. Ulkit về cơ bản là một bộ sưu tập của 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, mobile first và 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:
1
2
3
4
5
6
7
8
9
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
|
<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ư bạn có thể đoán dựa trên tên, Semantic UI nhằm mục đích làm cho quá trình xây dựng trang web trở nên semantic (ngữ nghĩa) hơn. Tính năng cơ bản của nó là sử dụng natural language (ngôn ngữ tự nhiên) do đó làm cho code dễ đọc, dễ hiểu hơ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 list của chúng ta. 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 thuộc làm rất tốt.
Xem ví dụ Pen Semantic-UI bởi Dash Bouquet (@dashbouquetdevelopment) trên CodePen hoặc xem thử code bên dưới:
HTML:
1
2
3
4
5
6
7
8
9
10
11
|
<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:
1
2
3
4
5
6
7
8
9
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
|
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 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
Đó là 5 framework CSS hàng đầu của chúng tôi mà tôi thấy thú vị đáng để sử dụng và trải nghiệm. Hãy nhận xét dưới comment nếu bạn đã thử chúng hoặc muốn đề xuất một cái gì đó khác.
xem thêm :học lập trình java ở đâu
No comments:
Post a Comment