visual frameworks – A language of patterns
Visual frameworks are patterns to help you think creatively, reframe challenging situations, and imagine possible strategies and solutions.
There are three ways to search the library:
You can search by typing in the search bar at the top right of every page.
You can explore the tag cloud to see common themes and questions.
You can search visually. Think of a situation or challenge that’s on your mind right now and click on a visual below.
Simple.css
A classless CSS framework that makes semantic HTML look good.
9 Types of Top CSS Frameworks In 2021 - 1stWebDesigner
The benefit of a CSS framework is that it helps you create a number of eye-catching layouts without having to start from scratch.
-
For Simple Needs, Use Class-less
Some examples of classless frameworks include sakura, watercss, holiday.css, bamboo css, attricss, and basic.css. -
To Build on Mobile, Opt for Very Lightweight
Examples of very lightweight CSS include pure, chota, and milligram. -
For an Open-and-Go Solution, Use General Purpose
Examples of general purpose CSS include bootstrap, primer, foundation, and base. -
For Niche Needs, Opt for Specialized
An example of a specialized CSS is bojler, which is used for developing lightweight and responsive email templates. It’s no secret that developing email templates is a pain. -
Looking to Skip Javascript? Material Design is the Way to Go
Material design CSS frameworks include newer versions of UI controls such as check boxes, text fields, column layouts ,and typography. MD is can be used across browsers by anyone who wants to create more portable and usable web pages. -
For Greater Attention to Detail Utility-Based Frameworks Are Best
Some examples of utility-based frameworks include tachyons and tailwind CSS. -
For Web App Development and Mobile-First, Look to Base/Reset/Normalize
Some great examples of base css frameworks include sanitize.css, ress, minireset.css, normalize.css, modern normalize, and natural selection. -
For More Flexibility, Toolkits Work Well
An example of a toolkit CSS is Bourbon. Bourbon aims for clarity, is pure Sass and lacks visual opinion. -
Honorable Mentions Are Those with Stalled Development
Some examples of stalled development frameworks include flexbox grid, semantic UI, materialize, neat, wing, and propeller.
Bulma: Free, open source, and modern CSS framework based on Flexbox
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.
For the best results using Bulma, it's recommended to use the control element as often as possible.
<div class="field">
<label class="label">Username</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
<p class="help is-success">This username is available</p>
</div>
Documentation - Materialize
Materialize is a modern responsive CSS framework based on Material Design by Google.
Minimal CSS Frameworks — dailydevlinks
Looking for a lighter framework for your next project? Here's a list of some of the best minimal CSS frameworks out there.
https://hakanalpay.com/bahunya/
Dark mode based on tacit
https://github.com/yegor256/tacit
https://purecss.io/
Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It’s what you need, without the cruft.
🔗 https://picturepan2.github.io/spectre/index.html
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
https://andybrewer.github.io/mvp/
MVP styles your root HTML elements, so you don’t need to learn a new CSS framework or naming conventions.
It’s like an amped up CSS reset that you can toss into any project to get decent styling.
https://newcss.net/
new.css is a classless CSS framework to write modern websites using only HTML.
https://github.com/oxalorg/sakura
Wonderful for people not really good or interested with design as sakura is nothing but a set of reasonable defaults
https://watercss.kognise.dev/
Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
https://jenil.github.io/chota/
Magical 12 column grid
Comes with a handful of components & utilities
http://getskeleton.com/
You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).
What I expect from a Web Framework
The Web Framework Is Dead
The main problem with Web Frameworks is the "Web"-part.
You either have a good web framework (Catalyst, Dancer) which makes it hard to reuse your code in non-web-contexts (and there are a lot of those: cronjobs, tests, fixup scripts, daemons, importer & exporter, ...); or you have a "closed system" like Mojolicous or Ruby on Rails, which tend to include everything (i.e. they come with their own email-system, cron-replacement, event loop, ...) but sort of drift away from the main language and generate their own ecosystem / walled garden.
Foundation for Emails | A Responsive Email Framework from ZURB
Making Emails Suck Less
We know building HTML emails is hard, especially responsive emails. That's why we created Foundation for Emails. Get away from complex table markup and inconsistent results. Use Foundation for Emails to spend less time coding emails, and more time on other things, like building amazing products.
Static Site Generators Reviewed: Jekyll, Middleman, Roots, Hugo
Static site generators are quickly becoming a big part of the professional website builder’s toolbox. A new static website generator seems to pop up every week. Figuring out which one to use can be like a walk in the jungle.