For some summer is a few months of spending time outside in the sun, getting the most of the good weather and enjoying some time off. While I do as much of that as I can, my summers as a web developer often see me sat in front of a screen trying my hardest to figure out why that little box won’t quite go in the right place. Maybe not as fun all the time, but it can be just as satisfying.
Web development can be tricky at times, with little things going wrong and some tasks that seem so simple being more difficult and hair-tear-inducing than they should be.
I’m no master hack with web technologies by any means, but over my time I’ve found a few handy shortcuts that you can use to style pages with CSS (cascading style sheets) and Javascript that make some the more tricky web tasks that little bit easier.
What’s more is that all of the CSS and Javascript tricks work with WordPress. To use the CSS, all you need to do is throw it into your theme (or preferably child theme)’s CSS file. For the Javascript elements, you’ll need to save the scripts as files in your theme and then enqueue them in your theme (or preferably child theme)’s functions.php file. It may seem complicated at first, but once you get the hang of it you’ll have a much more modern site!
Here’s six of the most useful CSS and Javascript tricks:
Aligning two images side by side
Tricky to do normally, this solution involves encasing the images in a div with the class “two-image-line” and then setting the properties of the images separately.
.two-image-line{
text-align: center;
}
.two-image-line > img{
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.two-image-line > img:first-child{
margin-right: 10px;
}
Custom button class
Buttons on the web are quite useful from a UI standpoint, as they are a very important navigational tool for the user when searching, using forms or simply goin through to different pages. Buttons by default can only be used on forms, but if you create a button class and style a link with it they can look just the same without extra hassle!
All you need for this is simple CSS, copy and change this section below into a file and then add the “button” class to any element you want to any link you want to appear as a button.
.button {
padding: 12px 20px;
color: #ffffff;
background-color: #000000;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
border: 1px solid #ffffff;
}
Responsive design
One of the most important trends in modern web development is that sites be responsive, which is to say that they have a good look on feel on a range of different device sizes. This is really important in a world where we are now accessing the web more and more from handheld devices rather than the traditional big screen.
Doing this is really simple so it turns out; all you need to do is include code specific for a certain screen size within this simple import rule (replacing the ~ with the screen size you want to work with):
@media screen and (max-width: ~px){
}
The most important thing I’ve found while using these is to change font-sizes, margins and padding to provide a more seamless experience. You might to use a few of these rules with different classes and different sizes, but the benefits for your website is more than worth it.
jQuery Cookies
Cookies are something that have been around on the web for a long time but are always something that’s pretty hidden from basic web development even though they can provide a powerful user experience tool.
Cookies are really easy to create on your website, all you need to do is download and include the JS Cookie library on your site and you can get going.
Then you can set, get and remove cookies using simple Javascript:
Cookies.set( ‘my_cookie_name’, ‘value’);
Cookies.get( ‘my_cookie_name’ ); => Returns value
Cookies.remove( ‘my_cookie_name’ )
You can see an example of how to put these cookies too good use in the next section…
Accessibility functions
Websites for large companies and for public services should now be as compliant as possible with the Web Content Accessibility Guidelines to try and improve their services for their visually impaired users.
For basic functionality, adding a high contrast mode and changing font size, all you need is to write a bit of CSS and include a simple jQuery script. You can get even fancier with it too if you want, by using Font-awesome icons and Cookies (cause we know how now) to make the experience just that bit more slick.
This snippet is based off of jQuery’s toggleClass function, which allows you to turn a class on or off based on an action, in this case a simple click. What that means is all you need to do to create a high contrast version of your site, or to change the font size of all site text, is to create a class for each and show how you want to change each element.
Here’s the code you need, first off with a simple click id for contrast and font toggles and then a more complicated one that saves your settings across your website session (which requires you to use the JS cookie library and also the Font-Awesome library too):
Simple
jQuery(document).ready(function use_accessibility($) {
$("#font_up").click(function () {
$( "*" ).toggleClass( "large-font" );
});
$( "#contrast_toggle" ).click(function() {
$( "*" ).toggleClass( "highcontrast" );
});
});
Complicated
jQuery(document).ready(function use_accessibility($) {
var contrast_check = Cookies.get( 'contrast_cookie' ) || false;
if ( contrast_check )
$( "*" ).toggleClass( "highcontrast" );
var font_size_check = Cookies.get( 'font_size_cookie' ) || false;
if ( font_size_check ){
$( "*" ).toggleClass( "large-font" );
$("#font_up").removeClass("fa-search-plus");
$("#font_up").addClass("fa-search-minus");
}
$("#font_up").click(function () {
$( "*" ).toggleClass( "large-font" );
var font_size_check = Cookies.get( 'font_size_cookie' ) || false;
if ( font_size_check ){
Cookies.remove( 'font_size_cookie', { path: '/' } );
$("#font_up").removeClass("fa-search-minus");
$("#font_up").addClass("fa-search-plus");
} else {
Cookies.set( 'font_size_cookie', '1', { path: '/' });
$("#font_up").removeClass("fa-search-plus");
$("#font_up").addClass("fa-search-minus");
}
});
$( "#contrast_toggle" ).click(function() {
$( "*" ).toggleClass( "highcontrast" );
var contrast_check = Cookies.get( 'contrast_cookie' ) || false;
if ( contrast_check )
Cookies.remove( 'contrast_cookie', { path: '/' } );
else
Cookies.set( 'contrast_cookie', '1', { path: '/' });
});
});
Opening Hours
Having opening hours on site is an absolute must for any business or service, how else are people going to know when to contact you? In the modern day, you can make it really easy for your visitors to know if you’re open or not by using a quick jQuery script to display whether or not you’re open.
This simple script will display either “Open now” or “Closed” in an element you tag with the id “opening_hours”. Play around with the days (with 0 being Sunday) and the hours (remembering that for the first greater than symbol you’ll want to put the number below, so for a 9 o’clock opening you’ll want to put 8) in the JSFiddle and then copy to your site.
Here’s a simple 9 to 5, Monday to Friday version:
jQuery(document).ready(function update_opening_hours($) {
var now = new Date();
var day = now.getDay();
var hours = now.getHours();
switch (day) {
case 1:
case 2:
case 3:
case 4:
case 5:
if (hours > 8 && hours < 17) {
$('#opening_hours').empty().append("(Open now)");
} else {
$('#opening_hours').empty().append("(Closed)");
}
break;
case 0:
case 6:
$('#opening_hours').empty().append("(Closed)");
}
});
There’s six of my favourite little snippets to use on websites then. If you have any more ideas, or thoughts on extending these little tricks, feel free to leave a comment!