This is a CSS framework called 'fhf, which was created by Mahdi Amari. It sets a number of CSS rules that correct browser inconsistencies and ensure consistent rendering across different browsers. The rules are organized by sections of the HTML document,
FHF is a lightweight, flexible, and modern CSS framework designed to help developers build responsive and aesthetically pleasing web interfaces quickly and easily. It provides a comprehensive set of tools, utilities, and components to streamline the development process with minimal overhead.
npm install fhf
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fhf/dist/main.min.css"
/>
git clone https://github.com/80mahd08/FHF-framework.git
cd fhf
npm install
npm run build
After installation, import FHF in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="node_modules/fhf/dist/fhf.min.css" />
<title>FHF Example</title>
</head>
<body>
<div class="container">
<h1 class="resp-h1 text-center pb-11">Welcome to FHF</h1>
<p class="resp-p pb-15">
Build beautiful, responsive websites with our comprehensive CSS
framework.
</p>
</div>
</body>
</html>
prefers-color-scheme media queryscss/
├── main.scss # Main entry file
├── tools/
│ ├── _variables.scss # SCSS variables
│ ├── _functions.scss # SCSS functions
│ ├── _mixins.scss # Reusable mixins
│ └── _media_query.scss # Media query utilities
├── base/
│ ├── _reset.scss # Normalize.css v8.0.1
│ ├── _base.scss # Global defaults
│ └── _typography.scss # Typography utilities
├── layout/
│ ├── _container.scss # Container system
│ ├── _grid.scss # CSS Grid utilities
│ ├── _flexbox.scss # Flexbox utilities
│ ├── _positioning.scss # Position utilities
│ └── _borders.scss # Border utilities
└── utilities/
├── _display.scss # Display utilities
├── _sizing.scss # Width/height utilities
├── _visibility.scss # Visibility & effects
├── _spacing.scss # Margins & padding
├── _shadow.scss # Shadow utilities
├── _object-fit.scss # Image/video utilities
└── _colors.scss # Color utilities
xs: 0px // Mobile portrait (default)
sm: 576px // Mobile landscape
md: 768px // Tablets
lg: 992px // Small desktops
xl: 1200px // Medium desktops
xxl: 1400px // Large desktops
<!-- Container with responsive padding -->
<div class="container">
<div class="d-grid grid-cols-3 gap-4">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
</div>
<!-- Responsive layout -->
<div class="d-flex flex-column md:flex-row justify-between items-center gap-4">
<div class="flex-1">Left</div>
<div class="flex-2">Center</div>
<div class="flex-1">Right</div>
</div>
<h1 class="resp-h1 fw-bold text-center">Responsive Heading</h1>
<p class="resp-p leading-relaxed">
Responsive paragraph with comfortable line height
</p>
<!-- Square element -->
<div class="square-20 bg-blue-500"></div>
<!-- Responsive sizing -->
<div class="w-full md:w-1/2 lg:w-1/3 h-64 object-cover"></div>
<!-- Fade animation -->
<div class="fade-in">Fades in on load</div>
<!-- Responsive visibility -->
<div class="hidden md:block">Hidden on mobile, visible on tablet+</div>
<!-- Text truncation -->
<p class="line-clamp-3">Text clipped to 3 lines</p>
<!-- Backdrop blur -->
<div class="backdrop-blur">Blurred background</div>
<!-- Image filters -->
<img src="image.jpg" class="brightness-75 contrast-125 hover:brightness-100" />
<!-- Drop shadow -->
<div class="drop-shadow-lg">Content with shadow</div>
For complete documentation, including all utility classes, components, and examples, visit:
Create a custom SCSS file and override FHF variables:
// my-custom-theme.scss
$primary-color: #007bff;
$secondary-color: #6c757d;
$border-radius: 0.5rem;
@import "node_modules/fhf/scss/main.scss";
// Add custom utilities
.my-custom-class {
// Your custom styles
}
FHF is designed to be minimal and performant:
We welcome contributions! Please see our contributing guidelines for more information.
FHF is licensed under the MIT License. See LICENSE file for details.
Build faster. Build better. Build with FHF.
FAQs
This is a CSS framework called 'fhf, which was created by Mahdi Amari. It sets a number of CSS rules that correct browser inconsistencies and ensure consistent rendering across different browsers. The rules are organized by sections of the HTML document,
We found that fhf 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
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.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.