Rebuilding slack.com – Several People Are Coding


53 bookmarks. First posted by andydavies 5 days ago.


We use some features of Grid that aren’t currently fully supported in all browsers, the most notable being percentage-based grid-gap. Although support for this has been implemented in some versions of Safari, we still needed to anticipate its absence. In practice, a Grid object is styled as follows:
@supports (display: grid) and (grid-template-columns: repeat(3, 1fr)) and (grid-row-gap: 1%) and (grid-gap: 1%) and (grid-column-gap: 1%) {
.c-photo-collage {
display: grid;
grid-gap: 1.5rem 2.4390244%;
}
.c-photo-collage > :nth-child(1) {
grid-column: 1 / span 3;
grid-row: 1;
}
.c-photo-collage > :nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.c-photo-collage > :nth-child(3) {
grid-column: 4;
grid-row: 1;
align-self: flex-end;
}
.c-photo-collage > :nth-child(4) {
grid-column: 3 / span 2;
grid-row: 2 / span 2;
}
};
Any browser that doesn’t meet the query requirements will use our flexbox fallbacks instead.
@supports not ((display: grid) and (grid-column-gap: 1%)) {
/* fabulously written CSS goes here */
}


---

Inclusive, from the start
Another major goal was to ensure that low-vision, screenreader and keyboard-only users could navigate the site with ease. While starting from a clean codebase, we were able to make many impactful improvements to color contrast, semantic HTML and keyboard accessibility with little additional effort. Additionally, we were able to work in some new features for a more accessible experience. We added a skip link before the navigation so that users could bypass the menu if desired. For a better screenreader experience, we added an aria-live region and helper functions to announce form errors and route changes. In addition, interactions are keyboard accessible with noticeable focus states. We also strived to use clear, descriptive alt text.
Looking Forward
There are always more wins to be had for better performance, maintainability and accessibility. We are refining our site telemetry to better understand where the bottlenecks lie and where we can make the most impact. We’re proud of the progress we have made; progress that will surely serve us well as we look to create a more pleasant experience for our customers around the world.
css  webdesign  webdev  grid  slack 
1 hour ago by sherbondy
In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a…
css  grid  @supports 
5 hours ago by lucasalvini
“Rebuilding ” by
from twitter
9 hours ago by codepo8
Mina Markham рассказывает о технологической составляющей редизайна маркетингового сайта Slack.
UX  coding  case  redesign  issue  CSS  design+systems 
2 days ago by jvetrau
In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a…
slack  web  css  grid  flexbox  webdesign  design 
3 days ago by beery
In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a…
css  grid  flexbox 
3 days ago by liquidx
“Rebuilding ” by
from twitter
3 days ago by jackysee
Slack's latest redesign uses CSS Grid as enhancement w/ fallback to Flexbox.

Nice read by
from twitter_favs
4 days ago by ideasatrandom
RT : Le redesign du site expliqué en détail :
from twitter
4 days ago by frato
In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a variety of teams, departments, and agencies.
css  slack  webdesign 
4 days ago by siggiarni
In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a…
4 days ago by bcm
A large part of the redesign was under the hood. Meet :spacesuit: our new UI framework.
from twitter_favs
4 days ago by elliottpayne
A redesign powered by CSS Grid and optimized for performance and accessibility. Illustrations by Alice Lee . In August, we released a major redesign of…
from instapaper
5 days ago by anglepoised
A redesign powered by CSS Grid and optimized for performance and accessibility. Illustrations by Alice Lee . In August, we released a major redesign of…
from instapaper
5 days ago by kohlmannj
. on how Slack optimized CSS (grid, type…) while rebranding
from twitter_favs
5 days ago by jitendravyas
“A redesign powered by CSS Grid and optimized for performance and accessibility.”
css  webdesign  cssgrid  responsivedesign  layout  sass 
5 days ago by beep
When writes a thing about responsive layout and CSS grid, I reads the thing.

On ’s redesign:
from twitter_favs
5 days ago by hendrasaputra
At first we tried to implement our layout with a traditional 12-column grid using CSS Grid. That approach ultimately didn’t work because we were limiting ourselves into a using a single dimensional layout when Grid is meant for two. In the end, we discovered that a column-based grid wasn’t actually needed. Since Grid allows you to create a custom grid to match whatever layout you have, we didn’t need to force it into 12 columns. Instead, we created CSS Grid objects for some of the common layout patterns in the designs.
css:grid  css  by:minamarkham  webdesign  slack 
5 days ago by dirtystylus
As promised, I wrote about building 's new site, featuring shiny new ✨ CSS Grid ✨
from twitter_favs
5 days ago by andydavies
As promised, I wrote about building 's new site, featuring shiny new ✨ CSS Grid ✨
from twitter_favs
5 days ago by joshpuetz