veganism.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Veganism Social is a welcoming space on the internet for vegans to connect and engage with the broader decentralized social media community.

Administered by:

Server stats:

293
active users

#cssgrid

0 posts0 participants0 posts today
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Techniques</span></a><br>Enhancement of a simple layout · Smarter layout flow using CSS subgrid <a href="https://ilo.im/165g9x" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/165g9x</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/Columns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Columns</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/FluidDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssSubgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssSubgrid</span></a></p>
WebHeads United<p>Ready to master responsive design? Our latest blog post explores the 12-column grid system, the blueprint for creating stunning, flexible layouts that adapt to any screen. Learn how to build structured, user-friendly websites.</p><p>Read more here: <a href="https://webheadsunited.com/mastering-the-12-column-grid-system/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">webheadsunited.com/mastering-t</span><span class="invisible">he-12-column-grid-system/</span></a></p><p><a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/ResponsiveDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ResponsiveDesign</span></a> <a href="https://mastodon.social/tags/CSSGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSGrid</span></a> <a href="https://mastodon.social/tags/FrontEndDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEndDev</span></a> <a href="https://mastodon.social/tags/UIUX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIUX</span></a></p>
Ana Tudor 🐯<p>2️⃣ `feColorMatrix`: swap channels ☆ interactive demo, adaptive layout - check it out on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/full/QWopRMK" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/full/QW</span><span class="invisible">opRMK</span></a></p><p>An interactive, responsive demo illustrating how `feColorMatrix` can be used to swap channels. Another very special one.</p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> <a href="https://mastodon.social/tags/interactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>interactive</span></a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> </p><p>Behind the demo <a href="https://mastodon.social/@anatudor/112242678457752295" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1122</span><span class="invisible">42678457752295</span></a></p>
Ana Tudor 🐯<p>Help? 😟</p><p>Stupid <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> question: why isn't my <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> respected?</p><p><a href="https://codepen.io/thebabydino/pen/xbGeReB" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/xbG</span><span class="invisible">eReB</span></a></p><p><a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Techniques</span></a><br>Safe align your content · The CSS ‘safe’ keyword is worth knowing <a href="https://ilo.im/164jgu" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/164jgu</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/Container" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Container</span></a> <a href="https://mastodon.social/tags/Alignment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Alignment</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CssFlexbox</span></a></p>
Ana Tudor 🐯<p>If a grid has `n` columns, it has `n - 1` gaps in between them. Enjoy this interactive <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo illustrating the concept: <a href="https://codepen.io/thebabydino/pen/LEVqOpZ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEV</span><span class="invisible">qOpZ</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>5️⃣ 850 ♥️ No SVG, no image fluid slider <a href="https://codepen.io/thebabydino/pen/qByGqOm" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qBy</span><span class="invisible">GqOm</span></a></p><p><a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> used only for<br>a) feature support detection<br>b) updating slider value in --val</p><p>Uses only<br>1 × input[type=range] for actual slider<br>1 × output for current value display<br>1 × datalist for ruler</p><p>One of my best sliders on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span>. </p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/slider" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>slider</span></a> <a href="https://mastodon.social/tags/rangeInput" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rangeInput</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMask</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/tinyCSSsnippet" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSSsnippet</span></a> I've been shocked 🙀 to learn has been slept on:</p><p>```<br>.container { display: grid }<br>.stacked-item { grid-area: 1/ 1 }<br>```</p><p>I use it all the time to stack elements.</p><p>Stack faces of polyhedra before positioning them in 3D. Stack images. Stack 🥧 slices <a href="https://codepen.io/thebabydino/pen/XWvKjJJ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XWv</span><span class="invisible">KjJJ</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>geometry</span></a></p>