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 đầu
Có 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 milligramCài đặt với npm
Milligram cũng có sẵn để cài đặt bằng npm
$ npm install milligramcài đặt với sợi
Milligram cũng có sẵn để cài đặt bằng Yarn
$ yarn add milligramBao 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.mdCá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-cliTạo một ứng dụng mới bằng lệnh $ yarn add milligram0, sau đó cài đặt các phụ thuộc và chạy với $ yarn add milligram1
________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 milligram2, viết tắt của "root em". Đơn vị $ yarn add milligram2 có liên quan đến cỡ chữ của phần tử gốc $ yarn add milligram4. Đ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 milligram2 là tỷ lệ phần trăm của kích thước đó. Kiểu chữ có $ yarn add milligram6 được xác định trong 1. 6rem (16px) và $ yarn add milligram7 trong 1. 6 (24px). Milligram sử dụng $ yarn add milligram8 Roboto, được tạo bởi Christian Robertson và được cung cấp bởi Google
Tiê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.md1 2. 2rem (22px)
Tiêu đề milligram/ ├── dist/ │ ├── milligram.css │ └── milligram.min.css ├── example.html ├── license └── readme.md2 1. 8rem (18px)Tiêu đề milligram/ ├── dist/ │ ├── milligram.css │ └── milligram.min.css ├── example.html ├── license └── readme.md3 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 */ 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ách
Danh 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.md7 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.md8 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.md9 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 milligram0Xem thêm ví dụ về danh sách
Các hình thức
Biể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 milligram1Xem thêm các ví dụ về biểu mẫu
Những cái bàn
Phầ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ết
TênTuổiChiều caoVị tríStephen Curry271,91Akron, OHKlay Thompson252,01Los Angeles, CA
$ npm install milligram2Xem thêm ví dụ về bảng
lưới
Lướ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 trong
cột-50. cột-offset-25
$ npm install milligram3Xem 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 milligram4
$ npm install milligram5Xem thêm ví dụ về mã
tiện ích
Milligram 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 milligram6Xem thêm các ví dụ về tiện ích
Lời khuyên
Mẹ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)
Nhúng phông chữ
Milligram sử dụng $ yarn add milligram8 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 milligram8Mở 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 milligram9Xem thêm các ví dụ về mẹo
Hỗ trợ trình duyệt
Mặ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ọ