NomCss nom.css · nom-ui · nom-form

Bộ CSS thuần của NOM: lưới và tiện ích kiểu Bootstrap (khác tên ở vài chỗ), thành phần giao diện dùng chung, form mở rộng, menu và icon. Giao diện sáng, rõ, ưu tiên điện thoại; màu và bo góc lấy từ token --nom-*, site đổi bằng cách khai báo lại trong site.css.

Thứ tự nạp

CSS thư viện trước site.css; nom.js luôn trước plugin. Trang công khai chỉ nạp nom-form khi cần bằng <nom-require name="form" />.

<link rel="stylesheet" href="~/nom/font/nomfont.css" />
<link rel="stylesheet" href="~/nom/css/nom.css" />
<link rel="stylesheet" href="~/nom/css/nom-navigation.css" />
<link rel="stylesheet" href="~/nom/css/nom-ui.css" />
<link rel="stylesheet" href="~/nom/css/nom-form.css" />   <!-- hoặc <nom-require name="form" /> -->
<link rel="stylesheet" href="~/nom/css/nom-content.css" /><!-- layout website nạp sẵn -->
<link rel="stylesheet" href="~/css/site.css" />          <!-- cuối cùng để ghi đè -->

<script src="~/nom/js/nom.js"></script>
<script src="~/nom/js/nom-ui.js"></script>      <!-- .busy() cho nút -->
<script src="~/nom/js/nom-form.js"></script>    <!-- select tuỳ biến -->

Màu, token

Khai báo ở :root trong nom-ui.css. Đổi màu chủ đạo của site: khai báo lại biến trong site.css, không sửa file thư viện.

/* site.css */
:root {
    --nom-primary: #0f766e;
    --nom-primary-dark: #115e59;
    --nom-primary-soft: #ccfbf1;
    --nom-radius: 16px;
    --nom-field-height: 48px;     /* chiều cao ô nhập */
}

Breakpoint, container

Năm mốc theo min-width. Lưu ý lg = 1024px, xl = 1280px (khác Bootstrap).

Màn hình hiện tại: …

.container giới hạn bề rộng theo mốc, .container-fluid rộng hết; cả hai có lề ngang 15px.

Grid

.row + .col-* (1–12). Cột mặc định rộng 100%; thêm tiền tố mốc để đổi từ màn đó trở lên.

Cột cố định

Responsive

Điện thoại 1 cột, máy tính bảng 2 cột, máy tính 4 cột. Kéo hẹp cửa sổ để xem.

Cột tự giãn, theo nội dung

.col chia đều phần còn lại; .col-auto rộng theo nội dung.

Cột lồng nhau

Gutter

Khoảng cách giữa cột đặt trên .row: g-* (hai chiều), gx-* (ngang), gy-* (dọc). Thang: 0 = 0, 1 = .25rem, 2 = .5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem.

Flexbox

.d-flex kèm justify-* (start, end, center, between, around, evenly), align-* (start, end, center, baseline, stretch), flex-column, flex-wrap, flex-grow-1, align-self-*. Không có .gap-* và không có bản theo mốc cho hướng (flex-md-row…): dùng margin hoặc CSS riêng.

Display, ẩn hiện theo màn

.d-none .d-block .d-inline-block .d-flex .d-grid và bản theo mốc .d-md-*, .d-lg-*… Cặp hay dùng: d-none d-lg-flex (chỉ hiện từ 1024px), d-lg-none (ẩn từ 1024px).

Spacing

Margin m- mt- mb- ml- mr- mx- my-, padding p- pt- pb- pl- pr- px- py-, mức 0–5; mx-auto, ml-auto để căn.

Sizing, text

Rộng w-25 w-50 w-75 w-100 w-auto, cao h-*, mw-100, vh-100. Chữ text-left/center/right/justify, text-uppercase, font-italic, font-weight-light → bold.

Position, overflow, order

position-relative/absolute/fixed/sticky, overflow-auto/hidden (và -x-, -y-), order-first, order-0…6, order-last và bản theo mốc.

Nút nom-ui.css

Nút cơ bản cao 44px (vùng chạm), có trạng thái đang xử lý nom('#id').busy(true) của nom-ui.js. Màu khác, cỡ lớn, nút icon ở mục Nút mở rộng.

Form cơ bản nom-ui.css

.form-group > label + .form-control / .form-select; .form-hint cho gợi ý; .is-invalid + .invalid-feedback khi lỗi; nhãn .required thêm dấu *. Đổi nền ô nhập bằng background-color (đừng dùng background gộp, sẽ mất mũi tên của select).

Card, alert, badge, chip

Bảng

.table-wrap (khung, cuộn ngang khi hẹp) bọc table.table.

Tiện ích nhỏ

