Tachyons Layout Display
Tachyons is a free and open-sourceCSS toolkit that is used to create a responsive website very easily.
Tachyons Layout is used to define those sub-parts of a website. The Tachyons Layout Display is a display that is used to define the display of an element at any breakpoint.
Tachyons Layout Display Classes:
- .db: This class is used to create the element in the block, by declaring the display: block;, which inherently set width to 100% of its base element.
- .dib: This class is used to create the element in inline-block, by declaring display: inline-block;, that wrap around content inline.
- .di: This class is used to create the element in the inline, by declaring display: inline;, i.e. it helps to set content inline.
- .dt: This class is used to create a table with different sized cells, by declaring display: table;. It can be combined with display table-cell to render a table without table markup.
- .dtc: This class is used to display the table-cell without any table markup.
- .dt–fixed: This class is used to create the table with the same sized cells, i.e. it is used to set the table layout as fixed.
- .dn: This class is used to create the element with no property, by declaring display: none;.
Syntax:
<element-name class="display-class">...</element-name>
Example1: In the below example, we will make use of the display classes to demonstrate layout display.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <style> div { text-align: center; } </style></head> <body> <h2 style="color:green; text-align:center;"> GeeksforGeeks </h2> <h3 style="text-align:center;"> Tachyons Layout Display </h3> <span class="db" style="background-color:lightgreen; text-align:center;">GFG </span></body></html> |
Output:
Example 2: In the below example, we will make use of the display classes to demonstrate layout display.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= <style> div { text-align: center; } .dn { display: none; } </style></head> <body> <h2 style="color:green; text-align:center;"> GeeksforGeeks </h2> <h3 style="text-align:center;"> Tachyons Layout Display </h3> <span class="di" style="background-color:lightgreen; text-align:center;">GFG </span> <br> <p class="dn">GeeksforGeeks</p> </body></html> |
Output:
Reference: https://tachyons.io/docs/layout/display/
Please Login to comment...