TangoMan Pivot CSS is a lightweight extension of pico.css, (the minimal CSS framework for semantic HTML) focused on providing a boilerplate for building single page applications.
Documentation can be found here : https://tangoman75.github.io/pivot
- Toast Notifications: Manages toast notifications with flexible positioning.
- Tabs: Enables accessible tabbed navigation with event listeners.
- Theme Toggle: Toggles between light and dark themes with a button.
- Menubar Collapse: Adds functionality for collapsing menubars on smaller screens.
- Close Buttons: Automatically removes elements with the
closeclass when clicked. - Animations: Adds event listeners for animating elements with the
animateclass.
- Defines a minimal color palette for success, warning, and danger elements.
- Adds a
flexclass for flexible layouts. - Fixes grid layout for
<article>elements.
- Enables smooth scrolling with
scroll-behavior: smooth. - Sets
scroll-margin-topfor<main>,<section>, and<article>elements for better navigation.
- Styles section headers with a bottom border.
- Styles table headers within
<tbody>with bold font weight andnowrap.
- Provides a generic
iconclass for SVG icons. - Adds specific icon classes for checkbox, minus, chevron, date, time, search, close, loading, valid, and invalid icons.
- Customizes
<fieldset>appearance with padding, border, and<legend>styles.
- Adds styled alert messages with info, success, warning, and danger variations, with custom colorations.
- Adds styled buttons with "info", "success," "warning," and "danger" states.
- Provides small inline badges for statuses and counts.
- Use any
<small>element withrole="status". - Variants:
.info,.success,.warning,.danger.
- Provides a
closeclass for styled close buttons.
- Styles the
<footer>with a flexible layout and list styles.
- Improves
<navbar>layout and adds a sticky header effect for larger screens with a blur effect. - Adds a divider to icon groups within the navbar.
TangoMan Pivot CSS provides accessible, flexible, and customizable tabbed navigation using ARIA roles and keyboard navigation support.
- Adds styling for theme toggle icons with animations.
- Provides a
#toast-containerfor displaying toast notifications with flexible positioning.
- Adds styles for
menubarandtoolbarroles with inline and accessible designs.
- Includes reusable animation classes:
.from-leftfor sliding in from the left..spinfor spinning elements..zoom-in-blurfor zoom and fade-out effect.
.animatefor inline-block animation context..remove-pseudo-elementsclass removes:beforeand:afterpseudo-elements from elements to avoid them messing with animation.
- Adds utility classes like
no-decorationfor removing text or list decorations. - Provides
flexandflex-rightclasses for easy layout. - Provides
ellipsisclass for text truncation with ellipsis. - Adds a
.dividerclass for visual separation in navigation and toolbars.
- Menubar and navbar adapt to screen size, with collapsible menu and sticky header on large screens.
#toast-containersupports flexible positioning: top-right, top-left, bottom-left, etc.
- Include pico.css: Ensure you have pico.css included in your project.
- Include TangoMan Pivot CSS: Add
pivot.cssto your project and include it after pico.css. - Include TangoMan Pivot JavaScript: Add
pivot.jsto your project and include it at the end of your file. - Use the provided classes: Apply the classes defined in
pivot.cssto your HTML elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Pico CSS Project</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="./css/pivot.css">
</head>
<body>
<main class="container">
<section>
<header>
<h2>Example Section</h2>
</header>
<article>
<header>
<h3>An article</h3>
</header>
<p>This article has scroll margin.</p>
<p>These items own a flex layout.</p>
<div class="flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<p>This is a list.</p>
<ul class="list--bare">
<li>Item without bullets</li>
<li>Another item</li>
</ul>
<div class="alert alert--success">
<header>Success!</header>
<p>This is a success alert.</p>
<footer>More information here.</footer>
<button class="close"></button>
</div>
</article>
</section>
</main>
<footer class="footer container">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>Copyright 2025</p>
</footer>
<script type="text/javascript" src="./js/pivot.js"></script>
</body>
</html>- Provides styles for Prism.js code highlighting, including dark/light theme support.
You can download pivot.css from the GitHub repository or include it via CDN.
To setup your development environment, follow these steps:
- Install Dependencies:
If you have yarn installed, run the following command in the project's root directory:
yarn installThis command installs all the necessary development dependencies.
- Run Development Scripts:
To start the development environment or build the CSS, use the following command:
yarn runThis command will execute the default script defined in the package.json file.
You can run specific scripts like so:
# watch source folder
yarn watch
# lint scss
yarn lint
# build css
yarn buildThank you for your interest in contributing to TangoMan Pivot CSS.
Please review the code of conduct and contribution guidelines before starting to work on any features.
If you want to open an issue, please check first if it was not reported already before creating a new one.
Copyrights (c) 2025 "Matthias Morin" <[email protected]>
If you like TangoMan Pivot CSS please star, follow or tweet:
... And check my other cool projects.
- picocss: Minimal CSS Framework for semantic HTML
- prismjs: Lightweight syntax highlighter
- cbracco: html5-test-page
Looking for an experienced Full-Stack Partner ?
Clean code. Clear communication.
From first sketch to final launch, I've got your back.
