A collection of reusable CSS utility classes for common UI components and layouts with intelligent font fallbacks
A modern, reusable CSS utility library for building responsive UI components, with a powerful font management system and e-commerce-ready typography.
Bob Styles provides a complete toolkit for developers, featuring a utility-first workflow, pre-built components, and an intelligent font system to streamline your design process and ensure consistency.
Install the package in your project directory:
npm install bob-styles
or via CDN:
<link rel="stylesheet" href="path/to/bob-styles/dist/index.css" />
<script src="path/to/bob-styles/dist/js/font-detection.js"></script>
@import "bob-styles/src/index.scss";
For quick demos or prototyping, you can use the compiled files directly.
<link rel="stylesheet" href="https://unpkg.com/bob-styles/dist/index.css" />
<script src="https://unpkg.com/bob-styles/dist/js/font-detection.js"></script>
Here is a basic example of a responsive header using bob-styles utility classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bob Styles Demo</title>
<link rel="stylesheet" href="dist/index.css">
<script src="dist/js/font-detection.js"></script>
</head>
<body>
<nav class="flex justify-between items-center p-4 shadow-md">
<div class="font-bold text-xl ui-primary-font">MyLogo</div>
<ul class="flex gap-4">
<li><a href="#" class="ui-secondary-font">Home</a></li>
<li><a href="#" class="ui-secondary-font">About</a></li>
<li><a href="#" class="ui-secondary-font">Contact</a></li>
</ul>
</nav>
<main class="p-6">
<h1 class="text-3xl font-bold blog-primary-font">Welcome to Bob Styles</h1>
<p class="mt-2 text-lg blog-secondary-font">
This is a demo of the powerful features available in the library.
</p>
</main>
</body>
</html>
For a deep dive into the library's features, please refer to our comprehensive documentation in the Project Wiki.
If you want to customize the library or contribute, you can build it from the source files.
Install dependencies:
npm install
Run the build process:
npm run build
This will compile all .scss files into dist/index.css and copy JavaScript files to dist/js.
Watch for changes (development):
npm run dev
Contributions are welcome! Please feel free to submit a pull request or open an issue.
This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
A collection of reusable CSS utility classes for common UI components and layouts with intelligent font fallbacks
We found that bob-styles demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.