Giới thiệu
Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng. Cái này nó như 1 dạng template có code sẵn mọi người có thể tham khảo rút ngắn được thời gian code Frontend.
UI component & layout
Ưu điểm của CSS layout :
- Không liên quan ảnh hưởng 1 chút gì tới style đang có sẵn
- Không cần framework
- Làm bằng CSS đơn giản nhất vì vậy không có bug
- Dùng được với những CSS mới nhất ví dụ như Flexbox
- Có ví dụ thực tế
- Có thể dùng miễn phí bằng MITライセンス
Ưu điểm của Patterns -CSS Layout
- Sử dụng code từ demo
- Ở button phía trên bên phải có thể chuyển đổi qua lại được từ source code và demo
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 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- Column --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span> <span class="token attr-value"> <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span> <span class="token attr-value"> <span class="token comment">/* Space between columns */</span></span> <span class="token attr-value"> <span class="token property">margin</span><span class="token punctuation">:</span> 0 8px<span class="token punctuation">;</span></span> <span class="token attr-value"> </span> <span class="token attr-value"> <span class="token comment">/* Layout each column */</span></span> <span class="token attr-value"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span></span> <span class="token attr-value"> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span></span> <span class="token attr-value"> </span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- Cover --></span> ... <span class="token comment"><!-- Content --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span> <span class="token attr-value"> <span class="token comment">/* Take available height */</span></span> <span class="token attr-value"> <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span> <span class="token attr-value"> </span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- Button sticks to the bottom --></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- Repeat with other columns --></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span> <span class="token attr-value"> <span class="token comment">/* Background color */</span></span> <span class="token attr-value"> <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span></span> <span class="token attr-value"> <span class="token comment">/* Stick to the top */</span></span> <span class="token attr-value"> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span></span> <span class="token attr-value"> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span> <span class="token attr-value"> <span class="token comment">/* Displayed on top of other rows when scrolling */</span></span> <span class="token attr-value"> <span class="token property">z-index</span><span class="token punctuation">:</span> 9999<span class="token punctuation">;</span></span> <span class="token attr-value"> </span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token comment"><!-- Repeat other header column ... --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> |
Lời kết
Với những layout và UI component có sẵn các bạn có thể copy/ pase tham khảo sẽ rút ngắn được nhiều thời gian cho việc viết giao diện của mình, hi vọng sẽ giúp ích cho các bạn trong công việc, nâng cao hiệu suất và tiết kiệm được nhiều thời gian.