Flamingo CSS Framework
A lightweight, attribute-based CSS framework by Amr Khaled.
Introduction
Flamingo CSS is a lightweight, attribute-based CSS framework designed to simplify common styling tasks and add engaging visual effects to your web projects. By simply adding specific attributes to your HTML elements, you can apply predefined styles for backgrounds, shapes, animations, hover effects, buttons, and a wide range of colors.
This documentation provides a comprehensive guide to all available attributes, from installation to detailed descriptions and examples.
Installation
To use Flamingo CSS, simply add a <link> tag in the <head> section of your HTML document, pointing to your hosted float.css file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flamingo Project</title>
<!-- Include Inter font for better typography -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;800&display=swap" rel="stylesheet">
<!-- Link to your Flamingo CSS file -->
<link rel="stylesheet" href="https://685729125b22ba1892bfdb50--tubular-basbousa-c9e2fe.netlify.app/float.css">
</head>
<body>
<!-- Your content here -->
</body>
</html>
Important Note on Attributes: For Flamingo CSS to work, you apply its custom attributes directly to your HTML elements, **without square brackets** in the HTML tag itself.
For example, to apply flexbox styles for a row, you would write:
<div flex-row>...</div>And for a purple button, it would be:
<button btn='purple'>...</button>
The `float.css` file contains CSS rules that are internally designed to recognize these attributes without the need for square brackets in your HTML. This allows for a clean and intuitive way to add styles. Please make sure you use the attributes exactly as shown in the examples below for them to work correctly!
Layout Utilities
Applies `display: flex` with `flex-direction: row`, and centers items horizontally and vertically.
<div flex-row>...</div>
Applies `display: flex` with `flex-direction: column`, and centers items horizontally and vertically.
<div flex-column>...</div>
Centers an item within its flex container (`align-self: center; justify-self: center;`).
<div flex-row><span center>...</span></div>
Background Utilities
Sets background to `center`, `no-repeat`, and `cover`.
<div bg='auto'></div>
Applies an inset box shadow with a linear gradient, creating a glow effect.
<div glow></div>
Clip-Path Shapes
These attributes apply various geometric shapes using `clip-path`.
Clips the element into a perfect circle.
<div circle></div>
Clips the element into a triangle.
<div triangle></div>
Clips the element into an ellipse.
<div ellipse></div>
Ensures the element is a square clip path (inset 0).
<div square></div>
Clips the element into a rectangle (with 10% inset on top/bottom).
<div rectangle></div>
Clips the element into a diamond shape.
<div diamond></div>
Clips the element into a hexagon shape.
<div hexagon></div>
Clips the element into a parallelogram.
<div parallelogram></div>
Clips the element into a star shape.
<div star></div>
Clips the element into a trapezoid shape.
<div trapezoid></div>
Applies a complex, jagged clip path.
<div sharp></div>
Applies a wave-like clip path at the top.
<div wave></div>
Clips the element into a classic house shape.
<div home></div>
Sets a fixed height and width with border-radius to resemble a mobile phone.
<div mobile></div>
Clips the element into a television screen shape.
<div tv></div>
Clips the element into a sloping parallelogram.
<div slope></div>
Clips the element into a heart shape.
<div heart></div>
Applies a jagged, broken-looking clip path.
<div broken></div>
Standard Animations
These attributes apply various continuous animations to elements. These are general-purpose motion effects.
Continuously rotates the element 360 degrees.
<div spin></div>
Makes the element bounce vertically.
<div bounce></div>
Makes the element grow slightly and fade in/out.
<div pulse></div>
Makes the element wiggle from side to side.
<div swing></div>
Fades the element in while sliding up.
<div fadein></div>
Flips the element horizontally.
<div flip></div>
Makes the element shake horizontally.
<div shake></div>
Makes the element continuously grow and shrink.
<div grow></div>
Makes the element continuously shrink and grow.
<div shrink></div>
Slides the element horizontally left and right.
<div slide-x></div>
Slides the element vertically up and down.
<div slide-y></div>
Coloring Animations
These attributes apply animated background color changes using predefined palettes.
Applies a generic background color animation (changes every 1s).
<div coloring></div>
Each attribute applies a specific 3-color background animation. Here's an example:
<div coloring-1></div>
Specific 3-color background animation (green, yellow, orange).
<div coloring-2></div>
Specific 3-color background animation (red, cyan, light purple).
<div coloring-3></div>
... and so on, for `coloring-4` through `coloring-50`, each with a unique color palette.
Floating Ball Animations
These attributes create glowing, animated balls that float across the element using `::before` pseudo-elements. The parent element should have `position: relative` and `overflow: hidden` for best results.
A glowing ball animation with a specific path and speed.
<div style="position: relative; overflow: hidden; height: 150px; width: 100%;" ball-move-1></div>
Another glowing ball animation with a different path and speed.
<div style="position: relative; overflow: hidden; height: 150px; width: 100%;" ball-move-2></div>
A larger glowing ball animation.
<div style="position: relative; overflow: hidden; height: 150px; width: 100%;" ball-move-3></div>
A faster, smaller glowing ball animation.
<div style="position: relative; overflow: hidden; height: 150px; width: 100%;" ball-move-4></div>
A very large, slow glowing ball animation.
<div style="position: relative; overflow: hidden; height: 150px; width: 100%;" ball-move-5></div>
... and so on, for `ball-move-6` through `ball-move-50`, each with different paths, sizes, and speeds (assuming their CSS is defined in `float.css`).
Special Effects Animations
These attributes apply unique visual effects to elements, often using pseudo-elements or SVG filters.
Creates a confetti-like falling paper animation over the element. The parent element should have `position: relative` and `overflow: hidden`.
<div style="position: relative; overflow: hidden; height: 200px;" birthday-paper></div>
Applies a subtle, moving spotlight/light focus effect to the element. The element itself should have a background color for the effect to be visible. Needs `position: relative` and `overflow: hidden`.
<div style="height: 150px; background-color: #e3f2fd;" lightfouce></div>
Gives the element a hand-drawn or sketchy appearance using an SVG filter, with a hover effect.
<div handdrawn></div>
Rotate Utilities
Apply specific rotations to elements. Values range from `rotate-1` to `rotate-180`.
Rotates the element 45 degrees.
<div rotate-45></div>
Rotates the element 90 degrees.
<div rotate-90></div>
Rotates the element 180 degrees.
<div rotate-180></div>
... and so on, for every degree from 1 to 180. E.g., `rotate-1`, `rotate-2`, ..., `rotate-179`.
Hover Effects
These attributes apply a specific effect when the element is hovered over.
Scales the element up slightly on hover.
<div hover-1></div>
Scales the element down slightly on hover.
<div hover-2></div>
Rotates the element 8 degrees on hover.
<div hover-3></div>
Applies a shadow pop effect on hover.
<div hover-4></div>
Applies a glow effect on hover.
<div hover-5></div>
Changes border color on hover.
<div hover-6></div>
Applies a gradient background on hover.
<div hover-7></div>
Applies a blur effect on hover.
<div hover-8></div>
Skews the element on hover.
<div hover-9></div>
Reduces opacity on hover.
<div hover-10></div>
Applies a pulse animation on hover.
<div hover-11></div>
Applies a wiggle animation on hover.
<div hover-12></div>
Applies a bounce animation on hover.
<div hover-13></div>
Flips the element on hover.
<div hover-14></div>
Slides the element right on hover.
<div hover-15></div>
Slides the element left on hover.
<div hover-16></div>
Slides the element up on hover.
<div hover-17></div>
Slides the element down on hover.
<div hover-18></div>
Changes text color on hover.
<div hover-19></div>
Applies an inset shadow on hover.
<div hover-20></div>
Changes border-radius to 50px on hover.
<div hover-21></div>
Applies a grayscale filter on hover.
<div hover-22></div>
Increases saturation on hover.
<div hover-23></div>
Rotates hue by 90 degrees on hover.
<div hover-24></div>
Applies a neon shadow on hover.
<div hover-25></div>
Changes border to dashed on hover.
<div hover-26></div>
Changes border to dotted on hover.
<div hover-27></div>
Applies a subtle glass effect on hover.
<div hover-28></div>
Changes shadow color on hover.
<div hover-29></div>
Morph Hover Effects
These attributes allow an element's clip-path to smoothly transition to a different shape on hover.
On hover, the element transitions into a star shape.
<div morph-hover="star" circle></div>
On hover, the element transitions into a circle shape.
<div morph-hover="circle" square></div>
On hover, the element transitions into a hexagon shape.
<div morph-hover="hexagon" triangle></div>
On hover, the element transitions into a diamond shape.
<div morph-hover="diamond" ellipse></div>
Gradients
Apply modern linear gradients as background colors.
Gradient from #6600FF to #FF6FD8.
<div gradient-1></div>
Gradient from #43e97b to #38f9d7.
<div gradient-2></div>
Gradient from #f7971e to #ffd200.
<div gradient-3></div>
Gradient from #f953c6 to #b91d73.
<div gradient-4></div>
Gradient from #30cfd0 to #330867.
<div gradient-5></div>
Gradient from #5ee7df to #b490ca.
<div gradient-6></div>
Gradient from #ee9ca7 to #ffdde1.
<div gradient-7></div>
Gradient from #f6d365 to #fda085.
<div gradient-8></div>
Gradient from #6600ff to #c6e8f8.
<div gradient-9></div>
Gradient from #ffffff to #00c3ff.
<div gradient-10></div>
Components
Card
A styled card component with padding, border-radius, and shadow.
<div card>...</div>
Card Title
This is some content inside a Flamingo CSS card.
Button
A styled button with padding, border-radius, background, and hover effects.
<button button>Click Me</button>
Colored buttons. Replace `{color}` with various predefined colors like `purple`, `blue`, `red`, etc.
<button btn='purple'>Purple</button> <button btn='green'>Green</button>
Background Colors
Set background colors using attribute selectors for basic colors and various shades (e.g., `red`, `red-500`).
Basic Colors
Sets background to a vibrant red.
<div red></div>
Sets background to a vibrant pink.
<div pink></div>
Sets background to a deep purple.
<div purple></div>
Sets background to a darker purple.
<div deep-purple></div>
Sets background to an indigo blue.
<div indigo></div>
Sets background to a standard blue.
<div blue></div>
Sets background to a light blue.
<div light-blue></div>
Sets background to a cyan blue.
<div cyan></div>
Sets background to a teal green.
<div teal></div>
Sets background to a vibrant green.
<div green></div>
Sets background to a light green.
<div light-green></div>
Sets background to a lime green.
<div lime></div>
Sets background to a golden yellow.
<div yellow></div>
Sets background to an amber yellow.
<div amber></div>
Sets background to an orange.
<div orange></div>
Sets background to a deep orange.
<div deep-orange></div>
Sets background to a brown.
<div brown></div>
Sets background to a standard gray.
<div gray></div>
Sets background to a blue-gray.
<div blue-gray></div>
Sets background to a dark black.
<div black></div>
Sets background to white.
<div white></div>
Sets background to a very light purple/gray.
<div light></div>
Sets background to a dark gray/blue.
<div dark></div>
Shaded Colors (e.g., `red-100` to `red-900`)
Each major color (red, blue, green, yellow, purple, gray) has 10 shades from 50 (lightest) to 900 (darkest).
Various shades of red.
<div red-50></div> <div red-500></div> <div red-900></div>
Various shades of blue.
<div blue-50></div> <div blue-500></div> <div blue-900></div>
Various shades of green.
<div green-50></div> <div green-500></div> <div green-900></div>
Various shades of yellow.
<div yellow-50></div> <div yellow-500></div> <div yellow-900></div>
Various shades of purple.
<div purple-50></div> <div purple-500></div> <div purple-900></div>
Various shades of gray.
<div gray-50></div> <div gray-500></div> <div gray-900></div>
Text Colors
Set text colors using attribute selectors, prefixed with `t` for basic colors and various shades (e.g., `tred`, `tred-500`).
Basic Text Colors
Sets text color to a vibrant red.
<span tred>...</span>
Red Text
Sets text color to a vibrant pink.
<span tpink>...</span>
Pink Text
Sets text color to a deep purple.
<span tpurple>...</span>
Purple Text
Sets text color to a darker purple.
<span tdeep-purple>...</span>
Deep Purple Text
Sets text color to an indigo blue.
<span tindigo>...</span>
Indigo Text
Sets text color to a standard blue.
<span tblue>...</span>
Blue Text
Sets text color to a light blue.
<span tlight-blue>...</span>
Light Blue Text
Sets text color to a cyan blue.
<span tcyan>...</span>
Cyan Text
Sets text color to a teal green.
<span tteal>...</span>
Teal Text
Sets text color to a vibrant green.
<span tgreen>...</span>
Green Text
Sets text color to a light green.
<span tlight-green>...</span>
Light Green Text
Sets text color to a lime green.
<span tlime>...</span>
Lime Text
Sets text color to a golden yellow.
<span tyellow>...</span>
Yellow Text
Sets text color to an amber yellow.
<span tamber>...</span>
Amber Text
Sets text color to an orange.
<span torange>...</span>
Orange Text
Sets text color to a deep orange.
<span tdeep-orange>...</span>
Deep Orange Text
Sets text color to a brown.
<span tbrown>...</span>
Brown Text
Sets text color to a standard gray.
<span tgray>...</span>
Gray Text
Sets text color to a blue-gray.
<span tblue-gray>...</span>
Blue-Gray Text
Sets text color to a dark black.
<span tblack>...</span>
Black Text
Sets text color to white.
<span twhite>...</span>
White Text
Sets text color to a very light purple/gray.
<span tlight>...</span>
Light Text
Sets text color to a dark gray/blue.
<span tdark>...</span>
Dark Text
Shaded Text Colors (e.g., `tred-100` to `tred-900`)
Each major color (red, blue, green, yellow, purple, gray) has 10 shades from 50 (lightest) to 900 (darkest).
Various shades of red text.
<span tred-50>Text</span> <span tred-500>Text</span> <span tred-900>Text</span>
Various shades of blue text.
<span tblue-50>Text</span>
Various shades of green text.
<span tgreen-50>Text</span>
Various shades of yellow text.
<span tyellow-50>Text</span>
Various shades of purple text.
<span tpurple-50>Text</span>
Various shades of gray text.
<span tgray-50>Text</span>