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.
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.
My blog is using Astra as base them, 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. Here are some free themes they recommend. They also offer a free page builder called Spectra that’s integrated with Gutenberg, WordPress’s built-in editor.
GeneratePress is the fastest theme I’ve ever used. It is also cheaper. It’s just $249 one-time lifetime fee. Good for 500 websites only. Check out their pre-built ready to use sites.
ThemeForest sometimes gives premium themes for free, but with no support or updates. So does MyThemeShop.
Materialis comes with a Companion plugin that turns it into a drag-and-drop front-page builder. The free version is pretty feature-rich.
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. I use Gantry for the basic layout of the header, content, and footer. For content, I use Elementor or King Composer.
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.
Page builders allow the creation of pages by drag and drop method. OnePager for the front page and one-page sites only. Elementor, King Composer and Page Builder are free but charges for premium features. A good source of plugins is here and developer tools here. Nimble Page Builder is free as of now, comes with a parallax background section. Aesop Story Engine also has a parallax component.
WPBakery and Divi Builder are paid premium page builders. WPBakery comes free bundled with some of the themes from ThemeForest like The7.
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. FltDsgn.Com has many examples of websites that use Flat Design concepts.
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. Here’s a collection of Flat based WordPress themes. If you like colors only, FlatColors.Net has a huge array of color variations to choose from. They also have ready to use palettes and if you prefer CSS gradient effects, they have those too. Other sources are Coolors, ColorDrop’s Flat Colours, Adobe Color CC, Flat UI Colors, Material Palette and Material Design Colors.
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.
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, 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.
Iconizr turns your SVG drawings into CSS icon kits.
Aside from making pages beautiful, CSS also makes it fun to interact through animations. ImageHover adds a scalable CSS image hover effect to elements. 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.
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. While CSSComb sorts CSS properties into a specific pre-configured order. MailChimp‘s 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.
Some good CSS-based background generators are SuperDesigner, MagicPattern.Design, 10015, Patternizer.
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.
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.
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%;
}
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.