Reverse Engineering Twitter’s CSS

Brand Color

Given that on Twitter, the light blue brand color is the prominent hue and is the base for the rest of the blue hues on the site, it makes sense to define the brand color using the CSS HSL color function and put the hue value in a CSS native variable. Doing so enables us to update the rest of the hues in one place.

/* common blue */
--base-color:203; /* base hue of blue*/
--main-color: hsla(var(--base-color), 89%, 53%, 1);
--hover-color: hsla(var(--base-color), 89%, 47%, 1);
--bg-hover-color: hsla(var(--base-color), 89%, 53%, 0.1);

Let’s Talk About Responsiveness

Responsive design has been around for quite a while, yet it is still something with which many web developers struggle. This tip will help you create a responsive website more easily:

Measure the Responsiveness

First, we need to determine the range of every breakpoint in Twitter’s responsive design. Breakpoints in a responsive website are the places, i.e., the widths, in which the website’s layout should change. We implement these layout changes by adding or changing the styles within media-queries targeted at the various widths.

Ranges of the responsive design in the twitter website

Creating Media Rules

After understanding breakpoints, it is essential to understand how to create media rules inside the responsive design breakpoints. One of the most important guidelines in my methodology of “Basic First” is that if a certain style in a small screen isn’t used in the next screen size, we should encapsulate that style in a media query breakpoint. This way we control which style affects the bigger screen and which doesn’t.

/* Responsive Variables (using Sass) */
$break1: "(max-width:499px)";
$break2: "(min-width:500px) and (max-width:1004px)";
$break2open:"(min-width:500px)";
$break3: "(min-width:1005px) and (max-width:1094px)";
$break3open:"(min-width:1005px)";
$break4: "(min-width:1095px) and (max-width:1281px)";
$break4open:"(min-width:1095px)";
$break5open:"(min-width:1282px)";

Let’s Talk About Layout in 2020

Now that the web industry has adopted CSS Flexbox — which has taken quite a long time — it is time to adopt CSS Grid.

Why CSS Grid?

CSS Grid gives you an easy way to create a website’s base structure. Even though we can create this Twitter example using CSS Flexbox, in my personal opinion, creating the website’s main grid, is better and much easier using CSS Grid.

/* Grid Layout */
.main-grid{
display: grid;
justify-content: center;
min-height: 100vh;
margin: 0 auto;
@media #{$break1}, #{$break2}{
.main-side{ display: none; }
}
@media #{$break2}{
grid-template-columns: auto minmax(auto, 600px);
max-width: 705px;
}
@media #{$break3open}{
grid-template-columns: auto 600px minmax(290px, 350px);
}
@media #{$break4open}{
max-width: 1235px;
}
}

CSS utility Classes

In the past few years, we’ve started seeing full frameworks such as Tailwind CSS, which take the utilities class one step forward. The advantages of this approach might be that we can quickly build web pages and that the CSS file sizes are small; however, its disadvantage is that the HTML loses all its semantics, and this makes it harder for us to understand our components.

/* utility classes */
.u-hide { display:none !important; }
.u-block { display:block !important; }
.u-flex { display:flex !important; }
.u-space-between { justify-content:space-between !important; }
.u-common-padding { padding:10px 15px !important; }
.u-margin-auto { margin:auto !important; }
.u-margin-start-auto { margin-#{$start-direction}:auto !important; }
.u-margin-bottom { margin-bottom:10px !important; }
<a class="u-block u-common-padding" href=""></a><ul class="message-options u-flex u-space-between">...</ul>

What is a Partial?

The question of what a partial is seems like a fundamental question, and therefore we feel that the answer should be simple. However, understanding which part should exist on its own and learning how to break a component into partials is a trial and error process that goes on as you gain more and more experience.

<!-- Feed Partial -->
<section class="feed">
<ul class="feed-list">
<li class="feed-item">
<!-- Item Partial -->
<article class="tweet-item">
...
</article>
...
<!-- message options partial --><ul class="message-options">
<li class="message-options-item">
<label>
<button class="icon-button">
<span class="icon">💬</span>
</button>
<span class="text"></span>
</label>
</li>
...
</ul>
<a class="embed-content" href="...">
<img class="embed-content-image" src="..." alt="">
<div class="embed-content-text">
<h2 class="embed-content-title">...</h2>
<p class="embed-content-paragraph">...</p>
<footer class="embed-content-info">
<span class="icon">🔗</span>
<span class="text">medium.com</span>
</footer>
</div>
</a>

Final Words

I hope I inspired you and showed you some new possibilities.
If you liked this post, I would appreciate applause and sharing 🙂.

(Me talking at ConFrontJS 2019, Warsaw, Poland)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store