Subscribe to the newsletter to receive the latest content.
Do you have a site that's based on WordPress and you are planning to change the theme? Or planning to put up one? Here's the best resources of free themes, UI kits and CSS.
---
A wireframe is a top-level blueprint or skeleton that illustrates the structure of a website, app, or project. It doesn't include any designs or a great deal of detail, keeping UX design conversations focused and constructive. It simply maps the structure and the key elements. A mockup is a high-fidelity wireframe. It's a visual diagram with much more detail than a low-fi wireframe.
Figma and Miro offer free but limited account. MockPlus offers a generous free account with no time limit, up to 10 users, 3 prototypes, 10 pages per prototype.
Pencil Project is a free open-source and cross-platform GUI prototyping tool.
---
Aside from the official WordPress site, NicePage is full of high-quality themes, and all of them are free. You can browse their huge collection by type and color. For every theme, there's a demo and accompanying details to help you decide which one to use. TemplateMonster is also another good source.
Create Block Theme plugin allows creation of a blank, new theme, child theme, new style variation, exporting theme or saving user changes to the active theme. Underscores is a starter theme.
My blog is using Astra as base theme, works like a charm every time. It is free, lightweight, fast and customizable. Among all the themes I've tried, it is the only one that didn't break the existing design. The free version has a lot of customizer options, like header and footer builder. It also comes with tons of free Starter Templates and plugins. The lifetime Growth Bundle plan cost $699, it can be split into 3 monthly payments. The theme can be used in unlimited websites and bundled with lots of premium plugins. Astra is compatible with popular page builders, especially Elementor. They also offer Spectra free page builder that's integrated with Gutenberg, WordPress's built-in editor.
GeneratePress is cheaper, at just $249 one-time lifetime fee. Good for 500 websites only. Check out their pre-built ready to use sites.
Here's a comprehensive Astra vs GeneratePress comparison.
Kadence also have a header and footer builder. They don't have a lifetime offer.
ThemeForest sometimes gives premium themes for free, but with no support or updates. So does MyThemeShop and W3Layouts.
Materialis comes with a Companion plugin that turns it into a drag-and-drop front-page builder. The free version is pretty feature-rich.
It is good practice to make modifications to the child theme, instead of editing the parent theme directly. This way the parent theme can be updated without the custom changes being overwritten. Create a child theme effortlessly with Child Theme Configurator or the 3rd party Child Theme Generator. Here's a free but basic WordPress Theme Generator.
Page builders allow the creation of pages by drag and drop method. OnePager for the front page and one-page sites only, Another option is OnePress. Elementor, and Page Builder are free but charges for premium features. A good source of plugins is here and developer tools here. Nimble Page Builder comes with a parallax background section. Aesop Story Engine also has a parallax component. Landing Page Builder is used for coming soon, maintenance mode, lead, and landing pages. Themify Builder and
SiteOrigin Page Builder are other freemium options. Bold Page Builder is 100% free.
There are lots of Elementor templates, and elements to choose from. Personally, I like Envato Elements. Other alternatives are Free Elementor Templates, Essential Addons for Elementor, Royal Elementor Addons and Templates, Stratum Widgets for Elementor, and ElementsKit Elementor Addons and Templates.
WPBakery and Divi Builder are paid premium page builders. WPBakery comes free bundled with some of the themes from ThemeForest like The7.
What's more powerful than a page builder? Gantry is a full-featured and highly customizable framework. WP PageBuilder Framework is supposed to be compatible with any page builder. Redux is another option. I use Gantry for the basic layout of the header, content, and footer. For content, I use Elementor or King Composer.
Gutenberg Essential Blocks, Getwid, and Snow Monkey Blocks are free Gutenberg blocks. Twentig,enhances native Gutenberg blocks with more options.
StaticHunt, and JamStack Themes are good sources for JamStack and static site generators.
Are you a fan of Flat Design or Flat UI (User Interface)? Flat Design is a minimalist style and is aptly named because, unlike skeuomorphic(real life like) or three-dimensional design concepts such as drop shadows and gradients, it uses few elements, clean typography, and flat colors. It focuses on content without sacrificing visual appeal. Since it uses fewer elements, websites load faster and are more device responsive.
Personally, I think this is the future of web/app interface design.
Flat UI gained traction after Microsoft released Windows 8 which is based on their Metro design.
If you want to implement this new interface in your site/app, there are lots of kits that can help you get started. You can find a list of mature Flat design UI kits here and here.
I expect that Flat Design will continue to evolve and the next version will integrate attributes of existing, if not older design principles. The future UI might look something like Google's Material Design.
OnePageLove, and TemplateMo are good sources of HTML one-page templates.
---
Do you know what's better than CSS code generators? Of course, CSS frameworks, haha. A CSS framework is a pre-prepared software framework designed for easier, standards-compliant web design using CSS. It is a complete package of ready-to-use components like grids, form elements, and typography. Just include it in your project and it will automatically do its magic on your site. It's that easy, haha.
BootStrap, Foundation, and Semantic UI are heavyweights, literally in file size as well. If this is a popularity contest, then BootStrap wins hands down. But what I'm looking for is lightweight, has good semantics, and includes most of the components and works right off the bat. I use Fomantic UI in one of my projects.
TailWindCSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. The advanced components are free but there are free open source components that do not require nay installation at MerakiUI, HyperUI, TailWindFlex, and FlowBite. FlyOnUI needs installation. WindPress is a free TailWindCSS integration plugin for WordPress, allows its use within the block editor, page builders, plugins, and themes with no build step is required. Here's a manual process to add TailWindwCSS in a WordPress theme. Or use a TailWindCSS ready theme builder like TailPress, and UnderScoreTW. Or easily use a theme with built-in support like Gust, and Sage.
Boss-CSS is a polymorphic "CSS-in-JS" library. It is a tool that allows writing of CSS styles directly inside JavaScript code. It supports multiple different ways of applying styles(classNames or style props), offering flexibility in how to structure code, with or without a runtime component.
For beginners, lightweights like Mini or Pure by Yahoo would be a good start. More advanced features and components can be had with middleweights like Bulma and UIKit. I especially prefer UIKit, it has been successfully used in many WordPress themes. Material fans will like Materialize, Material Design Lite, MUI CSS and Material-UI. These are just some of the myriad frameworks that are based on Google's Material specifications.
Pico CSS is a minimalist and lightweight CSS framework that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Just write HTML, include the CSS file, and that's it. It has a classless version. WPico is a barebones WordPress starter theme.
Here's a list of other classless themes and respective demos checkout Simple.CSS, and Holiday.CSS.
CanIUse provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Here are some great compilation of CSS frameworks from Troxler, and Slant.
PenPot is a web-based open-source design tool. The generous free plan, or a self host option is a practical alternative to Figma.
---
If you're a web developer, it's tough to create a website that's responsive when viewed in different browsers and devices. CSS and JavaScript are normally used to enable sites to be device and platform independent. Below are some tools to test if they are indeed responsive and render according to your specifications.
To check how your site looks in different browsers, use BrowserShots.Org. As the name suggests, it takes screenshots of your website in browsers supported by various operating systems. You can select all and enter the URL. Take note that the more browser and OS combinations you select, the longer the process will take. It then displays the screenshots as thumbnails, and you have the option to view each online or download them all. It's cumbersome, but the service is free.
If you like to test a website's responsiveness on different devices, ResponsiveTestTool is highly recommended. It has a very user-friendly interface. To use, just fill in your domain and it will render on it the default desktop screen. The screen sizes are conveniently grouped into mobile, tablet, desktop, TV, and custom sizes. To test, click on the respective group and you will be presented with the different devices and their sizes. Selecting the specific screen size will adjust the size of the website and you can see in real time how it responds. The view is actually live and you can click on the links and even scroll. The feature that I like the most is the “Rotate Screen” which simulates the portrait and landscape views. I've used it on some of the websites I'm working on and it renders quite accurately.
Other services worth mentioning are ResponsiveDesignChecker, AmIResponsiveDesign, and MobiReady. Google's Mobile Friendly Test just does what its name implies.
---
Cascading Style Sheets popularly called CSS is a language for describing the presentation of web pages. It specifies the color, layout, and fonts of a markup document like HTML. Its separation from the structure or content results in easier site maintenance, sharing of style sheets, and customizable and responsive pages that are device independent.
Together with HTML and JavaScript, CSS provides the basic building blocks of a website. It is thus essential for any aspiring Web Developer to know basic CSS. For more advanced components, there are lots of free online CSS tools available.
One of the most vexing problems one is likely to encounter in web development is centering things. CSS-Tricks has a guide here.
If you prefer using CSS sprites, there are tools for that too. For those not familiar, a sprite is a very nifty technique to speed up the page loading. It achieves this by combining several images into a single file reducing the extra HTTP requests for each image. SpriteCow, Toptal, Instant Sprite, TopTal Sprite Generator, and Responsive CSS Sprites are excellent CSS sprite generators. Just upload the images and it will take care of combining them and generating the CSS codes for integration. An image tag like this <img src='beach.png'/> becomes <img class='beach'/>. Smart, isn't it?
Hue is a good resource of photorealistic CSS-based gradients that you can use as a background. To use, include the hue.css file, then add the corresponding class to the element.
CSS filters can also be applied to images for some really cool visual results. ColoFilter and CSSCo have a good set of filters. CSSGram applies to Instagram filters. While Philter applies filters using HTML attributes!
SVG (Scalable Vector Graphics), is an XML-based vector image format for two-dimensional graphics. As an XML file, it can be edited by a simple text editor. It has built-in support for interactivity and animation. The advantage of SVG over other formats like JPG or BMP is that it doesn't pixelate when scaled up.
PatternBolt is a collection of SVG pattern backgrounds, packed into a single SCSS (or CSS) file. See their samples.
Aside from making pages beautiful, CSS also makes it fun to interact through animations. Animista is an on-demand CSS animation library. CSS Shake, well, shakes your DOM. Animate is a pure CSS-based cross-browser animation library, with lots of effects to choose from. See it live in action on Stripe. Animate Plus has SVG animation support.
Who doesn't like CSS loaders and spinners? Admit it, you're mesmerized by it, haha. Instead of using GIFs, CSS-based loaders are so much better. Spinners, and Single Element CSS Spinners have amazing selections. Text-Spinners have unique text and CSS only, font-independent, and inline loading indicators. GIF based preloaders.
Balloon generates CSS tooltips without JavaScript, while ToolTik is animated. Get outstanding CSS buttons here.
Use Shrthnd to convert standard CSS codes into shorthand versions. MailChimp Inline-CSS tool automatically inlines your email's CSS.
I'm sure the tools mentioned so far have already made your life much easier. Those are just appetizers, haha.
Let's level up by using CSS3Generator. Style texts, blocks, and buttons, add borders and radius, apply effects such as shadows, transitions, and transformations without breaking a sweat. TopTal has a CSS3 Maker tool.
Some good CSS-based background generators are HeroPatterns, SuperDesigner, MagicPattern.Design, 10015, Patternizer. You can check more options here and here.
Centering things is always a challenge. Here's a css snippet to center a div:
div{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
Using the Viewport Units(vw, vh, vmin, vmax) directly for font-size will make the text scale proportionally with the screen size. These units are relative to the viewport's dimensions. "vw" represents 1% of the viewport width, "vh" represents 1% of the viewport height, "vmin" is the smaller of "vw" or "vh", and "vmax" is the larger.
For example:
html{
font-size: 16px;
}
h1{
font-size: clamp(1.5rem, 0.8rem + 2vw, 3rem);
}
In the example, the font size will be at least 1.5rem, at most 3rem, and will scale responsively with the viewport width, aiming for 0.8rem + 2vw.
By setting the font-size of the body element using a responsive unit (like "vw" or a clamp() function) and then defining other elements' font sizes using "em" or "rem", you can achieve a cascading responsive effect. "rem" units are relative to the root html element's font size, while "em" units are relative to the parent element's font size.
Use this tool to convert px to em.
Learn CSS Container Queries.
---
Eye-pleasing color is an essential component of web design. As such, bad color combinations will turn off visitors and as such, creating a palette is a skill in itself. Luckily, there’s no need to sweat it out. There are several online services that focus on nothing but colors. Get started with a 3-part color theory for designers.
Wouldn’t it be nice if you can use color names instead of cryptic hexadecimal or RGB(Red Green Blue) value? Personally, it is easier to recall colors by name and because of this I use Color Names, haha.
If you’re just interested in colors, Adobe Color has pre-made palettes. You can create your own too. They also have a feature that allow you to generate a theme based on an image.
ColorHexa is a free color tool providing information about any color and generating matching color palettes. Just type any color value in the search field and it will offer a detailed description and automatically convert it to its equivalent in other formats.
However, a website’s colors are determined by a lot of factors. One of the most important is the contrast of the foreground and background. The WCAG 2.0 is a comprehensive guideline to achieve the right contrast ratio, but we will not be dealing with the technical aspects of it here. Remember, the lazy ones find the easiest and most efficient way of doing things.
Color Safe provides beautiful and WCAG 2.0 compliant color palettes based on the background color, font name, font size, font weight and WCAG standards you specify. It then generates color boxes that are arranged base on their contrast ratio in ascending order. The colors are grouped by green, blue, purple, gray, yellow, orange and red hues. Clicking on the color box will display the hex value that you can copy.
A more easier and visual tool is Jxnblk.Com’s Colorable. Unlike above, the fonts are static, instead, you can change the hue, saturation, and lightness of the foreground and background colors to determine the right mix. Changing the settings instantly shows you the color’s hex value, the contrast ratio and its effects on the text and background.
Fifty Shades of Color, generates 50 shades of a color in hexadecimal format.
Also try Color Theory.
Coolors, ColorDrop's Flat Colours, Adobe Color CC, Flat UI Colors, Material Palette, and Material Design Colors have huge array of flat color variations to choose from.
To convert a color from one format to another, like Hex to RBG try ConvertAColor.
Hubbbr - Web Design Tools is a Google Chrome extension with color picker, font picker, page ruler and palette maker. Color Picker by AdCreative.ai is another color picker. FireFox browser have a built-in eyedropper tool.
So what’s next? Let’s put these services to work and start building color efficient websites.
---
A beautiful or sexy image is one way of gaining attention. On websites, text content can be pleasant to look at using the right font type, size, and color. Below are some of the best free font resources to help transform bland words into eye-candy.
Google Fonts has a huge collection of font families. It's easy to integrate into a web project because it's hosted. There's no need to install it on web servers. It's downloadable for desktop use. There are more free fonts here.
Google also has Noto, a font family that aims to support all the world's languages. Tagalog is right here. To use it, follow the installation instructions here.
Selecting the right font combination in a project is an art. Don't spend hours dabbling through trial and error. FontPair and FontJoy pair fonts together based on font family, font style contrast or similarity, and history.
FontForge is a desktop-based font editor that supports a wide variety of formats. It also imports and exports fonts to and from SVG.
If looking for some font fun try try the Upside Down Text Generator, haha.
GRTCalculator calculates the Golden Ratio Typography(GRT) to determine precise typographic proportions like: font sizes, line heights, and associated spacing.
Affiliate Disclosure: Post may contain links to affiliate websites, and we may receive a commission for any purchases or actions made by you on the websites using such links. Thank You.