Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem
Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


          

        

      


      
      

        
        
      

    



    
    

      

        
        
          
            
          
          Finder
          v2.0.0
        
        
        

          
          
    
            
  • 
              
            
    • 
            
  • 
              
            
    • 
            
  • 
              
            
    • 
          

        

        
        
          
          Buy now
        
      

    



    
    

      


        
        


        
        


          
          

            Getting started
            
Performance: CLS & Preload

          



          
          

            
This article explores the implementation of several key techniques in Finder that enhance website loading performance and reduce Cumulative Layout Shift (CLS). These methods include preloading essential assets and effectively wrapping images and videos in Bootstrap's .ratio element to preserve aspect ratios.

            
Preloading assets

            
Preloading assets is a critical technique used to instruct the browser to download and cache key resources early in the page load process. This ensures that fonts, icons, styles, and other content are available immediately when needed, reducing load times and preventing layout shifts. Below are examples of how Finder preloads web fonts and icon fonts:

            

              
              
<!-- Preloaded local web font (Inter) -->
<link rel="preload" href="assets/fonts/inter-variable-latin.woff2" as="font" type="font/woff2" crossorigin>

<!-- Font icons -->
<link rel="preload" href="assets/icons/finder-icons.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/icons/finder-icons.min.css">

<!-- Theme styles -->
<link rel="preload" href="assets/css/theme.min.css" as="style">
<link rel="stylesheet" href="assets/css/theme.min.css">

            

            
By preloading these assets, Finder ensures that text and icons render instantly when the rest of the content loads, enhancing the perceived speed of the site and improving the user experience.

            
Using the .ratio element

            
To further improve CLS, Finder utilizes Bootstrap's .ratio utility class, which helps maintain the aspect ratio of images and videos. This technique prevents layout shifts that occur when media loads and expands into its designated space. Here are examples of how the .ratio element is used for predefined and custom aspect ratios:

            

              
              
<!-- Predefined ratio -->
<div class="ratio ratio-4x3">
  <img src="..." alt="...">
</div>

<!-- Custom ratio -->
<!-- Aspect ratio formula: imageHeight / imageWidth * 100% -->
<div class="ratio" style="--fn-aspect-ratio: calc(306 / 416 * 100%)">
  <img src="..." alt="...">
</div>

            

            
These examples show how the .ratio element can be used to ensure that the space for an image or video is reserved, regardless of whether the media has finished loading. This method significantly reduces CLS by stabilizing the layout as the rest of the page continues to load.

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize