This framework provides a collection of reusable components and styles to help you build responsive and flexible web layouts effortlessly.
A utility component for clearing floats and ensuring proper layout.
<ClearFix />A flexible container component with optional styles and class names.
<Container>{/* Your content goes here */}</Container>A flexible container for creating flex layouts.
<FlexContainer>{/* Flex items go here */}</FlexContainer>A flexible container for creating flex layouts.
<FlexItem>{/* Your content goes here */}</FlexItem>A responsive div component with visibility and hidden classes based on different screen sizes.
<DivV visibleIn="md" hiddenIn="lg">
{/* Your content goes here */}
</DivV>A responsive image component that scales with the width of its container.
<RespImg src="your-image-url" alt="Image Alt Text" />A responsive video component similar to RespImg.
<RespVideo src="your-video-url" />A responsive grid component with a specified column size and optional gap between items.
<RespGridFill size={100} gap={20}>
{/* Grid items go here */}
</RespGridFill>Similar to RespGridFill, but with auto-fitting columns.
<RespGridFit size={100} gap={20}>
{/* Grid items go here */}
</RespGridFit>An unordered list component with no list styles.
<UnstyledList>{/* List items go here */}</UnstyledList>A styled ul component for navigation items.
<NavUl>{/* Navigation items go here */}</NavUl>A responsive heading component with different font sizes based on the heading level.
<RespHeading element="h2">{/* Your heading text goes here */}</RespHeading>A circular container component.
<Circle>{/* Your content goes here */}</Circle>A responsive background image component for specified HTML elements.
<RespBackgImg element="div" url="path/*">
{/* Your content goes here */}
</RespBackgImg>A responsive background image component for specified HTML elements.
import {
styles,
mergeStyles,
styleHover,
styleActive,
mergeRefs,
} from "fhf-react";
const Comp = () => {
const { refLightHover, styleLightHover } = styles.bgLightHover();
const { refOfActive, styleOfActive } = styleActive(
styles.extremeRounded,
styles.bg("green")
);
return (
<div
ref={mergeRefs(refLightHover, refOfActive)}
style={mergeStyles(
styles.centerPosition,
styles.fitContentHW,
styleLightHover,
styleOfActive
)}
>
{/* Your centered content goes here */}
</div>
);
};
export default Comp;Feel free to explore and use these components and styles to create modern and responsive user interfaces in your React projects.
Happy coding!