Smoothly Expanding Search Box with CSS Transitions and Tailwind CSS

Are you looking to create a search box that expands smoothly when it becomes active? You can achieve this effect using CSS transitions and Tailwind CSS.

To get started, create an HTML input element with the desired styling using Tailwind CSS classes. Then, add the transition-all and duration-500 classes to the input element to specify that all CSS properties should have a smooth transition effect over a duration of 500 milliseconds.

Finally, use the transform property to scale the width of the input element to the desired value when it becomes active. For example, you can use the focus:w-64 class to set the width to 64 Tailwind units when the input element is focused.

Here's the code for the HTML input element with the necessary Tailwind CSS classes:

<input type="text" placeholder="Search..." autocomplete="off"
       class="rounded-md bg-gray-400 border-gray-200
       border-2 text-gray-800 p-1 w-28 focus:bg-white
       focus:flex-1 focus:pr-12
       transition-all duration-500 transform focus:w-64">

By adding these classes, you should see a smooth transition effect as the search box expands when it becomes active. You can adjust the duration and transform values to customize the effect to your liking.

CSS Container Queries

I've always seen responsive elements styled with CSS media queries. These often need more media queries to make them look good on different page sections. There's a way to skip the headache.

Use of container queries to apply CSS styles with the element's container size in mind instead of the viewport size:

/* Create a container context */
.container {
  container-type: inline-size;
}

/* Default font size */
.card h2 {
  font-size: 1em;
}

/* Updated font size when the container is larger than 500px */
@container (min-width: 500px) {
  .card h2 {
    font-size: 2em;
    color: gray;
  }
}

<div class="container">
  <div class="card">
    <h2>Card title</h2>
  </div>
</div>

Example

Fr Unit with CSS Grid Layout

I read about CSS Grid Layout, and I found the Fr unit, so I have to try it out.

From w3.org:

Flexible Lengths: the fr unit A flexible length or is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container.

The distribution of leftover space occurs after all non-flexible track sizing functions have reached their maximum. The total size of such rows or columns is subtracted from the available space, yielding the leftover space, which is then divided among the flex-sized rows and columns in proportion to their flex factor.

Each column or row’s share of the leftover space can be computed as the column or row’s * / .

Read more about fr unit

See this example:

CSS:

.grid-container { 
  max-width: 100%; 
  margin: 3em auto; 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: 50px 200px 50px; 
  grid-template-areas: "head head2 head3 head4" "main main2 main3 main4" "footer footer footer footer"; 
} 

Result:

  grid-template-columns: repeat(4, 1fr); 

1fr is for 1 part of the available space, each column take up the same amount of space.

I will update the 3rd column to size up to 4fr

CSS:

.grid-container { 
  max-width: 100%; 
  margin: 3em auto; 
  display: grid; 
  grid-template-columns: 1fr 1fr 4fr 1fr; 
  grid-template-rows: 50px 200px 50px; 
  grid-template-areas: "head head2 head3 head4" "main main2 main3 main4" "footer footer footer footer"; 
} 

Result:

See a live example: CSS Grit: Fr Unit by Victor Velazquez (@vicmaster) on CodePen.

That's all folks!

data-scheme to add styles!

If you need to add styles to an element when the page is in dark mode, simply use the data-scheme of the page followed by the class or ID of the element you want to add styles to.

[data-scheme="dark"] .js-subs-text-inputs {
   color: #FFFFFF;
}

:is() pseudo-class - CSS

When we apply the same style to multiple selectors on CSS we use to do something like this:

.section-header h1,
.section-header span,
.section-header .heading {
  line-height: 1.2;
}
.navigation li,
.navigation p {
  padding: 5px 10px;
}

With :is() we can write our CSS in a shorter way.

.section-header :is(h1, span, .heading) {
  line-height: 1.2;
}
.navigation :is(li, p) {
  padding: 5px 10px;
}

Change the starting point for your ordered lists.

Use the start attribute to change the starting point for your ordered lists.

<ol start="10">
  <li>Git</li>
  <li>Ruby</li>
  <li>JS</li>
  <li>PostgreSQL</li>
  <li>CSS</li>
  <li>HTML</li>
</ol>

Output:

10. Git
11. Ruby
12. JS
13. PostgreSQL
14. CSS
15. HTML

Comma-Separated Lists

Separate list elements with commas but not the last one:

ul > li:not(:last-child)::after {
  content: ",";
}

Example

• Hello,
• There,
• Comma

Source: AllThingsSmitty

Styling broken links

<img src="http://bitsofco.de/broken.jpg" alt="Broken Image">

img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

See the Pen Styling Broken Images by Victor Velazquez (@vicmaster) on CodePen.

Original source: bitsofco.de

Use the browser to validate email fields

You are using HTML5 typed text input fields, aren't you?

If you make an input element with type="email" and you make it required, then the browser will take care of making sure that the email is valid on form submit. Automatically.

Doesn't eliminate the need for validation on the server side, or does it?

Clearfixing is much easier these days

Hadn't needed to do a clearfix in awhile and thought I would have to do something like this:

.container::after {
    content:"";
    display:block;
    clear:both;
}

Or even worse...

.container::before, .container::after {
    content:"";
    display:table;
}
.container::after {
    clear:both;
}
.container {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

Then I was pleasantly surprised to learn that on modern browsers you just have to set the overflow property to auto on the containing element and you should be good to go.

.container {
  overflow: auto;
}

The most useful CSS printing directive

@media print {
    div {page-break-inside: avoid;}
}

Should be self-explanatory. Note that you can't use this property on absolutely positioned elements, but other than that, it pretty much works perfectly for preserving logical chunks of content in printed output.