Cách tạo trang đích có kiểu dáng với CSS Tailwind
Các nhà phát triển sử dụng Cascading Style Sheets (CSS) để tạo kiểu cho các trang web. Nhưng thông thường, khi xây dựng các trang web hoặc ứng dụng lớn, việc viết các luật này từ đầu trở nên tẻ nhạt. Đây là lý do tại sao có nhiều CSS framework giúp viết CSS dễ dàng, chẳng hạn như Bootstrap , Foundation , Bulma , Pure , Materialize , v.v.Tailwind CSS là một khung công tác hơi khác so với những khung công tác đã đề cập trước đây, vì nó không có chủ đề mặc định và không có thành phần giao diện user tích hợp sẵn. Tailwind là một khuôn khổ CSS ưu tiên tiện ích để nhanh chóng xây dựng các giao diện user tùy chỉnh. Điều này nghĩa là nếu bạn đang tìm kiếm một khuôn khổ với menu các tiện ích con được thiết kế sẵn để xây dựng trang web của bạn , thì Tailwind có thể không phải là khuôn khổ phù hợp với bạn. Thay vào đó, Tailwind cung cấp các lớp tiện ích cấp thấp, có thể tổng hợp cao giúp dễ dàng hơn trong việc xây dựng các giao diện user phức tạp mà không khuyến khích hai trang web giống nhau.
Trong hướng dẫn này, bạn sẽ xây dựng trang đích để giới thiệu sản phẩm đồng hồ đeo tay theo dõi sức khỏe thông minh (SHMW) cho khách hàng.
Sản phẩm cuối cùng sẽ giống như sau:
Trang đích sẽ được chia thành các phần sau:
- Navbar
- Phần anh hùng
- Phần tính năng
- Lời chứng thực
- Kêu gọi hành động
- Chân trang
Bạn có thể download nội dung cho dự án này tại trang GitHub này .
Yêu cầu
Hiểu biết cơ bản về CSS có thể hữu ích, nhưng không bắt buộc.
Bước 1 - Cài đặt dự án
Ta sẽ bắt đầu bằng cách tạo một folder dự án mới, mà ta sẽ gọi là shmw và tạo một index.html bên trong nó.
- mkdir shmw
- cd shmw
- nano index.html
Để bắt đầu và chạy nhanh chóng với Tailwind CSS, ta sẽ lấy bản dựng cấu hình mặc định mới nhất qua CDN (Mạng phân phối nội dung). Thêm đoạn mã sau vào index.html :
<!DOCTYPE html> <html lang="en"> <head> <title>Smart Health Monitoring Wristwatch</title> <link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" /> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif"> </body> </html> Trong đoạn mã này, bạn đã tạo nền trắng cho phần thân và lấy phông chữ Source Sans Pro từ Google Fonts.
Lưu ý: Nhiều tính năng của Tailwind CSS không khả dụng bằng các bản dựng CDN. Để tận dụng hết các tính năng của Tailwind CSS, hãy cài đặt Tailwind qua npm.
Bước 2 - Xây dựng thanh chuyển
Thanh chuyển sẽ được chia thành hai cột. Cột đầu tiên sẽ chứa logo và cột thứ hai sẽ chứa các liên kết chuyển . Thêm mã sau ngay sau <body> trong index.html :
<nav> <div class="container mx-auto px-6 py-2 flex justify-between items-center"> <a class="font-bold text-2xl lg:text-4xl" href="#"> SHMW </a> <div class="block lg:hidden"> <button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <title>Menu</title> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> </button> </div> <div class="hidden lg:block"> <ul class="inline-flex"> <li><a class="px-4 font-bold" href="/">Home</a></li> <li><a class="px-4 hover:text-gray-800" href="#">About</a></li> <li><a class="px-4 hover:text-gray-800" href="#">Contact</a></li> </ul> </div> </div> </nav> Việc thêm .container đặt max-width của một phần tử để trùng với min-width của điểm ngắt hiện tại. Để làm cho containers được căn giữa, bạn thêm .mx-auto và .px-6 để có phần đệm ở cả hai bên (trái và phải). Vì ta muốn có thanh chuyển ngang, ta đặt màn hình containers thành flex và chỉ định cách các mục của nó sẽ được hiển thị. Mỗi mục phải có một khoảng trống bằng nhau giữa chúng (sử dụng .justify-between ), điều này sẽ đẩy cả hai cột ra cạnh. Chúng sẽ được căn giữa theo chiều dọc (sử dụng .items-center ). Cuối cùng, ta thêm phần đệm vào cả phần trên và phần dưới của containers bằng cách sử dụng .py-2 .
Cột đầu tiên chứa biểu tượng doanh nghiệp của ta (trong trường hợp này, chỉ là văn bản) trên thanh chuyển . Đối với cột thứ hai, ta muốn các liên kết được hiển thị khác nhau trên thiết bị di động và máy tính để bàn. Ta có một div chứa một nút cho menu di động của ta , sẽ chỉ hiển thị trên các thiết bị màn hình nhỏ. Để làm điều này, ta thêm cả .block và .lg:hidden , sẽ làm cho nút hiển thị trên thiết bị di động và ẩn trên màn hình lớn.
Lưu ý: Theo mặc định, Tailwind CSS áp dụng cách tiếp cận ưu tiên thiết bị di động, vì vậy ta xây dựng nó từ màn hình nhỏ sang màn hình lớn hơn.
Tiếp theo, đối với các liên kết trên máy tính để bàn, ta thêm .hidden và .lg:block , ta thực hiện ngược lại trực tiếp với những điều trên. Đối với các liên kết thực tế, ta thêm .inline-flex để làm cho các liên kết xuất hiện theo chiều ngang. Đối với các liên kết riêng lẻ, ta cung cấp cho chúng phần đệm ở cả hai bên. Để chỉ ra liên kết đang hoạt động (trong trường hợp của ta là liên kết trang chủ ), ta làm đậm văn bản. Đối với phần còn lại của các liên kết, ta sử dụng màu xám đậm hơn khi các liên kết được di chuột qua.
Bước 3 - Xây dựng Phần Anh hùng
Phần Hero sẽ hiển thị thông tin về đồng hồ đeo tay theo dõi sức khỏe thông minh của ta và nút kêu gọi hành động để user thực hiện ngay lập tức. Thêm đoạn mã này ngay sau thanh chuyển :
<div class="py-20" style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%)" > <div class="container mx-auto px-6"> <h2 class="text-4xl font-bold mb-2 text-white"> Smart Health Monitoring Wristwatch! </h2> <h3 class="text-2xl mb-8 text-gray-200"> Monitor your health vitals smartly anywhere you go. </h3> <button class="bg-white font-bold rounded-full py-4 px-8 shadow-lg uppercase tracking-wider"> Pre Order </button> </div> </div> Ta bắt đầu bằng cách thêm phần đệm vào cả trên cùng và dưới cùng, sau đó ta cài đặt một gradient nền. Đối với nút kêu gọi hành động, ta cung cấp cho nó màu nền trắng, làm đậm văn bản, tạo một số khoảng đệm và làm cho nó có hình viên thuốc bằng cách tạo cho nó các đường viền tròn đầy. Cuối cùng, ta cung cấp cho nó một số bóng tối và làm cho văn bản viết hoa.
Đến đây bạn đã tạo phần anh hùng, bạn đã sẵn sàng để xây dựng phần tính năng.
Bước 4 - Xây dựng Phần Tính năng
Trong bước này, bạn sẽ xây dựng một phần liệt kê các tính năng đáng chú ý của thiết bị.
Thêm phần sau ngay sau phần anh hùng:
<section class="container mx-auto px-6 p-10"> <h2 class="text-4xl font-bold text-center text-gray-800 mb-8"> Features </h2> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <h4 class="text-3xl text-gray-800 font-bold mb-3">Exercise Metric</h4> <p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch is able to capture you vitals while you exercise. You can create different category of exercises and can track your vitals on the go.</p> </div> <div class="w-full md:w-1/2"> <img src="assets/health.svg" alt="Monitoring" /> </div> </div> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <img src="assets/report.svg" alt="Reporting" /> </div> <div class="w-full md:w-1/2 pl-10"> <h4 class="text-3xl text-gray-800 font-bold mb-3">Reporting</h4> <p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch can generate a comprehensive report on your vitals depending on your settings either daily, weekly, monthly, quarterly or yearly.</p> </div> </div> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <h4 class="text-3xl text-gray-800 font-bold mb-3">Syncing</h4> <p class="text-gray-600 mb-8">Our Smart Health Monitoring Wristwatch allows you to sync data across all your mobile devices whether iOS, Android or Windows OS and also to your laptop whether MacOS, GNU/Linux or Windows OS.</p> </div> <div class="w-full md:w-1/2"> <img src="assets/sync.svg" alt="Syncing" /> </div> </div> </section> Bản thân các đối tượng địa lý được hiển thị dưới dạng lưới gồm hai cột: văn bản đối tượng địa lý và hình ảnh đi kèm. Trên thiết bị di động, ta xếp chồng lên nhau. Ta sử dụng flexbox để xây dựng lưới của ta .
Bước 5 - Xây dựng Phần Chứng thực
Trong bước này, bạn sẽ xây dựng phần lời chứng thực sẽ chứa các thẻ của một số lời chứng. Thẻ sẽ chứa lời khai của user và tên của user .
Thêm phần sau ngay sau phần tính năng:
<section class="bg-gray-100"> <div class="container mx-auto px-6 py-20"> <h2 class="text-4xl font-bold text-center text-gray-800 mb-8"> Testimonials </h2> <div class="flex flex-wrap"> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5">Monitoring and tracking my health vitals anywhere I go and on any platform I use has never been easier.</p> <p class="text-gray-500 text-xs md:text-sm px-6">John Doe</p> </div> </div> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5">As an Athlete, this is the perfect product for me. I wear my Smart Health Monitoring Wristwatch everywhere I go, even in the bathroom since it's waterproof.</p> <p class="text-gray-500 text-xs md:text-sm px-6">Jane Doe</p> </div> </div> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5">I don't regret buying this wearble gadget. One of the best gadgets I own!.</p> <p class="text-gray-500 text-xs md:text-sm px-6">James Doe</p> </div> </div> </div> </div> </section> Đầu tiên, ta tạo nền cho phần này và căn giữa nó trên trang. Đối với các lời khai thực tế, ta làm cho chúng xuất hiện trong một lưới với flexbox. Ta muốn chúng xếp chồng (nghĩa là chiếm toàn bộ chiều rộng của màn hình) lên nhau khi xem trên thiết bị di động, do đó .w-full . Sau đó, trên màn hình lớn hơn, ta muốn chúng được hiển thị trong ba cột bằng cách sử dụng .md:w-1/3 . Đối với các thẻ riêng lẻ, ta cung cấp nền trắng, đường viền tròn và bóng.
Bước 6 - Xây dựng Kêu gọi hành động
Phần kêu gọi hành động là cần thiết để user của ta có thể thực hiện hành động ngay lập tức sau khi đọc các tính năng của sản phẩm của ta và lời chứng thực từ user demo. Thêm nội dung sau ngay sau phần lời chứng thực:
<section style="background-color: #667eea"> <div class="container mx-auto px-6 text-center py-20"> <h2 class="mb-6 text-4xl font-bold text-center text-white"> Limited in Stock </h2> <h3 class="my-4 text-2xl text-white"> Get yourself the Smart Health Monitoring Wristwatch! </h3> <button class="bg-white font-bold rounded-full mt-6 py-4 px-8 shadow-lg uppercase tracking-wider" > Pre Order </button> </div> </section> 
Đến đây bạn đã tạo lời gọi hành động, bạn đã sẵn sàng để tạo phần chân trang.
Bước 7 - Xây dựng chân trang
Chân trang sẽ chứa các liên kết bổ sung như blog, policy bảo mật, phương tiện truyền thông xã hội, v.v. Thêm nội dung sau ngay sau phần kêu gọi hành động:
<footer class="bg-gray-100"> <div class="container mx-auto px-6 pt-10 pb-6"> <div class="flex flex-wrap"> <div class="w-full md:w-1/4 text-center md:text-left"> <h5 class="uppercase mb-6 font-bold">Links</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">FAQ</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Help</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Support</a> </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left"> <h5 class="uppercase mb-6 font-bold">Legal</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Terms</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Privacy</a> </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left"> <h5 class="uppercase mb-6 font-bold">Social</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Facebook</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Linkedin</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Twitter</a> </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left"> <h5 class="uppercase mb-6 font-bold">Company</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Official Blog</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">About Us</a> </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500">Contact</a> </li> </ul> </div> </div> </div> </footer> Mã này hiển thị một loạt các liên kết trong một lưới bốn cột. Mỗi cột sẽ xếp chồng lên nhau và văn bản sẽ được căn giữa khi xem trên màn hình nhỏ.
Như vậy, bạn đã hoàn thành trang đích của bạn . Tệp index.html đã hoàn thành sẽ trông như sau:
<!DOCTYPE html> <html lang="en"> <head> <title>Smart Health Monitoring Wristwatch</title> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@next/dist/tailwind.min.css" /> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet" /> </head> <body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif" > <!--Nav--> <nav> <div class="container mx-auto px-6 py-2 flex justify-between items-center" > <a class="font-bold text-2xl lg:text-4xl" href="#" > SHMW </a> <div class="block lg:hidden"> <button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none" > <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <title>Menu</title> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> </button> </div> <div class="hidden lg:block"> <ul class="inline-flex"> <li> <a class="px-4 font-bold" href="/">Home</a> </li> <li> <a class="px-4 hover:text-gray-800" href="#" >About</a > </li> <li> <a class="px-4 hover:text-gray-800" href="#" >Contact</a > </li> </ul> </div> </div> </nav> <!--Hero--> <div class="py-20" style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%)" > <div class="container mx-auto px-6"> <h2 class="text-4xl font-bold mb-2 text-white"> Smart Health Monitoring Wristwatch! </h2> <h3 class="text-2xl mb-8 text-gray-200"> Monitor your health vitals smartly anywhere you go. </h3> <button class="bg-white font-bold rounded-full py-4 px-8 shadow-lg uppercase tracking-wider" > Pre Order </button> </div> </div> <!-- Features --> <section class="container mx-auto px-6 p-10"> <h2 class="text-4xl font-bold text-center text-gray-800 mb-8"> Features </h2> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <h4 class="text-3xl text-gray-800 font-bold mb-3"> Exercise Metrics </h4> <p class="text-gray-600 mb-8"> Our Smart Health Monitoring Wristwatch is able to capture you vitals while you exercise. You can create different category of exercises and can track your vitals on the go. </p> </div> <div class="w-full md:w-1/2"> <img src="assets/health.svg" alt="Monitoring" /> </div> </div> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <img src="assets/report.svg" alt="Reporting" /> </div> <div class="w-full md:w-1/2 pl-10"> <h4 class="text-3xl text-gray-800 font-bold mb-3"> Reporting </h4> <p class="text-gray-600 mb-8"> Our Smart Health Monitoring Wristwatch can generate a comprehensive report on your vitals depending on your settings either daily, weekly, monthly, quarterly or yearly. </p> </div> </div> <div class="flex items-center flex-wrap mb-20"> <div class="w-full md:w-1/2"> <h4 class="text-3xl text-gray-800 font-bold mb-3"> Syncing </h4> <p class="text-gray-600 mb-8"> Our Smart Health Monitoring Wristwatch allows you to sync data across all your mobile devices whether iOS, Android or Windows OS and also to your laptop whether MacOS, GNU/Linux or Windows OS. </p> </div> <div class="w-full md:w-1/2"> <img src="assets/sync.svg" alt="Syncing" /> </div> </div> </section> <!-- Testimonials --> <section class="bg-gray-100"> <div class="container mx-auto px-6 py-20"> <h2 class="text-4xl font-bold text-center text-gray-800 mb-8"> Testimonials </h2> <div class="flex flex-wrap"> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5"> Monitoring and tracking my health vitals anywhere I go and on any platform I use has never been easier. </p> <p class="text-gray-500 text-xs md:text-sm px-6"> John Doe </p> </div> </div> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5"> As an Athlete, this is the perfect product for me. I wear my Smart Health Monitoring Wristwatch everywhere I go, even in the bathroom since it's waterproof. </p> <p class="text-gray-500 text-xs md:text-sm px-6"> Jane Doe </p> </div> </div> <div class="w-full md:w-1/3 px-2 mb-4"> <div class="bg-white rounded shadow py-2"> <p class="text-gray-800 text-base px-6 mb-5"> I don't regret buying this wearble gadget. One of the best gadgets I own!. </p> <p class="text-gray-500 text-xs md:text-sm px-6"> James Doe </p> </div> </div> </div> </div> </section> <!--Call to Action--> <section style="background-color: #667eea"> <div class="container mx-auto px-6 text-center py-20"> <h2 class="mb-6 text-4xl font-bold text-center text-white"> Limited in Stock </h2> <h3 class="my-4 text-2xl text-white"> Get yourself the Smart Health Monitoring Wristwatch! </h3> <button class="bg-white font-bold rounded-full mt-6 py-4 px-8 shadow-lg uppercase tracking-wider" > Pre Order </button> </div> </section> <!--Footer--> <footer class="bg-gray-100"> <div class="container mx-auto px-6 pt-10 pb-6"> <div class="flex flex-wrap"> <div class="w-full md:w-1/4 text-center md:text-left "> <h5 class="uppercase mb-6 font-bold">Links</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >FAQ</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Help</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Support</a > </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left "> <h5 class="uppercase mb-6 font-bold">Legal</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Terms</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Privacy</a > </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left "> <h5 class="uppercase mb-6 font-bold">Social</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Facebook</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Linkedin</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Twitter</a > </li> </ul> </div> <div class="w-full md:w-1/4 text-center md:text-left "> <h5 class="uppercase mb-6 font-bold">Company</h5> <ul class="mb-4"> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Official Blog</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >About Us</a > </li> <li class="mt-2"> <a href="#" class="hover:underline text-gray-600 hover:text-orange-500" >Contact</a > </li> </ul> </div> </div> </div> </footer> </body> </html> Kết luận
Trong hướng dẫn này, bạn đã xây dựng một trang đích bằng Tailwind CSS. Ngoài việc sử dụng các lớp mà Tailwind cung cấp, bạn cũng đã sử dụng màu gradient để làm cho trang đích có chiều sâu hơn. Để tìm hiểu thêm về Tailwind CSS, bạn có thể đọc tài liệu trên trang web chính thức của họ.
Các tin liên quan
Triển khai một CSS thuần túy có thể thu gọn2020-05-02
Căn giữa mọi thứ trong CSS bằng Flexbox
2020-05-02
Tham chiếu phông chữ hệ thống CSS
2020-03-29
Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
2020-02-04
Cách sử dụng CSS: root Pseudo-Class Selector
2020-01-15
Khi nào bạn nên sử dụng quy tắc CSS! Important?
2020-01-14
Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
2019-12-13
Cách hiển thị CSS trên server ứng dụng React
2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
