Flexbox Froggy 🐸

Flexbox Froggy is a game for learning CSS flexbox. 👾

Flexbox Froggy takes inspiration from the classic arcade game Frogger, and web literacy games like the brilliant CSS Diner and Erase All Kittens, where you learn about CSS selectors and HTML markup respectively. 🔥


https://t.me/pgimg/130

[ Learn ] : flexboxfroggy.com

〰〰〰〰〰〰
#FlexBox #CSS
@ProgrammingTip

All You Need To Know About CSS-in-JS 🌈

Thinking in components — No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). 🗂


What is CSS-in-JS❓

JSS is a more powerful abstraction over CSS. 🦋

It uses JavaScript as a language to describe styles in a declarative and maintainable way. 🗣

It is a high performance JS to CSS compiler which works at runtime and server-side. 💎

This core library is low level and framework agnostic. ✨

It is about 6KB (minified and gzipped) and is extensible via plugins API. 💉


https://t.me/pgimg/141

[ Article ] : kutt.it/jss

〰〰〰〰〰〰
#CSS #JavaScript #JSS
@ProgrammingTip

Animate Calligraphy with SVG in CSS 🦋

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. 🤔

But upon closer inspection, what the questions are really trying to ask is something like this :

How do you animate calligraphy ⁉️

This article answers this question. ✨


https://t.me/pgimg/143

[ Article ] : https://kutt.it/g0QuEh

〰〰〰〰〰〰
#HTML #CSS #FrontEnd
@ProgrammingTip

Card Surge 🌈

Designing cards takes tweaking subtle details, and an easier to use playground makes finding the right styles faster. 🏃🏻

Card Surge is a playground for designing cards in a web interface. ✨

Designing cards that look 🔥 takes careful tweaking and attention to detail, and Card Surge makes it easy. 🙅🏻‍♂️

Take existing styles from well designed sites and use them as a starting point, or begin playing with your own. Copy the code out into your own project once your done. 💎


https://t.me/pgimg/145

[ Website ] : card.surge.sh

〰〰〰〰〰〰
#CSS #UI #Cards
@ProgrammingTip

Common Webpage Design Mistakes ⚠️

Simple layout and design tips to help you create a stunning webpage. 🦋

This article shows 30 common design mistakes and their solution with images included. 🌈


https://t.me/pgimg/150

[ Article ] : kutt.it/mstk

〰〰〰〰〰〰
#UI #Design #CSS
@ProgrammingTip

Bulma 🍀

Bulma is a modern CSS framework based on Flexbox. ✨

Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css 💎

You can either use that file, "out of the box", or download the Sass source files to customize the variables. 🌈

There is no JavaScript included. People generally want to use their own JS implementation. ⚡️

Bulma can be considered "environment agnostic": it's just the style layer on top of the logic. 🌀


https://t.me/pgimg/167

[ Website ] : bulma.io
[ Github ] : kutt.it/blgit

〰〰〰〰〰〰
#CSS #Framework
@ProgrammingTip

New horizons in CSS: Houdini and the Paint API 🌈

The way we write CSS is about to change. No, I don’t mean you have to change how you write your styles, but we as developers are about to get a lot more control. 💪🏻

What am I talking about❓That would be the CSS Houdini spec and the new browser APIs that are coming out as a part of it. ✅


https://t.me/pgimg/189


[ Article ] : kutt.it/papi

〰️〰️〰️〰️〰️〰️
#CSS #PaintAPI
@ProgrammingTip

CSSFX ✨

Beautifully simple click-to-copy CSS effects. 🔥

A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. 💎

Powered by CSS with minimal markup. ✅
Completely open source and MIT licensed.⚡️


[ GitHub ] : github.com/jolaleye/cssfx
[ Demo ] : cssfx.dev

〰️〰️〰️〰️〰️〰️
#CSS #Effects
@ProgrammingTip

Pickr 🌈

Flat, simple, responsive and hackable Color-Picker library. ✨
No dependencies, no jQuery. ⚡️
Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more❗️


[ Demo ] : simonwep.github.io/pickr
[ Github ] : github.com/Simonwep/pickr

〰️〰️〰️〰️〰️〰️
#CSS #FrontEnd
@ProgrammingTip

Bootstrap 5 alpha! 🎉

Bootstrap is one of the open source that many developers love, including me. So what do we expect of the new changes when Bootstrap 5 is released?

Features ✨:
• jQuery removed
• Updated forms
• Enhanced grid system
• CSS custom properties by dropping support for Internet Explorer

Comming soon: RTL, offcanvas, and more 💎

Head to https://v5.getbootstrap.com to explore the new release. 🔥

〰️〰️〰️〰️〰️〰️
#Bootstrap #CSS
@ProgrammingTip