some
content
content
some
content
content
some
content
content
some
content
content
some
content
content
some
content
content
SAMPLE PAGE
SUMMARY
- Typography
- Dialog (modal)
- Button
- Colors
- Flex
- Row-flex
- Row & Cols (bootstrap)
- Grid
- Contact
- Connexion
- All input type
- Input group
- Image
- Table
TYPOGRAPHY
Titles
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
a short paragraph
DIALOG (modal)
Show/open a dialog
Open a dialog with JS
Close a dialog
Dialog HTML code (non-JS)
dialog() options
| Description | Property name | Possible values | Default value |
|---|---|---|---|
| TODO | |||
| If nothing provided (ex: dialog()) |
BUTTON
Valid format (initial color: 'default')
Size (initial size: .btn-md)
Block (block + w-100)
COLORS
Basics
Black gradient
Opacity
Darker & lighter
| Description | Class | Values | Available States |
|---|---|---|---|
| Color name |
.white, .light, .dark, .default, .grey, .black, .transparent, .link, .primary, .secondary, .info, .success, .warning, .danger, .plan, .zone, .surface, .procedure, .tache, .black-[x] |
[0, 10, 20 ... 80, 90, 100] |
:h, :f, :fw, :c, :uc, :h-sibling, :h-peer, :h-parent, :f-sibling, :f-peer, :f-parent, :c-sibling, :uc-sibling, :c-peer, :uc-peer |
| Background | .bg-[x] | [white, light ... primary, danger] | Same as above |
| Border / outline | .b-[x] | [white, light ... primary, danger] | Same as above |
| Text | .text-[x] | [white, light ... primary, danger] | Same as above |
| Opacity | .bg-o-[x], .b-o-[x], .text-[x] | [0, 5, 10 ... 90, 95, 100] | :h, :f |
| Lightness | .darker, .lighter, .[x]-darker, .[x]-lighter | [bg, b, text] | :h, :f |
Flex
.flex
.flex > .flex-1
.flex > .flex-1
ROW-FLEX & COLS
.row-flex > * (.row-flex = .flex.flex-wrap.gap-15)
.row-flex > .col & .col-full
.col
.col
.col
.col-full
.col
.col
.row-flex > .col-a
.col-a
.col-a
.col-a
.col-a
.col-a
.col-a
.row-flex > [everything mixed in]
no class, content width
.col automatic/proportional width
.col shorter automatic
.col-full full width
.col-a equal width
.col-a equal width, event if there is a lot more content here: it will just do a line-break
.col-full full width, usefull to make a new row / break the content to a new line
.col-a col-a work the same as .flex-1
.col-a so we can even
.flex-3 use flex-[x] and it just works !
| Description | Class | Values | Available States |
|---|---|---|---|
| Row using FLEX (childs without "col/col-x": content width) | .row-flex | ||
| Col with equal width | .col |
-xs, -sm, -md, -lg, -xl, :xs, :sm, :md, :lg, :xl |
|
| Col that take the full width | .col-full |
-xs, -sm, -md, -lg, -xl, :xs, :sm, :md, :lg, :xl |
|
| Col with automatic/proportional width (content based) | .col-a |
-xs, -sm, -md, -lg, -xl, :xs, :sm, :md, :lg, :xl |
ROW & COLS (inspiration: bootstrap & tailwindcss)
.row > *
.row > .col-[x]
.col-12
.col-1
.col-11
.col-2
.col-10
.col-3
.col-9
.col-4
.col-8
.col-5
.col-7
.col-6
.col-6
.row > .col (automatic total number of cols / equal widths)
.col
.col
.col
.row.cols-[y] > .col-[x] (specific total number of cols)
.col-2 (parent: .row.cols-5)
.col-1
.col-1
.col-1
.row > .col-[x]-md (media query min width)
.col-6-md
.row > .col-[x]:md (media query strict width)
.col-6:md
| Description | Class | Values | Available States |
|---|---|---|---|
| Row using GRID (childs without "col/col-x": full width) | .row | ||
| Row with specific total number of cols (need .row to work) | .cols-[x] | [1, 2, 3 ... 18, 19, 20] | |
| Col with equal width | .col |
-xs, -sm, -md, -lg, -xl, :xs, :sm, :md, :lg, :xl |
|
| Col with specified width | .col-[x] | [1, 2, 3 ... 18, 19, 20] |
-xs, -sm, -md, -lg, -xl, :xs, :sm, :md, :lg, :xl |
GRID
.grid (equivalent to .grid-300 by default)
.grid.grid-200
.grid.grid-2.grid-5-sm.grid-10-lg
| Description | Class | Values | Available States |
|---|---|---|---|
| TODO |
FORM - Contact
FORM - Connexion
FORM - All inputs type
FORM - Better inputs
Checkbox :
FORM - Input group
IMAGES
Sample
Not found
TABLE
| Table Heading 1 | Table Heading 2 | Table Heading 3 a bit longer | Table Heading 4 | Table Heading 5 a lot longer than others |
|---|---|---|---|---|
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
CONTAINERS
Section
Main
blockquote
Said no one, ever
Said no one, ever
Said no one, ever
Said no one, ever
Said no one, ever
/* CSS */
kbd {
border-radius: 3px;
--bg-color: var(--hsl-black);
background-color: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--bg-color), var(--bg-lightness-add)), var(--lightness-hover)) var(--bg-opacity), transparent);
@supports (color: hsl(from white h s l)) { background-color: hsl(from var(--bg-color) h s calc(l + var(--bg-lightness-add) + var(--lightness-hover)) / var(--bg-opacity)); }
--text-color: var(--hsl-white);
color: color-mix(in srgb, var(--text-color) var(--text-opacity), transparent);
padding-left: 6px; padding-right: 6px;
padding-top: 2px; padding-bottom: 2px;
}
// JS
for (var i = 0; i<=10; i++) {
// say hello
echo("hello");
}