diff --git a/htdocs/index.php b/htdocs/index.php index ca416bc..e23ff9e 100644 --- a/htdocs/index.php +++ b/htdocs/index.php @@ -94,7 +94,7 @@ - + @@ -110,7 +110,7 @@ - + diff --git a/htdocs/parts/tables_core.php b/htdocs/parts/core/tables.php similarity index 97% rename from htdocs/parts/tables_core.php rename to htdocs/parts/core/tables.php index 88450e9..16e6401 100644 --- a/htdocs/parts/tables_core.php +++ b/htdocs/parts/core/tables.php @@ -13,8 +13,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
-
- ⚠️ These styles may slightly change again before the 1.0.0 release ⚠️ +
+ ℹ️ Check the Examples > Tables section for styled examples.

Default table

diff --git a/htdocs/parts/examples/tables.php b/htdocs/parts/examples/tables.php new file mode 100644 index 0000000..c8d9d22 --- /dev/null +++ b/htdocs/parts/examples/tables.php @@ -0,0 +1,126 @@ + + + +
+

Tables + +

+
+
+ +
+ ⚠️ These styles have specific limitations you should be aware of ⚠️ +
+ +

Stylish table

+
+

+ Tables can quickly be styled by simply using the .table-stylish class. +

+

+ However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.
+ Therefore, the .o-hidden is automatically applied to the table itself.
+ A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size. +

+ + + + + + + + + + + + + + + + + +
Head 1Head 2
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2
+ + table.table-stylish.table-p-s.border.r-l
+   thead>tr>th*2
+   tbody>tr*2>td*2 + +
+ +

Scrollable table

+
+

+ Scrollable tables can be obtained by combining the overflow utility classes and the + .table-no-wrap class to prevent cell from collapsing before scrolling. +

+

+ This special class can be applied to the following elements:
+ + table, + thead, + tbody, + tr, + th, + td + +

+

+ In turn, every td element under one of these elements will no longer wrap text. +

+ +
+ + + + + + + + + + + +
Table without the .table-no-wrap class
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque. + In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula. + Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl. + In hac habitasse platea dictumst. + Integer non libero tempor, sollicitudin lorem vitae, auctor arcu. +
+
+ +
+ + + + + + + + + + + +
Table with the .table-no-wrap class
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque. + In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula. + Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl. + In hac habitasse platea dictumst. + Integer non libero tempor, sollicitudin lorem vitae, auctor arcu. +
+
+ + + div.w-full.ox-scroll
+   table.table-stylish.table-p-s.border.r-l.table-no-wrap
+     thead>tr>th*2
+     tbody>tr*2>td*2 + +
+ +
\ No newline at end of file diff --git a/htdocs/parts/tables_site.php b/htdocs/parts/tables_site.php deleted file mode 100644 index 063e910..0000000 --- a/htdocs/parts/tables_site.php +++ /dev/null @@ -1,53 +0,0 @@ - - - -
-

Tables - -

-
-
- -
- ⚠️ These styles require a special workaround to work properly ⚠️ -
- -

Stylish table

-
-

- Tables can quickly be styled by simply using the .table-stylish class. -

-

- However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.
- Therefore, the .o-hidden is automatically applied to the table itself.
- A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size. -

- - - - - - - - - - - - - - - -
Head 1Head 2
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2
- - table.table-stylish.table-p-s.border.r-l
-   thead>th>td*2
-   tbody>tr*2>td*2 - -
- -
\ No newline at end of file diff --git a/htdocs/parts/text_styles.php b/htdocs/parts/text_styles.php index b685628..a3f0664 100644 --- a/htdocs/parts/text_styles.php +++ b/htdocs/parts/text_styles.php @@ -49,6 +49,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) { .t-overline N/A + +

Monospace

+

monospace text

+ .t-monospace + N/A +
diff --git a/scss/core/table.scss b/scss/core/table.scss index b577636..abee7ac 100644 --- a/scss/core/table.scss +++ b/scss/core/table.scss @@ -18,6 +18,15 @@ tr, td { } } +.table-no-wrap, +.table-no-wrap > td, .table-no-wrap > th, +.table-no-wrap > tr > td, .table-no-wrap > tr > th, +.table-no-wrap > thead > tr > td, .table-no-wrap > thead > tr > th, +.table-no-wrap > tbody > tr > td, .table-no-wrap > tbody > tr > th { + white-space: nowrap; + text-wrap: nowrap; +} + /* Core > Tables > Cell Padding */ diff --git a/scss/core/text.scss b/scss/core/text.scss index b99575d..a3c8959 100644 --- a/scss/core/text.scss +++ b/scss/core/text.scss @@ -95,6 +95,11 @@ s, .t-strikethrough { text-decoration: overline; } +// Defined in core/code.scss ! +//.t-monospace { +// font-family: monospace, monospace; +//} + /* Core > Text > Alignment */ diff --git a/scss/site/code.scss b/scss/site/code.scss index 27af743..c155862 100644 --- a/scss/site/code.scss +++ b/scss/site/code.scss @@ -1,6 +1,8 @@ // NibblePoker CSS Theme - CC0 1.0 (Public Domain) -code, .code, kbd { +/* Core > Code */ + +code, .code, kbd, .t-monospace { font-family: Consolas, "Courier New", monospace; }