User:Discoomastar/Sandbox6/notable - Revision history

>Canim44: #css → #widget/css

2020-02-23T23:43:43Z

#css → #widget/css

>Canim44: #css → #widget/css

2020-02-23T23:43:43Z

#css → #widget/css

>Canim44: #css → #widget/css

2020-02-23T23:43:43Z

#css → #widget/css

>Discoomastar: Created page with "Below you can see what some people do, shove non-tabular data into tables. Further down, you can see my solution, to use flexbox to achieve a cleaner and more responsive desig..."

2019-05-12T05:28:46Z

Created page with "Below you can see what some people do, shove non-tabular data into tables. Further down, you can see my solution, to use flexbox to achieve a cleaner and more responsive desig..."

>Discoomastar: Created page with "Below you can see what some people do, shove non-tabular data into tables. Further down, you can see my solution, to use flexbox to achieve a cleaner and more responsive desig..."

2019-05-12T05:28:46Z

Created page with "Below you can see what some people do, shove non-tabular data into tables. Further down, you can see my solution, to use flexbox to achieve a cleaner and more responsive desig..."

>Discoomastar: Created page with "Below you can see what some people do, shove non-tabular data into tables. Further down, you can see my solution, to use flexbox to achieve a cleaner and more responsive desig..."

2019-05-12T05:28:46Z

Created page with "Below you can see what some people do, shove non-tabular data into tables. Further down, you can see my solution, to use flexbox to achieve a cleaner and more responsive desig..."

New page

Below you can see what some people do, shove non-tabular data into tables. Further down, you can see my solution, to use flexbox to achieve a cleaner and more responsive design. Maybe tables look okay on large desktop screens, but they look REALLY BAD when on smaller screens, especially when they get really wide. Remember, tables are great for information that should be displayed in a table, like relational data. But for things that you just want to arrange in a way that makes them stand out, you don't need a table to do it.

----------

tables (bad) :

{| class="wikitable"
|-
! Header text !! Header text 2 !! Header text 3
|-
| Cupcake ipsum dolor sit amet pudding chocolate wafer cake. Ice cream gingerbread fruitcake sweet roll. Cake toffee sesame snaps cotton candy marshmallow pastry. Icing jelly chocolate cake lollipop gummies. Cookie fruitcake tiramisu dessert macaroon gummies fruitcake marzipan. Cupcake muffin cookie tiramisu ice cream. Chupa chups halvah muffin tootsie roll. Macaroon toffee oat cake chocolate cake apple pie candy canes. Chocolate cake dessert liquorice chocolate cake marshmallow gummies sweet pie gummi bears. Gummies cupcake dessert croissant. Gingerbread gummies carrot cake gummi bears icing cake toffee. Lollipop wafer cotton candy marshmallow chupa chups sweet gummi bears jujubes. Macaroon marshmallow gummies oat cake. Dragée pudding danish sweet roll jujubes dessert.
| Cupcake ipsum dolor sit amet pudding chocolate wafer cake. Ice cream gingerbread fruitcake sweet roll. Cake toffee sesame snaps cotton candy marshmallow pastry. Icing jelly chocolate cake lollipop gummies. Cookie fruitcake tiramisu dessert macaroon gummies fruitcake marzipan. Cupcake muffin cookie tiramisu ice cream. Chupa chups halvah muffin tootsie roll.
| Lemon drops gummies powder halvah. Gummi bears gummi bears dessert gingerbread oat cake. Topping pastry sweet roll cake powder halvah sweet roll biscuit. Gummies cheesecake danish muffin soufflé caramels marzipan marshmallow.

Candy canes jelly-o fruitcake cupcake tootsie roll. Marshmallow muffin jelly-o biscuit. Marzipan powder soufflé croissant jujubes gingerbread cotton candy.

Tootsie roll jelly-o marzipan cheesecake jelly chupa chups. Jelly-o chocolate carrot cake. Chocolate liquorice gingerbread. Jelly beans muffin candy canes pudding brownie.
|}

----------

no tables (good) :

