Skip to content

Latest commit

 

History

History

web-punjab

README.md

Introduction

This design guide outlines the usage of colors and pre-defined CSS classes within the provided CSS file. The aim is to ensure consistency and ease of use for developers and designers working with this codebase.

Colors

The color palette defined in the CSS file consists of primary, secondary, accent, and text colors. These colors are carefully chosen to maintain harmony and readability throughout the design.

Primary Colors

  • First Color: #F8F9FA
  • Second Color: #4180EA
  • Third Color: #1BA261
  • Fourth Color: #ED564A

Neutral Colors

  • Body Color: #F1F3F4
  • Text Color: #000000
  • Text Color Light: #202020
  • Title Color: #808080
  • First Color Alt: #cfcfcf

Container Color

  • Container Color: #FBBC05

Typography

The typography is based on the Poppins font family with different font sizes and weights defined for various elements. The font sizes are responsive, adjusting to different screen sizes for optimal readability.

CSS Classes

Several pre-defined CSS classes are available for quick styling. These classes are designed to maintain consistency and streamline the development process.

Usage Guidelines

  • Colors
    • Primary Colors: Use primary colors for key elements such as headers, buttons, and important accents.
    • Neutral Colors: Utilize neutral colors for backgrounds, text, and other non-emphasized elements.
    • Text Color: Ensure good contrast and readability by using appropriate text colors against background colors.
  • Typography
    • Font Family: Maintain consistency by using the defined Poppins font family across the website.
    • Font Sizes: Choose font sizes based on the hierarchy and importance of the content. Larger font sizes for headings and smaller font sizes for body text.
  • CSS Classes
    • Container: Wrap content within a container class to limit the width and maintain readability.
    • Grid: Use the grid class for creating responsive layouts with consistent spacing between elements.
    • Section: Utilize section classes for structuring content blocks with appropriate padding and alignment.
    • Header: Implement the header class for fixed navigation bars with smooth transitions and customizable logo styles.
    • Navigation: Customize navigation menus with flexbox and adjust styles for responsiveness using media queries.

Responsive Design

The CSS file includes media queries for responsiveness across various devices. Ensure that designs adapt gracefully to different screen sizes by testing and adjusting layout and typography accordingly.