When updating the front-end of your website whether it’s WordPress, another framework or a custom build, you can really make it pop when you know where to find great front-end resources. In this article I will cover 5 of the best front-end resources that I use time and again on all of the websites that I create.
5 Of The Best Front-end Resources
CLRS
CLRS.cc, short for COLORS, is a site that provides “a nice color palette for the web”. Use these very sleek colors to skin your next prototype. You can link to colors.min.css in your header file to use the css code on your site or you can manually apply the hex codes where you need them. For a live example, check out my social links in the footer of this page. When initially displayed, my social links use Aqua #7FDBFF as the background and Navy #001f3f as the foreground colors. When you hover over them the colors swap from background to foreground.
In addition to the default hex color codes they also include classes in their css file for coloring text, borders, svg fills and svg strokes. If you’re a Photoshop, Illustrator or Gimp/Inkscape designer you can download swatches from clrs.cc.
Pexels
Pexels.com is a stock photo and video sharing website where you can find thousands of images for you blog posts. They are high quality and free to download and use on your website or blog. One of the best parts about pexels is the ability to customize the size of an image when downloading. This is great for featured images on your blog posts. I have found that a custom size of 600×600 works well for featured images on TrailSix, but the size you need might differ depending on your sites theme and styling.
After downloading the image, a new screen will popup with options to donate money to the photographer via PayPal, follow them on social media and set a backlink to the photo on pexels.com. All, of course, are optional.
FontAwesome
FontAwesome is a font and icon toolkit based on CSS and Less. It’s one of the best resources for vector icons and social logos. Their icon set has grown to over 5,000 icons and they continue to release more of the most popular and needed icons. In addition to sleek icon sets they also offer the ability to size, place, style, and even animate any icon. How easy is it to add FontAwesome icons to your blog?
First, include this css file in your theme’s header between the <head></head> tags.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Next, search the FontAwesome website for an icon to use. Let’s say you want to include the Twitter logo on your site.
Simply copy the HTML link and paste it on your site. FontAwesome links use the prefix fa followed by the icon’s name.
<i class="fa fa-twitter"></i>
Let’s change the font size and color by adding a style tag.
<i class="fa fa-twitter" style="font-size:60px;color:blue;"></i>
Google Fonts
Google Fonts is a library of 1,000 free font families, an interactive web directory for browsing the library, and APIs for conveniently using the fonts via CSS and Android. Browse the website to view the many different fonts from which to choose. You can even enter your own text and change the font size to see what it will look like.
Filter results by category, language or specific font properties. Once you find one that suits, you can download the entire font family or you can select a specific style within a font family. When selecting a specific style, you will be given a stylesheet link to place inside your header file between the <head></head> tags. You will also be given the CSS rules to apply to the section of text that you would like to style.
CSS3 Generator
CSS3 Generator is simple way to create CSS code for different types of elements. Select from a list of CSS elements to modify including border radius, box sizes, transitions and flex boxes. Change the parameters to your satisfaction. In some cases a live demo shows what the effect will look like. Once you’re happy just copy the css code and paste it into the css file for your site.
For example, the transition effect can change a properties’ color, height, width, background or outline. I set it to change all of those and to complete the action in 2 seconds. I also set it to ease-in-out, which means it will gradually apply the new properties whenever I mouseover the element (a box in this case) and gradually remove the new properties whenever I mouseout.
This is the initial state after setting my values. You can see the box on the right that says “Hover over me”.
When I hover over that box it takes 2 seconds to grow to what you see below. Try it out for yourself.
To apply the transition feature to your website just copy the code and add it to your CSS file. Then make sure to apply it to the element that you want to affect on your website.
Ready to start your own blog? Read my How To Guide!