Hi Webflowers, it’s the Episode 2 of custom code snippets you would use in your projects. Check out the first episode if you missed it.

01. Custom bullets for the list elements

Let’s start with something simple but sometimes very useful. Working as a designer, I bump into custom bullet design requests pretty often. It’s used to highlight some points and attract users’ attention. Here are three situations when I need whether a custom bullet color, a shape, or an icon. I use the following for that.

Do some initial settings before applying custom bullets:

1. Set No Bullets to remove default bullets in the list settings
2. Add a class and set padding-left to the list
3. Add a class to all list items and set position relative for that class

Custom bullet’s color

.ul--circle li::before {  
  content: " ";  
  width: 8px; /* Width of the bullet */  
  height: 8px; /* Height of the bullet */  
  background: #12b0eb; /* Set color for the bullet */  
  border-radius: 50%; /* Circle bullet */  
  position: absolute; /* Positioning the bulet as absolute. It wil relative to li item */  
  left: 0; /* Stick the bullet to the left side */  
  top: 8px; /* Align the bullet with the first line of li text. The value will depends on font-size and line-height */
}

In the example, I used .ul--circle modifier because I have several types of bullets on one page. Most probably in your case, you will need only li::before to apply the same styles to all li items on the page.

Custom bullet’s shape

Triangle

.ul--triangle li::before {  
  content: " ";  
  width: 0; /* Dimensions of the triangle sets in the border properties */  
  height: 0;  
  border-top: 5px solid transparent; /* Set border top & bottom to change the height of the triangle */  
  border-bottom: 5px solid transparent;  
  border-left: 8px solid #12b0eb; /* Triangle width and color */  
  position: absolute; /* Positioning the bullet as absolute. It will relative to the li item */  
  left: 0; /* Stick the bullet to the left side */  
  top: 6px; /* Align the bullet with the first line of li text */
}

Diamond

.ui--diamond li::before {  
  content: " ";  width: 8px; /* Width of the bullet */  
  height: 8px; /* Height of the bullet */  
  transform: rotate(45deg); /* Rotating the rectangle */  
  background: #12b0eb; /* Set color for the bullet */  
  position: absolute; /* Positioning the bullet as absolute. It will relative to the li item */  
  left: 0; /* Stick the bullet to the left side */  
  top: 9px; /* Align the bullet with the first line of li text */
}

Custom bullets icons

If you want to use a custom icon for your bullets, you will not even need a custom code. Use a background image with custom size and positioning for that.

I use these list icons. Feel free to duplicate them.

02. Textarea resizing

By default, textareas can be resized both horizontally and vertically. Resizing textareas horizontally usually breaks the markup layout. That's why I prefer to disable horizontal resizing. If needed, you can disable resizing completely — just add this little CSS snippet to your page:

/* User can resize the textarea vertical only */
textarea {  
  resize: vertical;
} 
/* Disable textarea resizing completely */
textarea {  
  resize: none;
}

03. Apply CSS only for specific resolutions

It’s good to know that Webflow is working on the new feature allowing us to create custom breakpoints. You’ll be able to create styles for various screen resolutions out of Webflow standard list. You may find this feature especially useful for big screen resolutions like 27-inch 4K monitors.
At the moment if you want to apply custom CSS styles only for certain resolutions, use the following code snippets:

Custom breakpoint

Styles will be applied for resolutions more than 1440px

@media (max-width: 1440px) {  
  .myclass {     
    color: red;  
  }
}

Tablet

Webflow default tablet breakpoint. Styles works on resolutions from 768px to 992px.

@media (max-width: 991px) {  
  .myclass {     
    color: blue;  
  }
}

Mobile landscape

Webflow default mobile landscape breakpoint. Styles works on resolutions from 480px to 767px.

@media (max-width: 767px) {  
  .myclass {     
    color: green;  
  }
}

Mobile

Webflow default mobile breakpoint. Styles works on resolutions up to 479px and covers all mobile devices in portrait orientation.

@media (max-width: 479px) {  
  .myclass {     
    color: black;  
  }
}

04. Apply JavaScript code only for specific resolutions

Sometimes, when you use a custom JS code, you would rather run that code only for certain resolutions. It works similar to the CSS example above but with different syntax.

// Desktop resolutions from 992px
if (window.innerWidth >= 992) {  
  // write your JS code here, e.g.  
  console.log("Hello Webflow World!");
}
// Run code on tablet and desktop
if (window.innerWidth >= 768) {  
  // write your JS code here, e.g.  
  console.log("Hello Webflow World!");
}
// Run code on mobile only
if (window.innerWidth <= 479) {  
  // write your JS code here, e.g.  
  console.log("Hello Webflow World!");
}

05. Font smoothing

You could notice that font type looks different in a design tool like Figma, Sketch, etc. and on-screen after implementation. Text looks very different, depending on whether subpixel rendering, standard antialiasing, or no smoothing at all is used. Unfortunately, various operating systems and even browsers have different smoothing settings. However, you can keep it under your control by adding the following code to your project. In most cases, the middle smoothing level antialiased works well, but you can play around with that property using the strong smoothing level subpixel-antialiased or disable it with the none value.

‍

/* Middle smoothing level, works in 99% cases */
body {  
  -webkit-font-smoothing: antialiased;  
  -moz-font-smoothing: antialiased;  
  -o-font-smoothing: antialiased;
}
/* Strong smoothing level */
body { 
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-font-smoothing: subpixel-antialiased;
  -o-font-smoothing: subpixel-antialiased;
}
/* Disable smoothing */
body { 
  -webkit-font-smoothing: none;
  -moz-font-smoothing: none;
  -o-font-smoothing: none;
}

Follow us on the Web to get more code snippets and tricks! Feel free to share custom scripts you use, or let us know if you are having any issues with Webflow and we will do our best to help you!
‍

See you in the next episode!