Materialize – CSS Framework với ngôn ngữ thiết kế từ Google

25/07/2024 0 65 3 phút đọc

Materialize là ngôn ngữ thiết kế được tạo ra vào năm 2014 bởi Google. Nó sử dụng nhiều bố cục dựa trên lưới hơn, hình ảnh động và chuyển tiếp linh hoạt, phần đệm và hiệu ứng chiều sâu như ánh sáng và bóng.

Materialize – CSS Framework với ngôn ngữ thiết kế từ Google

Kể từ năm 2019, Materialize đã được triển khai trên hầu hết các sản phẩm của Google như YouTube, Gmail, Google Drive và Google Docs.

Materialize là một CSS Framework hiện đại dựa trên thiết kế Materialize. Dễ sử dụng, nó cung cấp các thành phần, cũng như các mẫu khởi động cho phép bạn bắt đầu thiết kế trang web của mình với thời gian thiết lập tối thiểu.

Cấu trúc cơ bản

Sau khi tải UIkit về, giải nén ra bạn sẽ được 2 thư mục css và js.

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <!--JavaScript at end of body for optimized loading-->
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

Hoặc bạn không cần tải gì cả bằng cách sử dụng CDN.

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <!--JavaScript at end of body for optimized loading-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
</html>