pollen
flexboxfroggy
pollen | flexboxfroggy | |
---|---|---|
19 | 476 | |
856 | 6,726 | |
0.5% | - | |
0.0 | 6.7 | |
5 months ago | 26 days ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
pollen
-
Why does everyone love tailwind
So frameworks like https://www.pollen.style/ are doing this. Personally I still prefer the tailwind approach.
-
Tailwind CSS and the death of web craftsmanship
I do think that the real value of Tailwind comes from the utility classes, rather than css-in-html paradigm. You could achieve the same, for example, with Pollen.css [0] or Open Props [1].
[0] https://github.com/heybokeh/pollen
[1] https://github.com/argyleink/open-props
-
Is vanilla CSS enough?
Tailwind is a great option to look into, I really enjoy it, but if you want something a bit more in-between, you can check out frameworks like https://www.pollen.style. There you get a framework of consistent CSS variables you can use, while still writing all your vanilla CSS yourself with full control of everything.
-
What UI framework would you recommend?
It uses UnoCSS (think TailwindCSS but super customizeable) with Pollen (which is similar to open props).
-
Open Props: Tailwind Alternative from Chrome Dev Team
Very similar to Pollen (https://www.pollen.style), though it looks a little more complicated.
IMO the main value of Tailwind is that it's a step function over your units and colors, which helps bring better consistency and dev speed to UI implementation.
Tailwind's "write class names instead of CSS" approach makes sense in the component-based systems most apps are built in these days, where pretty much any repeated markup will be turned into a component. It performs better than scoped styles and is less complicated.
A CSS variable approach like Open Props or Pollen is, in my experience, better if you're not using a component-based system (ie. conventional HTML) and therefore have repeated markup patterns. Having a simple class name to apply to repeated markup is much more maintainable than trying to copy/paste a long tailwind string around.
- Pollen, the CSS variable build system
-
What are cool kids using for styling these days?
Pollen and Open Props are two popular examples of such token first frameworks. If you are not familiar with CSS Custom Properties (also called CSS variables), I recently wrote about how to use them to create a CSS Style API layer.
- Ask HN: Looking for an open CSS variables theme that was published here
-
Pollen vs. Tailwind CSS: Finding the better build experience
In the last few years, a new set of frameworks with a radically different concept drew the attention of frontend developers. These frameworks are now extremely popular in the frontend world, and you’re likely already familiar with them: Tailwind CSS and Pollen.
- Tailwind CSS v3.0
flexboxfroggy
-
React Native’s Flexbox: A Visual Guide
Flexbox Froggy: A game that teaches Flexbox concepts by positioning frogs on lily pads.
-
100+ FREE Resources Every Web Developer Must Try
Flexbox Froggy: Learn CSS Flexbox by playing this game.
-
21 Resources to Learn And Practice Your CSS Skills
Flexbox is an important topic of CSS and you can learn it by playing a game called Flexbox Froggy. You can easily learn the properties of Flexbox while having some fun.
-
i need a help 2 fix my page of my neocities webzite
See https://flexboxfroggy.com/ https://cssgridgarden.com/ and maybe also https://flukeout.github.io/
- An Interactive Guide to CSS Grid
-
Best Resources For Web Developers 💻 [HTML + CSS + JavaScript]
Flexbox Froggy - An interactive game to learn and practice CSS Flexbox. Website: https://flexboxfroggy.com/
-
The cutest tools to practice CSS 🧃
Flexbox Froggy
- Hi, could anyone help me wrap my head around flexbox? I'm trying to get a layout like this but I just can't seem to understand how to properly use flexbox.
-
CSS Is, in Fact, Awesome
This started improving for me recently when I spent more time really learning flexbox and flexgrid. They are part of CSS so no installs needed. It’s a different way of thinking but I’m finally good enough with flexbox that I can tell when I need it and make productive use of it. Knowing these patterns makes a difference for me, since now I can assemble the blocks better than before when I’d just try mostly random css without any guiding principles.
Flexbox froggy helped a lot with some practical experience that translated fairly well to my regular work.
https://flexboxfroggy.com/
There are other games like this that I haven’t gotten to yet, including one for flexgrid. Once I clear all the levels in flexbox froggy I’m going to try the flexgrid game.
Then after that I’m going to spend time with bootstrap and tailwind since the last time I really used them was back in my more junior days when I barely knew anything at all about css.
-
Day 64: CSS layouts
Flexbox Froggy is an excellent resource for interactive learning.
What are some alternatives?
tailwindcss - A utility-first CSS framework for rapid UI development. [Moved to: https://github.com/tailwindlabs/tailwindcss]
missing-semester - The Missing Semester of Your CS Education 📚
open-props - CSS custom properties to help accelerate adaptive and consistent design.
layoutit-grid - Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.
unocss - The instant on-demand atomic CSS engine.
Python-Robocode - A Fork of Robocode for python programming
halfmoon - Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components.
materials - Bonus materials, exercises, and example projects for our Python tutorials
daisyui - 🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library
learnxinyminutes-docs - Code documentation written as code! How novel and totally my idea!
nord - An arctic, north-bluish color palette.
canvas-tetris - A 2D tetris game in HTML5 canvas