Customizing a Discourse Forum for Non-Coders and Designers

I’ve had the privilege of moderating, growing, and designing Discourse forums. I wanted to create this guide as a quick walkthrough to help non-coders and designers customize their Discourse forum’s look-and-feel and play with coding! You will need to have admin permissions to do this.

1. Create a Header With Links!
These icons are links to other places your community lives, your blog, website, social media channels, or help pages! You can do as many, or few as possible.

Link: https://dzone.com/articles/customizing-a-discourse-forum-for-non-coders-and-d?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Putting things on top of other things

A plain-language romp through the trials and tribulations of z-indexby Isabel Brison. On the surface, z-index seems simple. It’s a number and it represents what is on top of what… assuming it is positioned… and assuming it is within the same stacking context as the other things.
… that is the gist of it: stacking contexts are caused by a variety of properties and the main reasons for their existence are performance concerns and ease of implementation by browsers. …
The post Putting things on top of other things appeared first on CSS-Tricks.

Link: http://tellthemachines.com/stacking-contexts/

Don’t use empty or low content for your design system grid examples

Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking about Intrinsic Web Design and how one of the core tenets of it is grids with rows and columns that don’t necessarily change at the same rate or ones that have essentially different rules for how they behave.
For example, take this (contrived) grid setup:
.grid {
display: grid;
grid-template-columns: 1fr minmax(50px, 100px) 20% auto;
}
Each of those columns will behave differently.

I’m just wrapping …
The post Don’t use empty or low content for your design system grid examples appeared first on CSS-Tricks.

Link: https://css-tricks.com/dont-use-empty-or-low-content-for-your-design-system-grid-examples/