Không chỉ làm lưới cung cấp một cảm giác nhịp điệu và nhất quán trong thiết kế, nhưng khi một cấu trúc lưới điện nổi tiếng được sử dụng nó cung cấp một ngôn ngữ thiết kế tập đơn giản cho việc cross-đội.
Flexboxgrid là một khuôn khổ mới cho phép bạn kết hợp các khả năng dự báo và phổ biến ngôn ngữ cấu trúc của một hệ thống mạng lưới với sự linh hoạt và đơn giản của flexbox. Hôm nay, chúng tôi sẽ đi bộ qua những điều cơ bản của việc sử dụng Flexboxgrid, và sử dụng nó để xây dựng một danh mục đầu tư trang Dribbble thức ăn đơn giản. Băt đâu học lap trinh php .
Bắt đầu với các Flexboxgrid CSS
Bước đầu tiên để bắt đầu với Flexboxgrid là để lấy CSS. Đối với phát triển, sử dụng phiên bản unminified.
Tiếp theo, chúng ta hãy nói một chút về cách Flexboxgrid hoạt động. Các tài liệu được bao gồm đầy đủ trên trang chủ tại Flexboxgrid.com, nhưng chúng tôi sẽ đi qua các điểm cao.
Cột Responsive
Flexboxgrid được xây dựng để hỗ trợ bốn breakpoint chính, tự ý đặt tên để tránh các vấn đề bảo trì breakpoint pixel cụ thể. Những breakpoint là bàn tay, đùi, bàn và bức tường, được đặt tên theo những gì được coi là độ rộng tay, đùi, bàn và tường khung nhìn (ví dụ: khi một thiết bị có khả năng tìm thấy chính nó). Các lớp cột tự được cấu trúc như thế này:
Flexboxgrid là một lưới mười hai cột, và sử dụng các cột phần trăm dựa trên kết hợp với sức mạnh của flexbox cho một mạng lưới vững chắc.
Lưu ý: Hỗ trợ trình duyệt cho flexbox vẫn chưa đầy đủ; Flexboxgrid không nên dựa vào các dự án đòi hỏi phải có đầy đủ thực hiện qua trình duyệt
Ví dụ Row
Lấy trực tiếp từ các tài liệu, đánh dấu cho một ví dụ sử dụng hàng Flexboxgrid trông giống như sau:
Cột tự động
Có một "tự động" cột chiều rộng có sẵn tại mỗi điểm dừng. Điều này làm cái gì khác so với một chiều rộng truyền thống: quy tắc tự động. Flexbox sẽ tự động điền vào các hàng phù hợp với các cột thậm chí có kích thước bất kể có bao nhiêu được đặt ở hàng.
>> Xem thêm: Khóa học lập trình android cơ bản nâng cao tại hà nội !
Ví dụ, trong ví dụ trên, các cột sẽ mất một phần ba từng.
Alignment
Có rất nhiều chi tiết có thể được thực hiện với Flexboxgrid, trong đó có sự liên kết của các cột của một hàng theo chiều ngang:
as well as vertically:
Flexboxgrid cũng lợi dụng các kỹ thuật sắp xếp lại dễ dàng Flexbox và các tùy chọn khoảng cách động, nhưng bây giờ chúng tôi sẽ di chuyển về phía trước với việc tạo lưới Dribbble của chúng tôi!
Dribbble Grid
Chúng tôi sẽ bắt đầu với một tài liệu HTML rỗng đơn giản, bao gồm jQuery và Normalize. Hãy sử dụng một cái gì đó giống như HTML5 Boilerplate với các công cụ như Modernizr, nhưng đối với dự án này, chúng tôi sẽ tiếp tục tập trung vào các hoạt Javascript, HTML, CSS và bạn cần phải viết cho mình.
Từ đây, chúng ta sẽ xây dựng ra các cấu trúc của HTML mà chúng ta muốn sử dụng, và sau đó chúng ta sẽ treo tất cả mọi thứ với các API Dribbble.
Grid Markup
Đầu tiên, hãy nói chúng tôi muốn thiết lập một mạng lưới mà bắt đầu ở mức tối thiểu của hai khối mỗi hàng ngang, và di chuyển lên đến sáu khối mỗi hàng tại breakpoint tường. Dưới đây là cách chúng tôi sẽ thực hiện điều đó:
column-6--hand ra lệnh rằng tại breakpoint tay (cho các thiết bị cầm trong tay) mỗi khối sẽ điền sáu trong số mười hai cột. Do đó chúng tôi sẽ có thể phù hợp với hai hình thu nhỏ Dribbble trên một hàng của bố trí của chúng tôi tại thời điểm này.
Tại các điểm dừng lap, column-4--lap ra lệnh rằng mỗi khối sẽ có bốn cột rộng, do đó chúng ta sẽ có thể để phù hợp với ba trên một hàng.
Nhiều Dynamic Markup
Hãy nói rằng chúng tôi muốn làm cho lưới năng động hơn một chút. Dưới đây là một ví dụ của một hàng bằng cách sử dụng lưới rộng tự động và độ rộng biến.
Lưu ý: trong các breakpoint tường, chúng tôi thực sự có một mạng lưới với năm qua; điều này sẽ không bình thường có thể xảy ra với một hệ thống lưới mười hai cột mà không lớp tùy biến thêm, như mười hai là không chia hết năm. Tuy nhiên, với Flexbox, chiều rộng cột có thể dễ dàng được tính toán tự động.
Mang trong Jribbble
Bây giờ chúng ta có một cấu trúc lưới điện tại chỗ, chúng ta hãy viết các mã cần thiết để mang lại trong nội dung Dribbble của chúng tôi. Chúng tôi sẽ sử dụng các plugin jQuery Jribbble. Bạn có thể lấy mã nguồn từ GitHub. Jribbble sẽ làm cho nó rất dễ dàng để kéo bức ảnh từ Dribbble.
Bao gồm Jribbble trong một tập tin JS riêng biệt, hoặc ở phía trên cùng của script.js của bạn. Dưới đây Jribbble, mã này sẽ mang lại bức ảnh mong muốn Dribbble của bạn.
Đầu tiên chúng ta quấn mã của chúng tôi trong một biểu hiện chức năng ngay lập tức được gọi, mà làm cho chắc chắn rằng chúng tôi bảo vệ phạm vi JavaScript của chúng tôi. Tiếp theo, chúng ta thiết lập ID cầu thủ của chúng tôi, và sau đó chúng tôi sử dụng Jribbble để mang lại trong bức ảnh của chúng tôi. Một khi chúng ta có bức ảnh của chúng tôi, chúng tôi xây dựng html bằng cách duyệt qua mỗi cú đánh, và điền vào một phần tử với class dribbble-shots với html đó.
Cấu trúc HTML của ta sẽ trông như thế này:
Lưu ý rằng chúng tôi cũng bao gồm một chữ Google.
Styling tối thiểu
Tiếp theo, chúng tôi sẽ cung cấp một số phong cách tối thiểu trong style.css:
Sản phẩm cuối cùng của bạn sẽ trông giống như sau:
Xem thêm: học photoshop cơ bản tại hà nội
Flexboxgrid là một khuôn khổ mới cho phép bạn kết hợp các khả năng dự báo và phổ biến ngôn ngữ cấu trúc của một hệ thống mạng lưới với sự linh hoạt và đơn giản của flexbox. Hôm nay, chúng tôi sẽ đi bộ qua những điều cơ bản của việc sử dụng Flexboxgrid, và sử dụng nó để xây dựng một danh mục đầu tư trang Dribbble thức ăn đơn giản. Băt đâu học lap trinh php .
Bắt đầu với các Flexboxgrid CSS
Bước đầu tiên để bắt đầu với Flexboxgrid là để lấy CSS. Đối với phát triển, sử dụng phiên bản unminified.
Tiếp theo, chúng ta hãy nói một chút về cách Flexboxgrid hoạt động. Các tài liệu được bao gồm đầy đủ trên trang chủ tại Flexboxgrid.com, nhưng chúng tôi sẽ đi qua các điểm cao.
Cột Responsive
Flexboxgrid được xây dựng để hỗ trợ bốn breakpoint chính, tự ý đặt tên để tránh các vấn đề bảo trì breakpoint pixel cụ thể. Những breakpoint là bàn tay, đùi, bàn và bức tường, được đặt tên theo những gì được coi là độ rộng tay, đùi, bàn và tường khung nhìn (ví dụ: khi một thiết bị có khả năng tìm thấy chính nó). Các lớp cột tự được cấu trúc như thế này:
Mã:
column-[number]--[breakpoint]
column-4--hand
column-auto--wallFlexboxgrid là một lưới mười hai cột, và sử dụng các cột phần trăm dựa trên kết hợp với sức mạnh của flexbox cho một mạng lưới vững chắc.
Lưu ý: Hỗ trợ trình duyệt cho flexbox vẫn chưa đầy đủ; Flexboxgrid không nên dựa vào các dự án đòi hỏi phải có đầy đủ thực hiện qua trình duyệt
Ví dụ Row
Lấy trực tiếp từ các tài liệu, đánh dấu cho một ví dụ sử dụng hàng Flexboxgrid trông giống như sau:
Mã:
<div class="row">
<div class="column-12--hand
column-8--lap
column-6--desk
column-4--wall">
<div class="box">Responsive</div>
</div>
</div>Cột tự động
Có một "tự động" cột chiều rộng có sẵn tại mỗi điểm dừng. Điều này làm cái gì khác so với một chiều rộng truyền thống: quy tắc tự động. Flexbox sẽ tự động điền vào các hàng phù hợp với các cột thậm chí có kích thước bất kể có bao nhiêu được đặt ở hàng.
Mã:
<div class="row">
<div class="column-auto--hand">
<div class="box">auto</div>
</div>
<div class="column-auto--hand">
<div class="box">auto</div>
</div>
<div class="column-auto--hand">
<div class="box">auto</div>
</div>
</div>>> Xem thêm: Khóa học lập trình android cơ bản nâng cao tại hà nội !
Ví dụ, trong ví dụ trên, các cột sẽ mất một phần ba từng.
Alignment
Có rất nhiều chi tiết có thể được thực hiện với Flexboxgrid, trong đó có sự liên kết của các cột của một hàng theo chiều ngang:
Mã:
<div class="row start"></div>
<div class="row center"></div>
<div class="row end"></div>as well as vertically:
Mã:
<div class="row top"></div>
<div class="row middle"></div>
<div class="row bottom"></div>Flexboxgrid cũng lợi dụng các kỹ thuật sắp xếp lại dễ dàng Flexbox và các tùy chọn khoảng cách động, nhưng bây giờ chúng tôi sẽ di chuyển về phía trước với việc tạo lưới Dribbble của chúng tôi!
Dribbble Grid
Chúng tôi sẽ bắt đầu với một tài liệu HTML rỗng đơn giản, bao gồm jQuery và Normalize. Hãy sử dụng một cái gì đó giống như HTML5 Boilerplate với các công cụ như Modernizr, nhưng đối với dự án này, chúng tôi sẽ tiếp tục tập trung vào các hoạt Javascript, HTML, CSS và bạn cần phải viết cho mình.
Mã:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/flexboxgrid.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>Từ đây, chúng ta sẽ xây dựng ra các cấu trúc của HTML mà chúng ta muốn sử dụng, và sau đó chúng ta sẽ treo tất cả mọi thứ với các API Dribbble.
Grid Markup
Đầu tiên, hãy nói chúng tôi muốn thiết lập một mạng lưới mà bắt đầu ở mức tối thiểu của hai khối mỗi hàng ngang, và di chuyển lên đến sáu khối mỗi hàng tại breakpoint tường. Dưới đây là cách chúng tôi sẽ thực hiện điều đó:
Mã:
<div class="row">
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
<div class="column-6--hand column-4--lap column-3--desk column-2--wall"></div>
</div>column-6--hand ra lệnh rằng tại breakpoint tay (cho các thiết bị cầm trong tay) mỗi khối sẽ điền sáu trong số mười hai cột. Do đó chúng tôi sẽ có thể phù hợp với hai hình thu nhỏ Dribbble trên một hàng của bố trí của chúng tôi tại thời điểm này.
Tại các điểm dừng lap, column-4--lap ra lệnh rằng mỗi khối sẽ có bốn cột rộng, do đó chúng ta sẽ có thể để phù hợp với ba trên một hàng.
Nhiều Dynamic Markup
Hãy nói rằng chúng tôi muốn làm cho lưới năng động hơn một chút. Dưới đây là một ví dụ của một hàng bằng cách sử dụng lưới rộng tự động và độ rộng biến.
Mã:
<div class="row">
<div class="column-6--hand column-3--lap column-2--desk column-auto--wall"></div>
<div class="column-6--hand column-3--lap column-4--desk column-auto--wall"></div>
<div class="column-6--hand column-3--lap column-3--desk column-auto--wall"></div>
<div class="column-6--hand column-3--lap column-3--desk column-auto--wall"></div>
<div class="column-6--hand column-6--lap column-5--desk column-auto--wall"></div>
<div class="column-6--hand column-6--lap column-7--desk column-12--wall"></div>
</div>Lưu ý: trong các breakpoint tường, chúng tôi thực sự có một mạng lưới với năm qua; điều này sẽ không bình thường có thể xảy ra với một hệ thống lưới mười hai cột mà không lớp tùy biến thêm, như mười hai là không chia hết năm. Tuy nhiên, với Flexbox, chiều rộng cột có thể dễ dàng được tính toán tự động.
Mang trong Jribbble
Bây giờ chúng ta có một cấu trúc lưới điện tại chỗ, chúng ta hãy viết các mã cần thiết để mang lại trong nội dung Dribbble của chúng tôi. Chúng tôi sẽ sử dụng các plugin jQuery Jribbble. Bạn có thể lấy mã nguồn từ GitHub. Jribbble sẽ làm cho nó rất dễ dàng để kéo bức ảnh từ Dribbble.
Bao gồm Jribbble trong một tập tin JS riêng biệt, hoặc ở phía trên cùng của script.js của bạn. Dưới đây Jribbble, mã này sẽ mang lại bức ảnh mong muốn Dribbble của bạn.
Mã:
(function(){
var playerId = "envato";
$.jribbble.getShotsByPlayerId(playerId, function(data){
var shots = data.shots;
var h = '';
$(shots).each(function(i, shot){
h += '<div class="column-6--hand column-4--lap column-3--desk column-2--wall">';
h += '<a href="' + shot.url + '"><img src="' + shot.image_teaser_url + '"></a>';
h += '</div>';
});
$('.dribbble-shots').html(h);
});
}());Đầu tiên chúng ta quấn mã của chúng tôi trong một biểu hiện chức năng ngay lập tức được gọi, mà làm cho chắc chắn rằng chúng tôi bảo vệ phạm vi JavaScript của chúng tôi. Tiếp theo, chúng ta thiết lập ID cầu thủ của chúng tôi, và sau đó chúng tôi sử dụng Jribbble để mang lại trong bức ảnh của chúng tôi. Một khi chúng ta có bức ảnh của chúng tôi, chúng tôi xây dựng html bằng cách duyệt qua mỗi cú đánh, và điền vào một phần tử với class dribbble-shots với html đó.
Cấu trúc HTML của ta sẽ trông như thế này:
Mã:
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/flexboxgrid.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>My Dribbble Shots</h1>
<div class="row center dribbble-shots">
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>Lưu ý rằng chúng tôi cũng bao gồm một chữ Google.
Styling tối thiểu
Tiếp theo, chúng tôi sẽ cung cấp một số phong cách tối thiểu trong style.css:
Mã:
body {
font-family: 'Maven Pro', sans-serif;
background-color: #f1faff;
}
h1 {
font-weight: 400;
}
*[class^=column] {
/*max-height: 100px;*/
overflow: hidden;
margin-bottom: 12px;
}
*[class^=column] img {
width: 100%;
}
.container {
width: 80%;
margin: 0 auto;
position: relative;
padding-top: 100px;
}
a {
display: block;
opacity: 0.9;
}
a:hover {
opacity: 1;
}Sản phẩm cuối cùng của bạn sẽ trông giống như sau:
Xem thêm: học photoshop cơ bản tại hà nội
