You probably don’t need most of the features that come with large UI frameworks such as Bootstrap, especially when you’re working on small, straightforward projects that you just want to get up and running as soon as possible. Fortunately, there are smaller, simpler CSS frameworks out there that you can use instead.
I’ve created an excellent list of small/minimalist CSS frameworks for you to explore. Most of them are under 5 KB (when minified and gzipped) and contain the essential ingredients for building responsive web designs.
min, the smallest CSS framework on this list, has a responsive 12-column grid system, button styles, table styles, Android-compatible icons, and more. min even supports ancient browsers like Internet Explorer 5.5.
Milligram is for modern UIs — its grid system uses FlexBox, sizes and lengths use the
rem unit, and it’s Mobile First. Being on the cutting edge comes at a cost: Milligram only officially supports the newest versions of Chrome, Firefox, IE, Safari, and Opera.
Out of the box, Blaze CSS is already lightweight, but you can reduce its file size even more due to its modular architecture which allows you to include only the parts you intend to use in your project. (Read the instructions for creating a custom Blaze CSS build for more info.)
Kube packs a punch for a CSS framework that weighs less than 6 KB. It has a responsive grid system, a robust set of classes for styling your web forms, multiple table classes, notification classes for displaying important messages to your users, and more.
Pure, an open source project led by Yahoo! developers, is a suite of CSS modules that will help you quickly build responsive web designs. Pure has basic styles for all HTML elements (developed on top of Normalize.css), and modules for grid layouts, web forms, buttons, tables, and navigation menus.
Calling itself a "CSS micro-framework", Furtive is geared towards modern web designs. Like Milligram, Furtive is Mobile First, has a responsive grid based on FlexBox, and uses the
rem unit for lengths and sizes. It has the basics covered: buttons, forms, and even default color classes.
Though it hasn’t been updated in over a year, Skeleton is still a top-notch starting point/boilerplate for rapidly building modern, responsive web designs. It comes with an intuitive grid system and base styles for your HTML elements.
FOX CSS is a lightweight, modular CSS framework. It uses the Mobile First design approach, supports browsers as old as IE 9, and has a non-aggressive CSS reset (inspired by KNACSS).
Basscss is made up of 22 CSS modules consisting of a CSS reset, a grid system, color classes, utility classes to help you build your responsive designs, and much more. Basscss is surprisingly feature-rich for something that weighs less than 4 KB.
Siimple is a minimalist CSS framework for building responsive, clean web designs. It’s similar to Skeleton: It has an intuitive 12-column grid system and base styles for typography, tables, buttons, forms, and more.
Lotus is one of the smallest CSS frameworks out there. It’s got the essentials covered: a responsive grid system, typography, buttons, and web forms.
Picnic CSS is a lightweight UI framework written in Sass, making it easier for you to edit and customize variables such as colors and lengths. It also has some impressive, purely-CSS UI components such as a modal window and a content slider.
The following table contains useful details about the CSS frameworks featured in this list.
|Name||Size*||Docs||License||GitHub Repo||Popularity **|
|Kube||5.94 KB||Docs||MIT||Repo (outdated)||538|
|FOX CSS||2.46 KB||Docs||Unknown||Repo||87|
|Picnic CSS||2.32 KB||Docs||MIT||Repo||932|
*Size is the file size of the minified and gzipped CSS file. Size values were derived from my independent testing of the production-ready/distribution stylesheets of each CSS framework.
**Popularity is the amount of users who are keeping track of the CSS framework’s source code on GitHub. This value is measured by the number of Stars the project had around the time this post was published. A higher value means the project is more popular.
7 CSS Tools You Should Be Using
5 CSS Effects Libraries for Supercharging Your Designs
CSS Development at Large-Scale Websites
When visitors arrive on your company’s website, you want them to take action. Depending on your business, that “action” may be many different things, from filling out a contact form to making a purchase.
Regardless, you should improve your site to make converting as easy as possible for your visitors. The best way to do this is with conversion rate optimization.
One of the simplest ways to optimize a site is with A/B testing, or by creating two versions of the same element and showing them to real visitors to see which performs better. As you run these tests on different parts of your site, you’ll be able to optimize each page for a higher conversion rate.
Before you get started, though, you’ll need to select a tool to help you set up, monitor, and review your tests. There are many available online, but the following four are our top picks at WebpageFX.
Your company’s website serves many purposes, like explaining your services, highlighting your successes, and building your brand. But most important of all, it helps visitors become customers.
But in many cases, those visitors need to get in touch with you before making a purchase. And for that to happen, you’ll need a compelling “Contact Us” page.
Creating a page that’s simple enough for visitors to finish, but thorough enough to get the information you need can be a challenge. These 10 examples will provide some inspiration for your company’s site.
When I started out, I made about $1,680 a month (after taxes). Now I make that in less than two days. It’s crazy when I think about it.
For a lot of us (myself included) it’s never about the money. But what I have inevitably realized is that money brings freedom. The freedom to choose the work we take on. The freedom to work on meaningful projects. The freedom to have time to do what we want.
As designers, I believe in improving not only the quality of our work, but also the value of our work.
Talking about money is always a touchy subject. But just to give you some background about where I’m coming from, and about my income as a freelance designer: I’ve made more than $140,000 working only seven months in a year. I enjoy some time off in between projects, and the freedom to do other things. However, bear in mind that I have been doing this for nine years, and with that comes experience and a honed set of skills.
Here are some tips that will surely boost your design work’s value. These tips are not things you can do overnight; you will need to put in some hard work in order to achieve your desired results. But if you take action, I’m sure you will eventually see positive results.
1. Be a Good Designer: Produce Great Work That Solves Problems
A strong body of work commands interest from prospective clients and increases your perceived value as a designer.
I am a strong believer in constantly working on my craft. Improving the quality of our work helps us get more projects, and also contributes to pushing our industry forward.
What aspects of your design work can you improve, and how?
Set a Goal
The first step is to have a good idea of what "good design" is. Think of all your favorite designers. Write down a list of the top five designers you admire. Done that? Good. Your goal is to close the gap between your work, and the work of the designers you hold in high regard. Follow their work, as well as the work of other designers that they like/favorite/save on social media platforms such as Behance, Dribbble, Pinterest, etc.
Now you have a benchmark for good design work.
Improve Your Visual Design Skills
The first and most obvious thing to work on is your visual design chops. The best way to improve in this area is to practice.
Spend one to two hours a day analyzing, deconstructing, and recreating the work of other designers. What would begin as an exercise of merely emulating and reproducing someone else’s work will eventually allow you to see and understand why certain designs work better than others.
Many great designers started this way. Haraldur Thorleifsson, a successful designer who has worked with companies such as Google, Microsoft, and Airbnb said in an interview:
When I was younger I liked to take things apart to figure out how they worked. I never did figure anything out, and I certainly couldn’t put anything back together, so this mostly meant that I had a lot of broken stuff.
I am by no means a natural designer or illustrator, so when I started designing I basically did the same thing. I would take screenshots of sites I liked and copy them, the digital equivalent of tracing from paper. This taught me a lot about spacing, typography, grids and how to create graphics from scratch.
Over time, as your visual library expands within your head, you will realize your own ideas.
To get better at design, the idea is really just to keep creating. When he was asked by a design student what to focus on to help grow one’s career, Mike Buzzard, a Design Manager in UX at Google, answered: Just keep making stuff.
Even if you’re a seasoned veteran — just keep creating, as there’s always room to improve. A seasoned chef still sharpens his knife. Join communities and find great mentors to learn from. Always make time to learn new skills that can make your work better.
Visual chops are all well and good. But design is more than just the visual. It’s also about meeting the client’s goals, and thinking about your work as being a part of a system.
A lot of designers don’t want to think that their work sits in a marketing plan or a business strategy. But it does.
To be an effective designer, it’s essential to have a holistic view. You must see where your design work fits within the overall picture. To possess a holistic view means taking some time to learn about the other components of the system. Get into reading about business, marketing, copywriting, web performance, and other associated subjects.
While there may be art in what we do, we are not artists. We are designers. It’s the balance of form, function, and user/client objectives that makes your designs great.
2. Be a Great Communicator
At the end of the day, clients (whether they are creative directors, marketing managers, or business owners) are just people. People just like you and me.
When I used to work as a Creative Director, whenever we needed to hire designers, I would of course evaluate the design portfolios of the candidates as part of the decision-making process. But almost equally as important was looking at how well the candidates communicated. How did they come up with the context and rationale for their design solutions? Were they consistent with keeping the lines of communication open?
Being able to communicate well and eloquently helps you build trust with your clients. How well can you answer their questions? Try to be empathetic and put yourself in your client’s shoes. What do they need to know, and how can you best solve their problem?
Start by identifying your personal communication style and tone. I prefer to write clients using a conversational style of communication. It helps me weed out all the unnecessary jargon and allows us to engage on a more personable and "authentic" level. Also, people that are okay with this style of communication are usually from the types of organizations that I like working with.
Indirectly tied to communication is punctuality. Punctuality is super important. Honoring your promises and staying true to your word is important if you would like your clients to be able to trust what you say. If you’re going to say something is going to be done at a certain time, make sure you do it on time or (even better) earlier than the time you have committed to. Under-promise and over-deliver. Not vice versa. By nature, I’m not a super organized person, but through the years I’ve learned to always deliver no matter what.
3. Put Yourself Out There
No one is going to hire you if they don’t know about you.
I used to feel iffy about promoting myself. But I need to put myself and my work out there in order to attract prospective clients, as well as to be able to make connections and start conversations with like-minded designers. Dan Mall said it best: "Contribute to the conversations you want to be part of."
If you’re a freelancer, getting yourself exposure is almost as important as having great design work. Join online creative sites like Behance and Dribbble, and keep posting your work on them. Share your work and reach out to different communities. You can even share your journey by posting snippets of your design exercises, similar to what Paul Flavius Nechita did with his 100 Days UI project. (He was interviewed about the project on Dribbble.)
4. Work with Only Good Clients That Pay Well
As your designs become better, and as your reputation grows, you should be receiving more job leads.
Instead of taking on every single project that comes your way, it’s important to prioritize closing the clients that will pay you what you think your services are worth.
But how do you do that? By demonstrating the value of your work to prospective clients, and what it will mean to their business.
Read about value-based pricing in this article: How I Earned A Lot More on Projects by Changing My Pricing Strategy.
I have garnered clients via a "pull" methodology. This means prospective clients get in touch with me via different channels. I never reach out to potential clients. Getting projects using this "pull" methodology means that would-be clients already know about what kind of work I offer and what I’m about. Also, they will typically already know which markets I serve.
Identify what markets you serve and think about what your time and services are worth. Accept the projects that are within your criteria.
Good clients will refer you to other good clients. And I mean not just "good clients" in terms of pay, but also how easy and pleasant they are to work with. It’s because like-minded businesses and people tend to connect and engage with each other.
In the same token, less-than-stellar clients will probably refer you to other less-than-stellar clients. If you design sites for $100, you will be known as the $100 web designer, and you will in turn attract clients that believe websites should only cost a hundred dollars. If you do sites for $30,000, then you exist in that market. (And if you’re Huge, you exist in the $18 million market.)
5. Be Nice
Most people don’t like to work with designers who have huge egos.
The Golden Rule applies here: Treat others the way you would like to be treated. Good manners is a currency that goes a long way in the business world.
How I Made Web Design Profitable by Not Doing Web Design
How to Fire Bad Clients
Web Designers Making Thousands of Dollars in Passive Income
Even if your site is still months away from being ready for launch, you should put up a "coming soon" page as soon as possible. A "coming soon" page can help you collect user information, like email addresses and feedback/suggestions. It can therefore help you build buzz and a base of early adopters prior to your site’s launch.
For ideas and inspiration, check out these "coming soon" pages. (They used to be called "under construction" pages, an archaic term from the early days of web design.)
25 Beautiful Examples of "Coming Soon" Pages
10 Simple Tips for Launching a Website
5 Tips for Pre-Launch Landing Pages
Although there are many icon font sets (such as Font Awesome and Iconic) that you can readily use in your UI designs, there are times when you might want to generate your own custom icon font. For instance, you might have icons that you have designed that you would like to convert into an icon font set, or perhaps you would like to combine icons from various icon font sets.
Fortunately, creating icon fontsis fairly simple. Here are some free icon font generators that allow you to create your own icon fonts.
Fontello offers a simple platform you can use to generate your own icon font. To create your icon font, simply drag SVG files from your computer and drop them on the area located under the "Custom Icons" heading. You can also incorporate icons from free icon sets by selecting them in Fontello.
2. IcoMoon App
The IcoMoon App allows you to import your own icons as well as include icons from the IcoMoon icon set and other free icon sets. The total number of icons available within the IcoMoon App is in the thousands.
3. Icon Vault
To generate your own icon font with Icon Vault, you first have to download their template package. Then just follow the instructions included in the template package. Once you’re done, upload your icons onto Icon Vault.
4. Pictonic Fontbuilder
The Pictonic Fontbuilder allows you to choose from Pictonic’s free and paid icons in order to build your own customized Pictonic icon font. Pictonic has over 2,700 icons to choose from, and over 300 of them are free. Accessing the Pictonic Fontbuilder requires account sign-up.
When you go to Glyphter, you will see a character grid on the left. The right side of the screen, called the "icon shelf", is where you will find free icons and a search bar. Simply drag and drop the icons you want to use from the icon shelf, into one of the boxes on the grid. You can also upload your own SVG icon files by clicking on the boxes on the grid. You can have up to 88 icons in your icon font for free. If you need to have more icons, you will need to sign up for a premium account.
To generate your own icon font with Fontastic, select icons from the available free icon sets (such as Streamline Icons and Entypo) and/or upload your own custom SVG icons. Once you’re all set, go to the "Publish" tab, where you will have the option to host your icon font on Fontastic’s Icon Cloud or download your icon font. Accessing the Fontastic icon font generator requires account sign-up.