With all of the changes and rapid advancements CSS has gone through over the last few years, we should not be surprised at the vast volume of open-source resources and tools that are continually being released.
These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a learning window into those CSS areas we may not fully understand.
In this collection you will find 50 of our favorite CSS libraries, frameworks, resources and tools that have all been released this year. No doubt, you’ll find something useful!
Quick Jump: CSS Libraries, CSS Frameworks, Web-Based CSS Tools & Generators, Useful CSS Cheatsheets, Useful CSS Items.
filters.css – A tiny CSS library for applying color filters to images and more.
Seasonal.css – A CSS framework that displays a seasonal color scheme based on the date.
Checka11y.css – Utilize this stylesheet to quickly detect some common accessibility issues.
Knopf.css – A modern, modular, extensible CSS button system.
grxdients – A CSS library that makes adding gradients to your projects incredibly simple.
LaTeX.css – A minimal, almost class-less CSS library which makes any website look like a LaTeX document.
CUBE CSS – A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism. At least, that’s what they say.
pattern.css – A CSS-only library for adding background patterns to your projects.
98.css – Missing the good old days of computing? Use this design system to recreate those classic UIs.
Cooltipz.css – A library for adding pure CSS tooltips to existing HTML elements.
MVP.css – A minimalist stylesheet for HTML elements.
MoreToggles.css – A pure CSS library that provides you with stylish toggles.
Fluiditype – A small CSS library that focuses on pure fluidity in type across all screen sizes.
Cirrus.CSS – A component and utility centric SCSS framework designed for rapid prototyping.
OrbitCSS – Check out this modern CSS framework based on flexbox.
Halfmoon – A front-end framework with a built-in dark mode and full customizability using CSS variables.
mono/color – A small, responsive, dual-themed CSS-only framework.
new.css – A classless CSS framework for building HTML-only websites.
Honeycomb – A configurable, mobile first, fluid SCSS framework for your web projects.
Shorthand – A free and open-source CSS framework that allows you to make unique and modern designs without writing any CSS.
Griddle – A modern CSS framework built with CSS Grid and Flexbox.
Flash Grid – A new lightweight (1KB minified and gzipped) grid system based on CSS Grid Layout.
The good line-height – Use this tool to easily calculate the perfect CSS line height for each text size in your scale.
CSS Spider – This Chrome extension is billed as the quickest and most convenient way to copy, visualize, edit and export CSS.
Layoutit Grid – Build your ideal CSS Grid with this online tool.
Beautiful CSS box-shadow examples – Choose from this collection of 80+ copy & paste shadow styles.
zerodivs.com – Try this experimental UI editor for creating illustrations based applying styles (CSS) on a single HTML element.
CSS Effects – A collection of click-to-copy CSS special effects.
Capsize – An online tool for defining typography in CSS.
CSS Background Patterns – Generate your own seamless background pattern.
Animated CSS Background Generator – Make your own mind-blowing animated background with this tool.
Keyframes.app – Generate awesome CSS animations with this web-based tool.
Gradihunt – Find or generate the perfect CSS gradient for your projects.
CSS Section Separator Generator – Use this tool to create unique separator shapes with pure CSS.
Parametric Color Mixer – Create your own custom color palette and export to CSS or SVG.
Neumorphism.io – A tool for creating Soft-UI CSS code.
700+ CSS Icons – A collection of free icons available in CSS, SVG and other popular formats.
Indie Icons – A collection of icons you can copy-and-paste into CSS, HTML and Illustrator.
Grid Cheatsheet – A handy reference for learning the intricacies of CSS Grid.
BEM Cheat Sheet – Use this guide to boost your CSS class naming skills.
A list of 300+ CSS properties – A helpful list of CSS properties that are supported by browsers.
Visualizing CSS Resets – Use this helpful infographic to better understand what CSS resets do.
Selectors Explained – Translate CSS selectors into plain English.
CSS Breakpoints Used by Popular CSS Frameworks – Confused about which CSS breakpoints to implement? Check out what the biggest frameworks are utilizing for inspiration.
Learn Z-Index Using a Visualization Tool – CSS z-index can be hard to grasp. This visual guide can help you get the hang of it.
Color Theme Switcher – Learn how to add multiple color schemes to your website via CSS.
The CSS Cascade – Learn how web browsers resolve competing CSS styles.
What’s Missing From CSS? – A random look at responses to the annual CSS survey. See anything you agree with?
The post Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020 appeared first on Speckyboy Design Magazine.
Latest PECL Releases:
Updated Windows build environment to build with newer Oracle Client libraries. (cmb)
Stop me if you’ve heard this one. You tell yourself you’re going to turn over a new leaf and start a new habit that will help you elevate your career as a designer somehow. Maybe you want to start doing more interesting personal projects, or refining your marketing tactics to reach out to more and better clients.
However, it never seems to go exactly as planned. You come up with some kind of excuse, and your great plans of achieving your design career goals are quickly flushed down the drain. What happened? Did the freelancer motivation fairy suddenly appear and deflate you like a balloon? Or is there a more practical reason?
Have you ever spent time wishing you could simply “get it together” and start behaving a different way than you’ve always done? Most of the time, it’s far better to simply acknowledge the way we are – our strengths and weaknesses – than to simply wish that we were different and attempt to work against our nature.
We often rationalize our bad behavior by making excuses and putting up a front for others – friends, clients, family members – who might judge us if they knew the truth. But this does nothing but cause even more stress and procrastination.
If, for example, you are a freelancer who also happens to be a night person, and you don’t function well in the morning (ahem, like me), it’s much better to just be honest about this fact and work with it rather than against it. Yes, some potential clients may take a judgmental attitude to your working at night and sleeping late.
But who cares? As long as your schedule works for you and you get your work done, the opinions of others are irrelevant.
I believe that there is an ideal client for every designer, and once you find the people you are truly meant to work with, everything will fall into place, almost like magic.
All right, so you suddenly get struck with massive professional inspiration, and you want to become the best freelance designer you can possibly be. Perhaps it hits you around the new year when people are likely to make grand promises that, unfortunately, rarely get fulfilled.
What happens to us during these moments? Our intentions are good, but there’s always a tiny kernel of denial (read: dishonesty) there that we try in vain to ignore. It always catches up with us, though, doesn’t it?
Want to know the secret to really meeting such a lofty goal like the one above? Set tiny goals for yourself. Your work ethic is like a muscle – you must exercise it and build strength if you want to accomplish amazing feats of willpower.
If you can only reach out to one new potential client a week, for example, then that’s fine. Just be honest with yourself about where you’re starting. Yes, it’s slow at first, but it’s much better to start in an honest place than it is to waste time daydreaming about a perfect future in which you do everything ideally.
That future awesome designer version of yourself will never become a reality unless you start somewhere.
Have you ever just done away with every excuse that your brain could come up with and plowed through everything on your to-do list? If you’re anything like me, it was one of the most wonderful feelings in the world – right up there with getting an unexpected pay increase or the birth of your first child. People love to be productive. Why do you think there are so many products and services out there dedicated to increasing your productivity?
By not rationalizing away the reasons to take action, we can get far more done than we ever thought possible. Some of the most common rationalizations are things we might not even recognize as thoughts that hold us back.
Things like telling ourselves “I’m too lazy to call back that person from last night’s networking event,” “I’m too busy to add another personal project to my to-do list,” or “I’m just not the kind of person who can get featured on that design podcast,” are common mindsets we have that can actually become more true the more we say them.
You are whatever you say you are. If you say you’re unproductive, or lazy, or scatterbrained, then guess what? Eventually, you’ll become so entrenched in that belief that it will be nearly impossible to break out of it.
In the story Pinocchio, a marionette makes a wish upon a star to become a real, flesh and blood boy. Wishing for things is a common theme in fairy tales, because it makes the audience feel good. The protagonist makes a wish, and the powers that be start working immediately to make their wish a reality.
The problem with fairy tales is that they give no reflection of what it actually takes to achieve your goals in the real world. The real world doesn’t work like a fantasy land – you can wish all you want to, but unless you’re actually willing to take action and make difficult decisions, nothing you wish for will ever happen.
Sure, you might get lucky. You may land an amazing client completely by accident, or a wealthy VC might suddenly decide to finance the creation of your firm. But 99% of the time, it takes hard work and determination to get what you want.
And that’s the difference between the things we wish for, and the things we actually want. Many designers wish they were more successful, or that they could drop certain clients for good, but only the people who actively want those things are going to make the necessary sacrifices to achieve them. Want implies action – it’s a “doing” verb. Wish is a “thinking” verb.
If we make a conscious effort to be brutally honest with ourselves about why we often don’t take action on our professional goals, we can lay down a powerful foundation that will allow us to make dramatic changes to our work habits, and become the rockstar designers we all want to be.
The post What Happened to the Great Plans For Your Design Career? appeared first on Speckyboy Design Magazine.
A year “like no other” is about to come to a close. 2020 was certainly unique for everyone – web designers included. And it challenged us on several levels.
Our daily grind was complicated by shutdowns, kids invading the home office, and clients who needed our help in rapidly changing their business models. Even though many of us were stuck in the house, there was rarely a dull moment.
All of that aside, the year saw many developments that had nothing to do with pandemics or other chaos. New tools were brought to market, our favorite software saw important updates and the community was as creative and helpful as ever. In other words: 2020 had plenty of positives for designers and developers to celebrate.
Let’s take a look back at some important and interesting developments that impacted web designers this past year.
While there were no revolutionary changes to CSS in 2020, that doesn’t mean it didn’t have a great year. Quite the contrary.
The language benefitted from the continued steady evolution of web browsers. As modern versions of Chrome, Edge, Firefox and Safari are released, support for newer CSS standards and specs grow.
In practice, this means web designers can adopt new techniques with confidence. CSS Grid layouts, for example, are a much safer bet than they were a few years ago. And while fallbacks are never a bad idea, they may not need to be as drastic.
That’s due to the dwindling number of users for legacy browsers such as Internet Explorer. According to StatCounter Global Stats, usage of IE was down to a measly 1.05% of the market as of October 2020. Compare that with the nearly 2% it captured a year earlier.
Chart courtesy of StatCounter Global Stats
The further IE and other outdated browsers are in the rearview, the easier it will be to bring the latest CSS developments to production websites. This allows the language to better fulfill its vast potential. 2020 was a big step in that direction.
The utilization of “headless” or “detached” content management systems has continued to gain momentum. This practice involves employing a CMS (such as WordPress) to feed content to an outside application.
This leads to several interesting possibilities. You might send content out to a mobile application – allowing both your app and website to share the same blog posts. Likewise, you could leverage a static website generator such as GatsbyJS or 11ty to create a super-fast user experience – perfect for heavily-trafficked sites. All while keeping a familiar back end UI for your content creators.
And, although this technology is still relatively young, you can see it starting to take hold. GatsbyJS, for one, has come a long way over the past year. GraphQL, its companion query language, is steadily maturing. It aims to be both efficient and high-performing.
Besides, a number of tools are being built to streamline the process of creating a headless configuration. This is vital, as it is not currently a beginner-friendly task. The easier this all becomes, the more widespread and creative its usage will be.
For now, headless CMS configurations are being deployed more and more. Still, unless you’re an expert, diving in head-first and adopting this technology for client projects may not be wise.
Therefore, it’s probably best to start small and experiment. Once you are on solid ground, going headless could be a great solution.
The way we build website and mobile application prototypes continues to change. Many designers are eschewing traditional tools like Photoshop in favor of niche apps like Adobe XD, Figma, and Sketch.
Each of these tools has been built with web and mobile applications in mind. Therefore, designers don’t have to settle for passing along static mockup images to clients. Rather, they can create something fully-interactive that better represents what the final product will do.
Of course, the tools themselves are not new – they’ve been on the market for several years. But in 2020 the argument for using any of these apps has become more compelling.
For one, each has robust developer communities that release helpful goodies such as plugins and UI kits. They help designers extend functionality and increase efficiency. And the apps themselves have released some exciting features, along with smoothing out rough edges.
However, another feature of prototyping apps also became very important: their built-in collaboration tools. They facilitate remote feedback from both clients and team members. With so many of us working from home this year, anything that makes the review process easier is a massive bonus.
December 2020 marked the Gutenberg block editor’s second birthday. But, unlike most 2-year-olds, it seems like the fits and tantrums are (mostly) a thing of the past. Gutenberg is becoming quite mature for its age.
Looking at the editor’s UI, it’s lightyears ahead of where it was back at the beginning. A lot of development time went into making the interface more intuitive. Getting around is much easier, as is finding and selecting individual blocks.
Accessibility was also a big focus. This particular subject is important in all areas of web development but was also a major criticism of earlier versions of Gutenberg. So, improving both the UI and making it more accessible are big wins for 2020.
The year also saw the introduction of custom block patterns, which make it easier to use and reuse a specific layout. The ability to implement a custom layout anywhere it’s needed is no small achievement. This was one of the missing features that made the block editor a difficult sell for some use cases.
And, while not ready for prime time just yet, Gutenberg-powered full site editing (FSE) is in the works. This will enable users with a compatible theme to edit all aspects of their website through the block editor. The first such theme, Q, was made available for download earlier this year.
All told, WordPress now has a default editing experience that can be seriously considered for just about any project. There are still some advantages to page builders – not to mention the old Classic Editor. But blocks are catching on.
One thing you may notice about the items above is that they all involve evolutionary change. Nothing here appeared to be a watershed moment for web designers. In fact, posing this subject on Twitter didn’t result in any earth-shattering recommendations either.
Maybe that makes for less-than-compelling headlines. Yet it also means that, in a chaotic year, there was a comforting consistency for the web design industry. The tools and technologies we already use just got better. Nothing to complain about there.
When we look back years from now, a lot of historic events will stand out from 2020. But web designers may see it as a time that set the table for bigger things yet to come.
The post 2020 Web Design Year in Review appeared first on Speckyboy Design Magazine.