{{#css:

.notable-wrap, .notable, .notable * {
box-sizing: border-box;
}

.notable-wrap {
display: flex;
flex-wrap: wrap;
}

/*desktop*/
@media screen and (min-width: 1000px) {
.notable-wrap > .notable {
width: 350px;
}
}

/*mobile*/
@media screen and (max-width: 999px) {
.notable-wrap > .notable {
width: 100%;
}
}

.notable {
display: flex;
flex-direction: column;
margin: 1em;
}

.notable > .notable-header {
background-color: rgb(77, 144, 94);
color: white;
text-shadow: rgba(0, 0, 0, 0.75) 0px 0px 0.25em;
font-weight: bold;
padding: .2em .5em;
border: 1px solid rgb(51, 102, 66);
text-align: center;
}

.notable > .notable-content {
background-color: #f8f9fa;
padding: .2em .5em;
border-right: 1px solid rgb(170, 170, 170);
border-left: 1px solid rgb(170, 170, 170);
border-bottom: 1px solid rgb(170, 170, 170);
color: rgb(34, 34, 34);
}

}}

<div class="notable-wrap">

<div class="notable">

<div class="notable-header">
Header text
</div>

<div class="notable-content">
Cupcake ipsum dolor sit amet pudding chocolate wafer cake. Ice cream gingerbread fruitcake sweet roll. Cake toffee sesame snaps cotton candy marshmallow pastry. Icing jelly chocolate cake lollipop gummies. Cookie fruitcake tiramisu dessert macaroon gummies fruitcake marzipan. Cupcake muffin cookie tiramisu ice cream. Chupa chups halvah muffin tootsie roll. Macaroon toffee oat cake chocolate cake apple pie candy canes. Chocolate cake dessert liquorice chocolate cake marshmallow gummies sweet pie gummi bears. Gummies cupcake dessert croissant. Gingerbread gummies carrot cake gummi bears icing cake toffee. Lollipop wafer cotton candy marshmallow chupa chups sweet gummi bears jujubes. Macaroon marshmallow gummies oat cake. Dragée pudding danish sweet roll jujubes dessert.
</div>

</div>

<div class="notable">

<div class="notable-header">
Header text 2
</div>

<div class="notable-content">
Cupcake ipsum dolor sit amet pudding chocolate wafer cake. Ice cream gingerbread fruitcake sweet roll. Cake toffee sesame snaps cotton candy marshmallow pastry. Icing jelly chocolate cake lollipop gummies. Cookie fruitcake tiramisu dessert macaroon gummies fruitcake marzipan. Cupcake muffin cookie tiramisu ice cream. Chupa chups halvah muffin tootsie roll.
</div>

</div>

<div class="notable">

<div class="notable-header">
Header text 3
</div>

<div class="notable-content">
Lemon drops gummies powder halvah. Gummi bears gummi bears dessert gingerbread oat cake. Topping pastry sweet roll cake powder halvah sweet roll biscuit. Gummies cheesecake danish muffin soufflé caramels marzipan marshmallow.

Candy canes jelly-o fruitcake cupcake tootsie roll. Marshmallow muffin jelly-o biscuit. Marzipan powder soufflé croissant jujubes gingerbread cotton candy.

Tootsie roll jelly-o marzipan cheesecake jelly chupa chups. Jelly-o chocolate carrot cake. Chocolate liquorice gingerbread. Jelly beans muffin candy canes pudding brownie.
</div>

</div>

</div>

← Older revision	Revision as of 23:43, 23 February 2020
(No difference)

@@ Line 1: / Line 1: @@
 Below you can see what some people do, shove non-tabular data into tables. Further down, you can see my solution, to use flexbox to achieve a cleaner and more responsive design. Maybe tables look okay on large desktop screens, but they look REALLY BAD when on smaller screens, especially when they get really wide. Remember, tables are great for information that should be displayed in a table, like relational data. But for things that you just want to arrange in a way that makes them stand out, you don't need a table to do it.
@@ Line 22: / Line 23: @@
 no tables (good) :
 <div class="notable-wrap">

← Older revision	Revision as of 05:28, 12 May 2019
(No difference)