Reverse Engineering Twitter’s CSS

Brand Color

/* 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

Measure the Responsiveness

Ranges of the responsive design in the twitter website

Creating Media Rules

/* 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

Why 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

/* 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?

<!-- 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

(Me talking at ConFrontJS 2019, Warsaw, Poland)

--

--

--

CSS & HTML Expert

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

http://ift.tt/2oiyyiI…

Networking: Setup where you can connect to specific websites only!

SAP Controlling — A Must learn for SAP FICO Consultant

Building a CLI to Improve Developer Productivity

Elite Edge Node BETA now live on Testnet with Uptime Mining — announcing 4% TFUEL inflation on…

Easy Start to Dictionary in C#

Project Lightbulb

Supercharge ⚡️ your DynamoDB single-table design pattern with TypeDORM

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
Elad Shechter

Elad Shechter

CSS & HTML Expert

More from Medium

SYNTAX VS SEMANTICS; NAMING CSS CLASSES

Stylify vs Master UI/Styles: next-generation Tailwind-like CSS libraries

Scroll Section to Section Animation with JavaScript

5 CSS Anti-Patterns that you should be aware of