Minimized: Kevin Batdorf’s Liquid Slider’s CSS
Minimized will be a new series of posts around these parts which features bare bones versions of CSS files from popular software.
There is a ton of great software out there that comes with bloated stylesheets, likely to help less technical users have an easier time integrating. But we’re professionals, right?
We need our stylesheets to be lean, our websites to be lightning.
Today we’ll minimize the Stylesheet that comes with Kevin Batdorf’s Liquid Slider.
Kevin’s original stylesheet weighs in at 12kb, not exactly monstrous but at 416 lines of code, not exactly as small as a mattress pea. We’ll get this down to under 1kb in 6 lines. Feel free to skip the tutorial and just grab the code if you’d like.
Firstly, I’ll remove the no Javascript calls as, simply put, Javascript is a native web technology and there are very few sites I build as of late which don’t require it in some way. Long story short, users must not have Javascript enabled if they want to experience the website.
Secondly, I simplify the preloader by removing all calls to images (HTTP Requests, oh my!) and replacing the opacity call with a simple black background with opacity. This shows a slightly greyed out box until the slider is ready.
Down in the Main Container styles, we can remove the background color and set the width to 100%. I’m not sure why Kevin has this set to a specific pixel number, but in my testing setting it to 100% works just fine. You’ll also want to set the width in the Panels section of the file to 100% as well.
Next I jump down to the Responsive Styles section and just completely remove everything therein. We can write back in any specific styles that we need, but as the document states, this section is mostly for working with how the arrows used to control the slides will display on other devices. If you’re not using the arrows in your slider, you don’t need this at all. There’s also some padding that’s added to each slide which is not required for the functionality, just some default styling Kevin probably thought would work well with most implementations.
Similarly, I remove the styles for Larger Mobile Devices, Tablet & Smaller Laptops, DESKTOP, LARGE VIEWING SIZE and RETINA. Capitalization is Kevin’s there, but none of these items are needed and most just serve as placeholders for your own code anyway.
At this point we’re down to 8kb and 267 lines of code, but there’s quite a bit more we can do to minimize this even further.
Starting from the bottom of what is now our stylesheet, we’ll work our way up.
You can completely remove the .arrows .liquid-slider CSS as I typically use absolute positioning for these and so setting up a margin isn’t necessary.
Next we’ll remove .liquid-slider-wrapper .liquid-nav-right-arrow:active as it does nothing by default.
.liquid-slider-wrapper .liquid-nav-right-arrow:hover, .liquid-slider-wrapper .liquid-nav-right-arrow:hover, .liquid-slider-wrapper .liquid-nav-left-arrow:active, .liquid-slider-wrapper .liquid-nav-left-arrow:hover, .liquid-slider-wrapper .liquid-nav-left-arrow and .liquid-slider-wrapper .liquid-nav-right-arrow can all be completely removed as well. Half of them do nothing by default and the other half make calls to background images, but you don’t need to rely on images and the extra HTTP requests and issues with retina displays that come from them. Instead you should be using Icon fonts or even just plain text arrows like → and ←.
In fact, let’s just delete the entire Arrows section.
I’m also going to remove the Mobile Menu area as I have not needed to implement this to date. You can always add it back in if you want your slider to have a menu on mobile devices, though I’d still recommend you delete any lines of code you don’t specifically need.
Next let’s delete the .currentCrossLink call in the remaining bottommost section, as there’s nothing to specifically say we want to style our cross links bold.
If you’re only using arrows and not tabs or other menu buttons, you can remove all of the styles in that section.
Next you can remove the entire next section (again, we’re working from the bottom up here) which as only one CSS selector, .liquid-slider-wrapper .liquid-slider .panel-wrapper. This section is useful if you want to leave the default 20px of padding on every slide, or if you want to keep your slides setup correctly for absolute positioning within each slide.
Next, I remove the entire …base starting point for images and videos… section, as I handle these types of elements in my default stylesheet and don’t need to rely on this one to do it again.
At this point we’re down to 2kb and 76 lines of code.
That’s a pretty significant reduction in file size, but of course we can go even further.
Removing all of the inline comments more than halves that size again. Ditch the line breaks and you bring the file down to 598 bytes over six lines (or one line if you remove the line breaks between styles, but I like to keep it at least somewhat human readable.
The Final Minimized CSS
.liquid-slider-wrapper .liquid-slider-preloader {background:rgba(0,0,0,0.7); width:100%; height:200%; position:absolute; top:0; left:0;}
.liquid-slider-wrapper {margin:0 auto; clear: both; overflow: auto; position: relative;}
.liquid-slider-wrapper .liquid-slider {width:100%; float: left; overflow: hidden; position: relative;}
.liquid-slider-wrapper .panel-container {position: relative;}
.liquid-slider-wrapper .liquid-slider .panel-container .fadeClass {position: absolute; top: 0; left: 0; display: none;}
.liquid-slider-wrapper .liquid-slider .panel {width:100%; display: block; float: left;}That’s small enough that I would feel comfortable including it in my main CSS file vs. calling a completely separate stylesheet for it altogether.
Styling Your Arrows
The last bit here is more for me and my preferences, but I pretty typically like to have my left arrow to the left of my slider and my right arrow to the right. We can set these up responsively with very little code.
Two lines of CSS:
.liquid-nav-left-arrow, .liquid-nav-right-arrow {position:absolute; top:40%; z-index:42; left:15px; font-size:50px;}
.liquid-nav-right-arrow {left:auto; right:15px;}Here’s how my WordPress-ready jQuery looks as well, if you want to put this all together exactly as I typically do.
<script>
jQuery(document).ready(function($) {
$(function(){
$('#slider-id').liquidSlider({
dynamicTabs: false, //remove the tabs from the slider
autoSlide: true,
autoSlideInterval: 4200,
dynamicArrows: true,
hoverArrows: false
});
});
});
</script>The Final Result
Check out the portfolio section of this site to see the above code in action, but at the end of the day we can say we reduced our overall file size by more than 95% and even made it much easier on our conscience to get this all into an existing stylesheet, thereby eliminating an HTTP request as well (not to mention all of the image calls we removed from the CSS!).