DEV Community: Christian von Uffel

Why People Designing Websites with Standard CSS Should Switch to Tailwind

Christian von Uffel — Fri, 09 Apr 2021 22:09:26 +0000

When I decided to teach myself Tailwind it was mostly because I had become frustrated with the standard CSS framework.

I was building websites using standard CSS, but I was getting annoyed trying to set up responsive design properties and found myself jumping back-and-forth between my HMTL and CSS files to make sure I was connecting the right properties to the right elements.

Working with standard CSS was cumbersome and I knew there had to be a better way.

In my process of learning standard CSS, I had heard about Tailwind several times before. It was touted as the next new thing and while I had heard it spoken about only positively I had also learned to heed other programmers advice, which is to be wary of investing in new frameworks.

As I have learned, frameworks can be mirages of added productivity; things that look great from afar, but once you begin to actually put in the effort and use them realize that they offer no material value.

Well, I’m here to tell you that Tailwind is not one of those frameworks lacking real material value. I enjoy using it myself. Not because I have to, but because I find it really useful while working on small projects.

Here's what Tailwind does for me that makes me find it so useful:

Tailwind helps me keep my creative momentum going when I create and design elements.

Normally, when I'm creating HTML and CSS I have to think about them abstract from each other and then connect them using an additional number of steps.

I need to think of class names and I need to organize CSS properties in different sections of the CSS file so it looks good on both desktop and mobile devices.

#tagline {
  text-align: center;
  padding-top: 192px;
  padding-bottom: 64px;
  max-width: 640px;
}
@media screen and (max-width: 414px) {
  #tagline {
    text-align: center;
    padding-top: 128px;
  }
}

I need to go back and forth between adjusting CSS class properties and seeing how content looks in my browsers.

Making adjustments to my content and its style in different files makes it harder for me to mentally keep track of the changes, stay organized, and designing quickly.

Small additional steps in my code’s organization and holistic thought process cause me to lose momentum.

Contrast that with working with Tailwind.

<div class="max-w-screen-sm text-center pt-32 sm:pt-48 sm:pb-16"> </div>

In Tailwind, I think about what I want to create and design it in the flow. I don’t need to come up with CSS class names and ids. I don’t need to search for CSS class and id names to adjust the appropriate property of a global element, or then have to worry about if I’ve made a change that will break how something else works.

Now if you normally implement your web designs using standard CSS, you may be wondering how Tailwind is different from in-line styles.

The answer is that in-line styles don't allow you to include responsive media queries, meaning that in traditional CSS you are forced to use media queries by declaring them in your CSS.

But of course, you also know if you use media queries that the class names and ids must also then be duplicated into separate sections which then prevent you from seeing both desktop and mobile device settings in a single view.

Of course, this separation between desktop and mobile within your design thought process poses a very significant problem.

Without having an easy way to see both types of devices style code, you’ll likely be spending more time and effort testing your website or application’s front-end design.

For me, that would mean spending more time in the responsive design tool of Mozilla’s developer edition browser, but for you, that may require testing on multiple browsers including, god forbid, Internet Explorer.

So if you're using standard CSS you have to jump around inside of the CSS file to see how the design is connected to your content.

In Tailwind, you can see how content is designed for different screen sizes directly simply by reading the class names of the content itself.

The trade-offs of using Tailwind

Using Tailwind requires you to have a decent understanding of CSS to get fully up and running.

People who are new to CSS may not feel comfortable using Tailwind, just like they might have difficulty designing standard websites from scratch.

Tailwind uses different syntax than standard CSS to declare style properties. This syntax is based on standard property names and attempts to be both shorter and more readable, however, you’ll still need to learn this new set of syntax to implement Tailwind into your designs.

Luckily, for people who are looking to transition to using Tailwind, you'll be pleased to hear that Tailwind has some of the best documentation of any framework on the Internet.

As cumbersome as it might be to read the documentation for different JavaScript methods on Mozilla’s MDN, the experience of reading the documentation for Tailwind is a polar opposite.

In every possible example I have found, searching how to implement a specific CSS property in Tailwind has resulted in me finding a well written and accessible example of both the style being implemented in practice and exactly how I can implement it myself.

Unlike other framework’s homework-like documentation, Tailwind’s documentation is a pleasure to use.

Shortcomings of using Tailwind

Just because Tailwind is a CSS framework I find extremely useful doesn't mean that it doesn't have some drawbacks.

You will find yourself creating custom CSS to implement typography and implement global values if you have established brand guidelines, color values, and non-standard element properties.

If you’re creating blog content and long-form writing, you will instantly be struck by Tailwind’s complete reset of HTML element design, which renders your previously easy and repetitive use of standard HTML elements to style your articles and long-form content useless.

Of course, you could recreate your styles using custom CSS again, but thankfully the team behind Tailwind has heard its users' repeated cries and created a solution: Tailwind Typography.

Tailwind’s Typography plugin lets you style content using standard HTML elements like you’re used to. All you need to do is install the plugin and declare "prose" as a class property before you can start writing like you used to. So if you were worried about having to style every header tag, fret not.
Another shortcoming of Tailwind is if you’re mindful of performance, specifically data and speed.

Tailwind's CSS package is large. The package size of loading the entire library into your site according to Tailwind is 45.2kB compressed and 1941.7kB raw.

That’s a pretty hefty file to ask users to load before they can see your site’s content. However, as Tailwind’s team and documentation will readily tell you, this size is not representative of Tailwind’s true file size.

That’s because when you’d be using Tailwind within a production-ready application you wouldn’t need to include the thousands of utility classes that Tailwind offers as options, but instead can shed off the vast majority of its size so you would only use the tiny fraction being utilized on your site.

3 Things I Learned Recreating Stripe's Pricing Page

Christian von Uffel — Thu, 04 Feb 2021 06:34:29 +0000

Check out the project:

My Recreation of Stripe's Pricing Page

Compare it to the original:

Stripe's Pricing Page

SVG offers animation and design advantages beyond performance

Most people know using SVG is a great way to save on performance for the loading time of your website.

One thing you may not know however is that SVG icons can easily be styled and animated in ways other image formats may not.

You can fill the color of SVG image icons using CSS' background clip property.

You can also animate SVG images by morphing the SVG image's path on hover state.

It's easier to use absolute and relative positioning to create background element layouts than adjusting z-index values

Stripe's pricing page, like many webpages, uses background layouts to add visual flair without distracting users from important customer messaging.

These background elements can be easy to create when they're composed of simple background color transitions, full-page cover images, and hero patterns, but when the background is itself composed of grid elements developers need a slightly more detailed understanding of how to use and implement absolute and relative positioning.

<!-- background color grid -->
<div class="relative min-h-screen">
  <div class="absolute inset-0 transform -skew-y-12 origin-top-left">
    <div class="bg-green-100 grid grid-cols-10 grid-rows-6 min-h-screen bg-gradient-to-r from-green-400 to-green-200 transform">
    <div class="bg-green-200 opacity-50 row-start-3 col-span-2"></div>
    <div class="bg-green-100 opacity-50 row-start-5 col-start-9 col-span-2"></div>
   </div>
</div>

Deeper appreciation for purposeful simplicity in design and engineering

While I was doing research on Stripe's design and engineering I came across great content on their blog.

Connect: behind the front-end experience offered many insights.

Some of my key takeaways:

Stripe's team uses CSS instead of image files to render how Stripe's platform looks on devices to reduce file sizes and increase performance beyond even what efficient image file formats like SVG offer.

"We can add hardware-acceleration, animate any part, make it responsive without losing image quality, and precisely position DOM elements (e.g. other images) within the laptop’s display. This flexibility doesn’t mean giving up on clean code—the markup stays clear, concise and descriptive"

<div class="laptop">
  <span class="shadow"></span>
  <span class="lid"></span>
  <span class="camera"></span>
  <span class="screen"></span>
  <span class="chassis">
    <span class="keyboard"></span>
    <span class="trackpad"></span>
  </span>
</div>

Descriptions of tradeoffs between different types of web animation:

"CSS transitions. This is the fastest, easiest, and most efficient way to animate. For simple things like hover effects, this is the way to go."

"Web Animations API...This should be your default choice for any animation where you need interactivity, random effects, chainable sequences, and anything richer than a purely declarative animation."

A few other Stripe articles I enjoyed reading:

To design and develop an interactive globe

"The most straightforward way to animate individual dots is to generate them in a three-dimensional space. To do this, we reused the code from our SVG to generate rows of dots as geometry in Three.js. Each row includes a different number of dots, from zero at the poles to five hundred at the equator. We used a sine function to choose the number of dots for each row, plotted each dot, and applied the lookAt method to rotate each dot to face the center of the sphere. However, the number of dots jumped inconsistently along a few latitudes, creating harsh lines and an unnatural effect in the longitudinal columns."

"we turned off the antialias parameter of the WebGL renderer. This one change not only fixed the issue on high-res monitors, but also improved performance of the animation and smoothness of scrolling on all devices, even those already running at 60fps. One might assume that removing antialiasing would make everything look pixelated. Since it only applies to the edges of the geometry, our image textures were still smooth and gradients and lighting were unaffected."

Designing accessible color systems

"the way HSL calculates lightness is flawed. What most color spaces don’t take into account is that different hues are inherently perceived as different levels of lightness by the human eye—at the same level of mathematical lightness, yellow appears lighter than blue."

"When we take a sample of colors with the same lightness and saturation in a perceptually uniform color space, we can observe a significant difference. These colors appear to blend together, and each color appears to be just as light and as saturated as the rest."

How Stripe teaches employees to code

"It’s easy for familiarity with code to become a barrier between different groups within a technology company: lots of companies have an upper tier of code-wrangling wizards that are supported by the rest of the company, sometimes known as the non-engineers. From the beginning, we’ve tried hard to avoid this at Stripe. In seating, we mix engineering teams with non-engineering teams. When we hire, we seek out engineers who are excited about problems beyond code itself."

Recreating Notion's Homepage with Tailwind CSS and Vue JS

Christian von Uffel — Mon, 25 Jan 2021 20:23:48 +0000