progress-bar, line-clamp-2/-3 (cắt dòng), ratio-16x9 (khung 16:9 cho video, ảnh), text-small, empty.

Bố cục form, nhãn nổi nom-form

.form-row (nhãn bên trái từ 768px), .form-fieldset, .form-actions (-end, -sticky, -stack), .form-floating (ô nhập cần placeholder=" "), cỡ .form-control-sm/-lg, .form-counter.

Switch, range, tệp nom-form

Input group nom-form

Ghép ô nhập với chữ, icon, nút hoặc select tuỳ biến; .input-icon đặt icon, nút nhỏ bên trong ô.

Nút mở rộng nom-form

Nút tròn nổi góc màn hình (thêm mới trên điện thoại): <button class="btn btn-primary btn-fab">.

Nhóm nút nom-form

.btn-group (ngang), .btn-group-vertical, .btn-group-block (rộng hết khung), .btn-toolbar; chọn một hoặc nhiều bằng radio/checkbox ẩn .btn-check + label.btn; kiểu phân đoạn .btn-segmented.

Select tuỳ biến nom-form.js

Thêm lớp select-options cho <select>; enable-search để có ô tìm (không phân biệt dấu); multiple để chọn nhiều dạng thẻ. Select gốc vẫn nằm trong form nên submit, required, asp-for, nom('#id').val() dùng như bình thường.

nom('#so-skills').val(['html', 'css']).trigger('change');   // đổi giá trị bằng code
nom('#id').selectOptions('refresh');                        // sau khi thêm/bớt <option>
nom('#id').selectOptions('open' | 'close' | 'destroy');

Menu ngang nom-navigation.css

ul.menu-horizontal, mục có con li.has-sub > ul; mở bằng hover, nhiều cấp. Chữ trắng nên đặt trên nền màu (thanh điều hướng của site). Màu mặc định tím; đổi theo tông site trong site.css.

Menu dọc

ul.menu-vertical mở bằng click (cần JS bật lớp active trên li.has-sub, xem script cuối trang); ul.menu-vertical-hover bung sang phải khi hover, không cần JS.

Phân trang, breadcrumb

Trạng thái .active, .disabled đặt trên thẻ <a>. Breadcrumb tự chèn dấu ›, mục cuối không có link là trang hiện tại.

Dải đầu trang, chip-nav

.page-header (nền tràn ngang màn hình dù nằm trong .container) chứa breadcrumb, .page-title, .page-subtitle, .chip-nav; đổi màu bằng biến --page-header-bg, --page-header-fg. Bản gọn: .page-header-sm.

Khối, cột phụ, banner

.layout-sidebar chia cột chính và cột phụ 320px từ 1024px; khối .block › .block-header (+ .block-more), .block-body, .block-links, .post-list; .banner ảnh kèm tiêu đề.

Icon (nomfont)

<i class="icon-tên"></i>. Danh sách đọc từ nomfont.css; bấm vào icon để chép tên lớp.

Danh sách bài nom-content

Template List: .content-list-items › article.content-list-item (thêm .has-thumb khi có ảnh: ảnh trái 280px từ 768px, trên điện thoại ảnh nằm trên). Dòng thông tin .content-meta dùng chung cho danh sách và chi tiết; mô tả cắt bằng .line-clamp-3.

Lưới thẻ, dịch vụ nom-content

Template Grid: .card.card-hover (nom-ui) + .content-card (thẻ cao bằng nhau trong hàng, phần thân giãn hết chiều cao). Template Service thêm .service-card: biểu tượng .icon-wrap khi không có ảnh và liên kết .more dính đáy thẻ.

Chi tiết bài, chế độ xem nom-content

article.content-detail: hộp bài; .content-detail-bar gồm .content-meta và .content-reader (nền sáng, tối, cỡ chữ). Nền tối là lớp .is-dark (đặt lại token --nom-* trong bài); cỡ chữ là biến --content-scale. Trên site do nom-content.js (gói content) xử lý và nhớ lựa chọn; ở đây bấm thử bằng script của trang. Thanh nghe .content-audio-player chỉ có khi bài có audio.

Nội dung bài (prose) nom-content

.content-body định dạng HTML do trình soạn thảo tạo ra: khoảng cách giữa các khối, tiêu đề h2/h3, ảnh bo góc, chú thích ảnh, trích dẫn, bảng, danh sách, iframe 16:9.

Đánh giá, tin trước sau, công cụ nom-content

Phần cuối bài chi tiết: .content-rating (sao tô vàng với .is-on), .content-readmore (tin mới hơn trái, tin cũ hơn .is-older căn phải), .content-tools (nút góp ý, chia sẻ; .content-tools-spacer đẩy phần chia sẻ sang phải).