| Account | Balance | Limit | Available | |
|---|---|---|---|---|
| 1110-26-000487 Checking Account | -250.000 | 500.000 | 250.000 | Transfer |
| 1110-26-000487 Savings | 1.000.000 | 0 | 1.000.000 | Transfer |
| 1110-26-000487 Joint Account | 150.000 | 0 | 150.000 | Transfer |
| Total (USD): | 900.000 | 500.000 | 1.400.000 |
See the Pen Responsive tables using CSS Grid Layout by Gilli Sigurðs (@gilli) on CodePen.
## Why? Now you may be thinking “But Gilli, why do we use tables at all then? Wouldn't it be simpler to just use CSS grid all the time". Here are some of the reasons to use tables: * This is tabular data so using tables makes perfect sense. * For Accessibilities sake since it should be more understandable for screen readers and shouldn't surprise the user. * This approach can be used on an already existing codebase to make it responsive without having to rebuild everything. In fact you could probably get away with only adding CSS and not touching the html. * People are already familiar with tables and expect them. However if the content is much more readable without it then by all means go for it. ## Conclusion and caveats Overall I think CSS Grid Layout is incredibly powerful to transform content completely and adapt it to whatever scenario you need to. I haven't used this solution in a production environment yet so there might be some more problems that I haven't thought of but mostly I haven't see any big ones so far, (link:https://caniuse.com/#search=css%20grid%20layout http:// text: except for browser support of course). However here are a couple of caveats that you should keep in mind before using this: * You can't dump any table with any content into it and be good to go. You have to actually think about the content for each table and how it should fit. * It doesn't support huge tables without either creating monster stacks or hiding a lot of the columns.]]>{ "rules_out_of_stock" : {
"LABEL" : "Out of Stock",
"PLUGIN" : "reaction rule",
"REQUIRES" : [ "rules", "entity" ],
"ON" : [ "commerce_product_presave" ],
"IF" : [
{ "entity_is_of_type" : { "entity" : [ "commerce-product" ], "type" : "commerce_product" } },
{ "data_is" : { "data" : [ "commerce-product:commerce-stock" ], "value" : "0" } }
],
"DO" : [
{ "data_set" : { "data" : [ "commerce-product:status" ], "value" : 0 } }
]
}
}
This rule is the courtesy of akalata and was found [here](http://drupal.org/node/1689458#comment-6619434)
When enabled, this rule will disable product variations that are out of stock. So let's say you have a sweater with 3 different sizes: "Small", "Medium" and "Large". Once one of them reaches 0 in stock, the rule will disable that variation leaving only Medium and Large to choose from. So when the last available size runs out of stock the add to cart button will say: "Product not available"
Another rule found on the same page and created by [kirie](https://www.drupal.org/node/1689458#comment-6761182) is also pretty useful alongside this one since it enables the variation again once it is back in stock. Just in case you forget to enable it when adding more stock:
{ "rules_stock_enable_product_when_back_in_stock" : {
"LABEL" : "Stock: enable product when back in stock",
"PLUGIN" : "reaction rule",
"TAGS" : [ "Emoda" ],
"REQUIRES" : [ "rules", "entity" ],
"ON" : [ "commerce_product_presave" ],
"IF" : [
{ "entity_is_of_type" : { "entity" : [ "commerce-product" ], "type" : "commerce_product" } },
{ "data_is" : {
"data" : [ "commerce-product:commerce-stock" ], "op" : "\u003E", "value" : "0"
}
}
],
"DO" : [
{ "data_set" : { "data" : [ "commerce-product:status" ], "value" : 1 } }
]
}
}
.view-collection-products .field-type-commerce-product-reference {
padding: 0;
margin: 0;
}
.view-collection-products .field-type-commerce-product-reference form.commerce-add-to-cart .form-submit.form-button-disabled {
margin: 0;
margin-top: -120px;
background: #FF4747;
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
border-radius: 0;
}
.view-collection-products .field-type-commerce-product-reference form.commerce-add-to-cart {
padding: 0;
height: 1px;
}
.view-collection-products .commerce-add-to-cart.in-stock {
display: none;
}
.page-products .field-type-commerce-product-reference {
padding: 0;
margin: 0;
}
.page-products .field-type-commerce-product-reference form.commerce-add-to-cart .form-submit.form-button-disabled {
margin: 0;
margin-top: -120px;
background: #FF4747;
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
border-radius: 0;
}
.page-products .field-type-commerce-product-reference form.commerce-add-to-cart {
padding: 0;
height: 1px;
}
.page-products .commerce-add-to-cart.in-stock {
display: none;
}