Today we are going to give you some CSS snippets that we use on our websites. CSS snippets are very useful because they save you time and energy while coding. When you are working on a project, you might find yourself using the same code over and over again. If you are working with a team, you will also need to share these snippets with your fellow developers. As a front-end developer, you spend a lot of time doing repetitive work. Whether it's a button, a navigation bar, or a gallery, the code is frequently the same. That's where snippets come in handy. In this post, we'll go over 5 CSS snippets that can help you save time and streamline your workflow. All of these CSS snippets are free to use, and you can adapt them to fit your needs. Just remember to link back to us!

1. CSS Snippet For Vertically Align in Center

Vertically aligning is quite controversial in which method works best. We know there are many implementations out there, however, this CSS snippet works the best for us.

.v-align {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

2. CSS Snippet For Inset or Offset Outlines

While creating a website for Explore More USA we decided to make use of outline offsets/insets to give a unique and vintage look & feel to the website. You can see an example of both below:

.inner-outline {
    outline: 1px solid #ffffff5c;
    outline-offset: -10px;
}

.outer-outline {
    outline: 1px solid #6868683d;
    outline-offset: 10px;
}

Now lets get a little crazy and add some hover effects to move the outline on hover

.inner-outline {
    outline: 1px solid #ffffff5c;
    outline-offset: -10px;
    transition: .3s ease-in-out;
}
.outer-outline {
    outline: 1px solid #6868683d;
    outline-offset: 10px;
    transition: .3s ease-in-out;
}
.inner-outline:hover {
    outline: 1px solid #6868683d;
    outline-offset: 10px;
}
.outer-outline:hover {
    outline: 1px solid #ffffff5c;
    outline-offset: -10px;
}

Now you can see that when using :hover you can adjust many other things such as the outline-offset, the color and the duration of the transition.

3. CSS Snippet For Setting Global Variables

When designing a website it is of the utmost importance that all elements have the same font-sizing, spacing, and most importantly colors. We have seen some people that have to keep typing in the hex or RGB color every time they need to style something simple like a border, font color or whatever else they may need. Let's use the previous example to show how to create global variables.

:root {
    --transition: .3s ease-out all;
    --main-light-color: #ffffff5c;
    --main-dark-color: #6868683d;
}

.inner-outline {
    outline: 1px solid var(--main-light-color);
    outline-offset: -10px;
    transition: var(--transition);
}

.outer-outline {
    outline: 1px solid var(--main-dark-color);
    outline-offset: 10px;
    transition: var(--transition);;
}

.inner-outline:hover {
    outline: 1px solid var(--main-dark-color);
    outline-offset: 10px;
}

.outer-outline:hover {
    outline: 1px solid var(--main-light-color);
    outline-offset: -10px;
}

After looking at the code you can see at the top we have :root under this is where we declare our global styles in our case we created

--transition: .3s ease-out all;
--main-light-color: #ffffff5c;
--main-dark-color: #6868683d;

Now when working on our website, we can easily change our colors and our transition time instead of digging through the entire website trying to find all the different colors we used or all elements that have a transition.

4. CSS Snippet For Using Clamp() For Fluid Fonts

When designing a website another key aspect is fluid typography. Fluid typography is when your fonts dynamically change their size based on the viewport width. Here is a good website for a clamp generator. When you fill out the form you'll be presented with something like this

:root {
  --step--2: clamp(0.9113rem, 0.8922rem + 0.0951vw, 0.96rem);
  --step--1: clamp(1.0938rem, 1.0523rem + 0.2073vw, 1.2rem);
  --step-0: clamp(1.3125rem, 1.2393rem + 0.3659vw, 1.5rem);
  --step-1: clamp(1.575rem, 1.4579rem + 0.5854vw, 1.875rem);
  --step-2: clamp(1.89rem, 1.7129rem + 0.8854vw, 2.3438rem);
  --step-3: clamp(2.2681rem, 2.0098rem + 1.2915vw, 2.93rem);
  --step-4: clamp(2.7219rem, 2.355rem + 1.8341vw, 3.6619rem);
  --step-5: clamp(3.2656rem, 2.7537rem + 2.5598vw, 4.5775rem);
}

Then you take these global variables (as we discussed in the last section) and plug them into your stylesheet. It should look something like this:

h1 {
font-size: var(--step-5);
line-height: var(--step-5);
}

h2 {
font-size: var(--step-4);
line-height: var(--step-4);
}

h3 {
font-size: var(--step-3);
line-height: var(--step-3);
}

h4 {
font-size: var(--step-2);
line-height: var(--step-2);
}

h5 {
font-size: var(--step-1);
line-height: var(--step-1);
}

p {
font-size: var(--step-0);
line-height: var(--step-0);
}

We are working on a new website for a client (will release URL soon) where they wanted a page for customer testimonials. One of the requirements of the project was to add a new div element in between testimonials on the page. We were using the Repeater element in Oxygen, however, this tutorial can easily be applied with the Easy Posts element.

While potential customers are reading testimonials, it presents a unique opportunity for us to slip information between the testimonials as a way to capture their attention and bring the visitor to a page that is important (in this case the donation page & adopt an animal page). If you look at the image below you can see what we mean by this. This is unique because as customers fill out testimonials, the two blocks we added (Donate and Adopt) stay in the same place and the testimonials move around them.

The code for the repeater function is:

jQuery(document).ready(function(){

jQuery('#div_block-253-1605').insertBefore('.repeater-container:nth-child(3)');
});

And the code for the Easy Posts element is:

jQuery(document).ready(function(){

jQuery('#div_block-7-1610').insertBefore('.oxy-post:nth-child(3)');
});