View the Project:

My Recreation of Notion's Homepage

Compare it to the Original

Notion's Homepage

Deciding what to build to showoff my front-end skills

When I first decided to build something ~~for the Digital Ocean Hackathon~~ to show off my front-end webdev skills, I asked myself "What would be useful for a real business?"

The answer I came to is recreating the website of a real business, a business whose website is so important to them that it serves as a foundation of how they do business and serve their customers.

The first criteria I had was obvious to me: the business whose website I chose to recreate had to be huge, or at least hugely valuable.

The second criteria was less obvious: the business' website had to not depend on the use of outside assets and graphics to make it look nice. Pretty assets don't show off my front-end skills and don't show off how I can best help businesses.

So I wanted to recreate an existing successful business' website that uses a variety of CSS skills: flexbox, grid, and a variety of styles for images, text, and a lot of data that needed to be managed in a robust way.

After all, part of the reason I decided to recreate a serious internet business' homepage, is that I wanted to improve my front-end webdev process and this offered me the perfect challenge: totally doable, yet more complicated than any page I've created before.

I looked at a few sites before I chose one:

First I looked at Nike because I like their branding, but after looking at their website, I realized most of my work recreating it would just be copying their media assets.

Sure, I could recreate their navigation menus using flexbox and product displays using grid, but most of my work wouldn't show through.

Second, I looked at Stripe. Stripe's website is beautiful, but boy is it complicated and, secondly, it has the same problem as Nike: recreating Stripe's website depends on using a lot of outside assets, except it's worse! Stripe's website uses assets that are harder to access and implement.

Still, Stripe's website uses some pretty cool layout designs I could recreate using grid. Maybe this is something I'll revisit later.

Lastly, I looked at Notion. Notion's website, like their application, is beautiful, friendly, and accessible. It uses a bunch of assets, but, unlike Stripe and Nike's websites, doesn't rely on them. It uses modern CSS skills like flexbox and grid and a lot of text data that's managed best dynamically using components.

Notion's homepage was the clear and obvious winner.

My Process

One thing I decided early on was that I wasn't going to look at the original webpage's code. If someone wants to hire me to create a website for them, I don't have any starting code to work with so I'm not going to use that here either. They'll simply hand me off some wireframes from Figma or Sketch with the assets I need and/or a validated product spec.

I recreated all the page's designs and layout by sight.

No inspecting code, no copying code. All translating what I see into what write.

For me, there's only one good solution for this "what you see is what you code" sort of webdev framework and that's Tailwind CSS

Tailwind is great because it removes the layer of abstraction and lock-in that makes global CSS so unmanageable.

Next, there's data. All the data serious internet business websites use is managed dynamically using components.

<!-- testimonials section -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-12 md:gap-16 p-8 md:p-16 mx-auto">
    <a href="#" v-for="testimonial in testimonials" class="bg-gray-100 rounded-lg border border-gray-100 hover:border-gray-300 p-4 flex flex-col items-start">
        <img :src="testimonial.companyLogo" :alt="testimonial.sourceTitle" class="h-12 object-contain object-left overflow-hidden">
        <div class="text-lg my-6 h-full">
            "{{testimonial.content.trim()}}"
        </div>
        <div class="text-sm flex">
            {{testimonial.source}}
        </div>
        <div class="text-sm text-gray-700 capitalize">
            {testimonial.sourceTitle}}
        </div>
    </a>
</div>

You alter design and data using two separate processes which keep both safe from accidental changes to each other.

testimonials:[
    {
        companyLogo:"images/blinkist.png",
        content:"On notion, everything is in one place and everyone can find what they need on their own. We have cut down on interruptions, and stayed more focused on priorities.",
        source:"Milica Radojevic",
        sourceTitle:"People experience partner, Blinkist",
    },
    {
        companyLogo:"images/figma.png",
        content:"Notions ease-of-use is one of its hallmarks. It helps you visually navigate contact and remember where something is.",
        source:"Marie Szuts",
        sourceTitle:"Head of people ops, Figma",
    },
    {
        companyLogo:"images/duolingo.png",
        content:" we wouldn't be able to customize our workflow like this in any other product",
        source:"Justin Goff",
        sourceTitle:"product manager, duolingo",
    },
],

Components let you update how data's displayed across your website without updating individual pages one by one.

Avoiding code duplication helps you avoid making errors that make your website harder to manage, less friendly to use, and less focused on satisfying your users.

I manage the webpage's data using Vue JS. Its fast modern framework makes managing data easy and reliable.

But there's one problem with Vue JS and that's SEO.

Vue JS, like React and Angular, render a webpage's content dynamically, so they're not good for SEO.

To solve this problem, my next steps are rebuilding this site
using NUXT JS which builds static HTML pages to get all the benefits of dynamic rendering and component organization from Vue JS with all the SEO benefits of static HTML.

CSS Properties I Learned

pointer-events-none

Makes images non-draggable

CSS Properties I knew, but hadn't used before

flex-row-reverse

Useful for conditionally reversing the orientation of your footer elements on mobile, such as when you want to show a copyright notice on the left in your footer on desktop, but below everything else on mobile.