Milligram cung cấp một thiết lập phong cách tối thiểu cho một điểm bắt đầu nhanh chóng và rõ ràng. Chỉ nó thôi. Chỉ 2kb được nén. Đó không phải là về khung giao diện người dùng. Được thiết kế đặc biệt để có hiệu suất tốt hơn và năng suất cao hơn với ít thuộc tính hơn để đặt lại dẫn đến mã sạch hơn. Hy vọng bạn thích Bạn có muốn gắn dấu sao, tweet hay chia sẻ với bất kỳ ai không? . Điều này rất có ý nghĩa với tôi ♥ Bắt đầuCó một số cách để bắt đầu. Trước tiên, hãy xem tất cả các tùy chọn tải xuống có sẵn bên dưới, sau đó chọn tùy chọn phù hợp nhất cho nhu cầu của bạn. Bây giờ bạn nên thêm tệp chính của Milligram và CSS Reset vào tiêu đề của dự án của bạn. Chỉ vậy thôi Tải xuống miligam Cài đặt với Bower Milligram có sẵn để cài đặt bằng Bower $ bower install milligram
Cài đặt với npm Milligram cũng có sẵn để cài đặt bằng npm $ npm install milligram
cài đặt với sợi Milligram cũng có sẵn để cài đặt bằng Yarn $ yarn add milligram
Bao gồm những gì Sau khi tải xuống, giải nén thư mục nén để xem tệp chính trong phiên bản không nén và rút gọn milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
Cách sử dụng Đầu tiên, sử dụng bất kỳ phương pháp nào được đề cập ở trên để tải xuống Milligram. Sau đó, chỉ cần thêm các thẻ này vào đầu. Milligram cũng có sẵn qua CDN /* Google Fonts */
/* CSS Reset */
/* Milligram CSS */
/* You should properly set the path from the main file. */
CLI CLI để bắt đầu với Milligram. Nó cung cấp một dự án soạn sẵn siêu đơn giản với Milligram $ npm install -g milligram-cli
Tạo một ứng dụng mới bằng lệnh $ yarn add milligram
0, sau đó cài đặt các phụ thuộc và chạy với $ yarn add milligram
1________số 8_______Xem thêm ví dụ về bắt đầu kiểu chữCSS3 giới thiệu một vài đơn vị mới, bao gồm đơn vị $ yarn add milligram
2, viết tắt của "root em". Đơn vị $ yarn add milligram
2 có liên quan đến cỡ chữ của phần tử gốc $ yarn add milligram
4. Điều đó có nghĩa là chúng ta có thể xác định một kích thước phông chữ duy nhất trên phần tử gốc và xác định tất cả các đơn vị $ yarn add milligram
2 là tỷ lệ phần trăm của kích thước đó. Kiểu chữ có $ yarn add milligram
6 được xác định trong 1. 6rem (16px) và $ yarn add milligram
7 trong 1. 6 (24px). Milligram sử dụng $ yarn add milligram
8 Roboto, được tạo bởi Christian Robertson và được cung cấp bởi GoogleTiêu đề $ yarn add milligram9 3. 6rem (36px)Tiêu đề milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md0 2. 8rem (28px)Tiêu đề milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
1 2. 2rem (22px)Tiêu đề milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
2 1. 8rem (18px)Tiêu đề milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
3 1. 6rem (16px)/* Base font-size and line-height */
The base type is 1.6rem (16px) over 1.6 line height (24px)
/* Other elements to text markup */
Anchor
Emphasis
Small
Strong
Underline
/* Default Headings */
Heading
Heading
Heading
Heading
Heading
/* The base font-size is set at 62.5% for having the convenience of sizing rems in a way that is similar to using px. So basically 1.6rem = 16px. */
Xem thêm ví dụ về kiểu chữ trích dẫn khốiBlockquote đại diện cho một phần được trích dẫn từ một nguồn khác Vâng. Miligam thật tuyệt vời
Yeah!! Milligram is amazing.
Xem thêm ví dụ về blockquotes nútNút, một phần thiết yếu của bất kỳ trải nghiệm người dùng nào. Các nút có ba kiểu cơ bản trong Milligram. Phần tử milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
4 có màu phẳng theo mặc định, trong khi phần tử milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
5 có đường viền đơn giản xung quanh và phần tử milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
6 hoàn toàn rõ ràng/* Default Button */
Default Button
/* Outlined Button */
Outlined Button
/* Clear Button */
/* Easily apply the `.button` class for button style in the anchor element. */
Xem thêm ví dụ về các nút danh sáchDanh sách là một cách rất linh hoạt và phổ biến để hiển thị các mục. Milligram có ba loại danh sách. Danh sách không có thứ tự sử dụng phần tử milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
7 sẽ được đánh dấu bằng vòng tròn phác thảo, danh sách có thứ tự sử dụng phần tử milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
8 và các mục của bạn sẽ được đánh dấu bằng số, danh sách mô tả sử dụng phần tử milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
9 và các mục của bạn sẽ không được đánh dấu, chỉ có khoảng cách- Mục danh sách không có thứ tự 1
- Mục danh sách không có thứ tự 2
- Mục danh sách đặt hàng 1
- Danh sách đặt hàng mục 2
Mục danh sách mô tả 1 Mục danh sách mô tả 1. 1 $ npm install milligram
0Xem thêm ví dụ về danh sách Các hình thứcBiểu mẫu chưa bao giờ thực sự thú vị và có thể hết sức khó chịu trên thiết bị di động có bàn phím trên màn hình. Milligram giúp thực hiện điều này dễ dàng hơn nhiều với thiết kế tập trung vào trải nghiệm người dùng $ npm install milligram
1Xem thêm các ví dụ về biểu mẫu Những cái bànPhần tử Bảng biểu thị dữ liệu ở hai chiều trở lên. Chúng tôi khuyến khích sử dụng định dạng phù hợp với /* Google Fonts */
/* CSS Reset */
/* Milligram CSS */
/* You should properly set the path from the main file. */
0 và /* Google Fonts */
/* CSS Reset */
/* Milligram CSS */
/* You should properly set the path from the main file. */
1 để tạo một /* Google Fonts */
/* CSS Reset */
/* Milligram CSS */
/* You should properly set the path from the main file. */
2. Mã trở nên sạch hơn mà không làm phiền sự hiểu biếtTênTuổiChiều caoVị tríStephen Curry271,91Akron, OHKlay Thompson252,01Los Angeles, CA $ npm install milligram
2Xem thêm ví dụ về bảng lướiLưới là một hệ thống linh hoạt có chiều rộng tối đa là /* Google Fonts */
/* CSS Reset */
/* Milligram CSS */
/* You should properly set the path from the main file. */
3 (1120px), thu nhỏ với trình duyệt/thiết bị ở kích thước nhỏ hơn. Chiều rộng tối đa có thể được thay đổi bằng một dòng CSS và tất cả các cột sẽ thay đổi kích thước tương ứng. Milligram khác với hầu hết vì nó sử dụng tiêu chuẩn Mô-đun bố cục hộp linh hoạt CSS. Ưu điểm là sự đơn giản và chúng tôi biết rằng mã chức năng rất quan trọng đối với khả năng bảo trì và khả năng mở rộng. Chỉ cần thêm các cột bạn muốn vào một hàng và chúng sẽ chiếm không gian có sẵn một cách đồng đều. Nếu bạn muốn ba cột, hãy thêm ba cột, nếu bạn muốn năm cột, hãy thêm năm cột. Không có giới hạn về số lượng cột, nhưng chúng tôi khuyên bạn nên tuân theo mẫu thiết kế của hệ thống lưới. Xem thêm mẹo về các phương pháp hay nhất trongcột-50. cột-offset-25 $ npm install milligram
3Xem thêm ví dụ về lưới Mã sốPhần tử Mã đại diện cho một đoạn mã máy tính. Chỉ cần bọc bất cứ thứ gì trong một /* Google Fonts */
/* CSS Reset */
/* Milligram CSS */
/* You should properly set the path from the main file. */
4 và nó sẽ xuất hiện như thế này. nếu bạn cần một khối, theo mặc định, hãy nhập /* Google Fonts */
/* CSS Reset */
/* Milligram CSS */
/* You should properly set the path from the main file. */
4 trong phần tử /* Google Fonts */
/* CSS Reset */
/* Milligram CSS */
/* You should properly set the path from the main file. */
6$ npm install milligram
4$ npm install milligram
5Xem thêm ví dụ về mã tiện íchMilligram có một số lớp chức năng để cải thiện hiệu suất và năng suất hàng ngày $ npm install milligram
6Xem thêm các ví dụ về tiện ích Lời khuyênMẹo, kỹ thuật và cách thực hành tốt nhất khi sử dụng Cascading Style Sheets Điện thoại di động đầu tiên Mobile First là chiến lược thiết kế ưu tiên phát triển cho các thiết bị di động như điện thoại thông minh và máy tính bảng. Điều đó có nghĩa là tất cả các kiểu bên ngoài truy vấn phương tiện áp dụng cho tất cả các thiết bị, sau đó màn hình lớn hơn được nhắm mục tiêu để nâng cao. Điều này ngăn các thiết bị nhỏ phải phân tích hàng tấn CSS không sử dụng. Milligram sử dụng một số điểm dừng như thế này - Lớn hơn màn hình Mobile. 40. 0rem (640px)
- Lớn hơn màn hình Tablet. 80. 0rem (1280px)
- Lớn hơn màn hình Desktop. 120. 0rem (1920px)
$ npm install milligram
7Nhúng phông chữ Milligram sử dụng $ yarn add milligram
8 Roboto, được tạo bởi Christian Robertson và được cung cấp bởi Google. Tùy chỉnh dự án của bạn bằng Google Fonts. Để nhúng các phông chữ đã chọn của bạn vào một trang web, hãy sao chép mã này vào$ npm install milligram
8Mở rộng thừa kế Kiểu của một phần tử có thể được xác định ở một số vị trí khác nhau, tương tác theo cách phức tạp. Chính hình thức tương tác này làm cho CSS trở nên mạnh mẽ, nhưng nó có thể khiến nó trở nên khó hiểu và khó gỡ lỗi $ npm install milligram
9Xem thêm các ví dụ về mẹo Hỗ trợ trình duyệtMặc dù không được thiết kế cho các trình duyệt cũ, nhưng Milligram có hỗ trợ cho một số phiên bản cũ, nhưng chúng tôi khuyên bạn nên sử dụng các phiên bản mới nhất của trình duyệt của họ
Khung CSS dễ nhất là gì?
Nếu bạn mới bắt đầu với CSS và giao diện người dùng, hãy truy cập Tacit, Pure hoặc Skeleton . Tuy nhiên, để xây dựng các yếu tố phức tạp hơn, bạn sẽ cần một khung toàn diện hơn như Foundation, Tailwind hoặc Bootstrap. Bạn có thể học dễ dàng thông qua Bulma hoặc Semantic UI.
Khung đơn giản trong CSS là gì?
Đơn giản. css là một khung CSS không có lớp giúp HTML ngữ nghĩa trông đẹp mắt, thực sự nhanh chóng . Khi không có lớp, ý tôi là không có lớp CSS nào ở bất kỳ đâu trong CSS hoặc HTML. Vì vậy, trang web của bạn có thể trông giống như thế này bằng cách sử dụng HTML vanilla cũ đơn giản.
Khung CSS nhỏ nhất là gì?
min , khung CSS nhỏ nhất trong danh sách này, có hệ thống lưới 12 cột đáp ứng, kiểu nút, kiểu bảng, biểu tượng tương thích với Android, v.v. min thậm chí còn hỗ trợ các trình duyệt cũ như Internet Explorer 5. 5.
Khung CSS phổ biến nhất là gì?
#1 Bootstrap
. Hơn 2000 cộng tác viên đã đóng góp vào kho lưu trữ GitHub của Bootstrap, nơi có hơn 20.000 lượt xác nhận. | 
