andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 504

Browse Source
This commit is contained in:
30secondsofcode
2019-10-02 06:54:34 +00:00
parent fea6b198a8
commit 3d8328fdfc
3 changed files with 99 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
snippet_data/snippetList.json
View File

@ -625,6 +625,21 @@
"hash": "97b037f3f463b8cf7de0cc12a607c540ffe8a4869323a4cc17c66eebbc92d612"
}
},
{
"id": "tile-layout-using-inline-block",
"type": "snippetListing",
"title": "3-tile layout",
"attributes": {
"text": "Align items horizontally using `display: inline-block` to create a 3-tile layout.\n\n",
"tags": [
"layout",
"beginner"
]
},
"meta": {
"hash": "ba4688945c309db9b6255f4555299034a67ea583e4e8db2806085c1c257b736f"
}
},
{
"id": "toggle-switch",
"type": "snippetListing",

27
snippet_data/snippets.json
View File

@ -1153,6 +1153,33 @@
"hash": "97b037f3f463b8cf7de0cc12a607c540ffe8a4869323a4cc17c66eebbc92d612"
}
},
{
"id": "tile-layout-using-inline-block",
"title": "3-tile layout",
"type": "snippet",
"attributes": {
"fileName": "tile-layout-using-inline-block.md",
"text": "Align items horizontally using `display: inline-block` to create a 3-tile layout.\n\n",
"explanation": "\n\n- Use `display: inline-block` to create a tiled layout, without using `float`, `flex` or `grid`.\n- `.tiles` is the container component, `.tile` is an item that needs to be displayed inline.\n- Use `width: calc((900px / 3))` to divide the width of the container evenly into 3 columns.\n- Set `font-size: 0;` on `.tiles` to avoid whitespace.\n- Set `font-size: 20px` to `h2` in order to display the text.\n\n",
"browserSupport": {
"text": "\n\n- https://www.caniuse.com/#search=inline-block\n",
"supportPercentage": 100
},
"codeBlocks": {
"html": "<div class=\"tiles\">\n <div class=\"tile\">\n <img class=\"tile_image\" src=\"https://via.placeholder.com/250x150\" alt=\"placeholder\" >\n <h2 class=\"tile_title\">30 Seconds of CSS</h2>\n </div>\n <div class=\"tile\">\n <img class=\"tile_image\" src=\"https://via.placeholder.com/250x150\" alt=\"placeholder\" >\n <h2 class=\"tile_title\">30 Seconds of CSS</h2>\n </div>\n <div class=\"tile\">\n <img class=\"tile_image\" src=\"https://via.placeholder.com/250x150\" alt=\"placeholder\" >\n <h2 class=\"tile_title\">30 Seconds of CSS</h2>\n </div>\n</div>",
"css": ".tiles {\n width: 900px;\n font-size: 0;\n}\n\n.tile {\n width: calc(900px / 3);\n display: inline-block;\n}\n\n.tile h2 {\n font-size: 20px;\n}",
"js": "",
"scopedCss": "[data-scope=\"tile-layout-using-inline-block\"] .tiles {\n width: 900px;\n font-size: 0; }\n\n[data-scope=\"tile-layout-using-inline-block\"] .tile {\n width: calc(900px / 3);\n display: inline-block; }\n\n[data-scope=\"tile-layout-using-inline-block\"] .tile h2 {\n font-size: 20px; }\n"
},
"tags": [
"layout",
"beginner"
]
},
"meta": {
"hash": "ba4688945c309db9b6255f4555299034a67ea583e4e8db2806085c1c257b736f"
}
},
{
"id": "toggle-switch",
"title": "Toggle switch",