Global CSS Documentation by pushabl.com

This global.css file provides foundational styles for a web application, including typography, layout structures (like flexbox and grid), form elements, navigation, buttons, and responsive adjustments. The design is minimal, with reusable utility classes for managing spacing, positioning, and other layout properties.

Table of Contents

• General Styles
• Typography
• Links and Buttons
• Forms
• Layout: Flexbox and Grid
• Colors
• Padding, Margin, and Spacing
• Positioning
• Custom Components
• Mobile Responsiveness
• Specific Page Elements

General Styles

The general styles set up basic design patterns used throughout the web application.

:root {
  --bg-color: #000; /* Black background color */
}
* {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
}
.user_select_none {
  user-select: none;
}

Typography

This section defines typography, including font sizes, weights, and line heights.

body {
  font-family: "Open Sans", sans-serif;
}
h1 {
  font-size: 58px;
  font-weight: 800;
}
h2 {
  font-size: 42px;
  font-weight: 800;
}
h3 {
  font-size: 24px;
  font-weight: 800;
}
/* Paragraph */
p {
  font-size: 18px;
  line-height: 30px;
}

Links and Buttons

These classes style links and buttons, providing options for default, hover states, and custom buttons.

a:not(.btn) a:not(nav a) {
  color: #1456ff;
}
.text_decoration_none {
  text-decoration: none;
}
.btn, button, [type=submit] {
  padding: 14px 24px;
  font-weight: 700;
  cursor: pointer;
}
.cta {
  background: var(--bg-color);
  color: #fff;
}
.cta:hover {
  background: #000;
  color: #fff;
}

Forms

This section covers input fields, textareas, and label styles for forms.

input, textarea {
  border: 2px solid #000;
  padding: 17px;
  border-radius: 8px;
  width: 100%;
  font-family: "Open Sans", sans-serif;
}
label {
  font-weight: 600;
  margin: 12px 0 10px;
}
form {
  width: 100%;
}

Layout: Flexbox and Grid

These classes manage layout structure, including flexbox and grid-based designs.

.flex {
  display: flex;
}
.flex_direction_column {
  flex-direction: column;
}
.grid {
  display: grid;
}
.grid_template_columns_minmax_270px {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

Colors

These classes provide custom colors for text and backgrounds.

.color_med_gray {
  color: #777;
}
.background_fff {
  background: #fff;
}
.background_blue {
  background: #222d49;
}

Padding, Margin, and Spacing

This section offers utility classes to manage padding, margins, and gaps between elements.

.padding_0 {
  padding: 0;
}
.padding_25px {
  padding: 25px;
}
.margin_0 {
  margin: 0;
}
.gap_10px {
  gap: 10px;
}

Positioning

These classes provide positioning styles, including fixed, relative, and absolute positioning.

.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

Custom Components

This section describes specific components like the mobile menu and accordion functionality.

.accordion {
  border: 2px solid #000;
  cursor: pointer;
  padding: 20px;
  border-radius: 18px;
}
.accordion-header:after {
  content: '';
  background: url('icon.png');
}

Mobile Responsiveness

This file includes responsive design adjustments for mobile screens. Styles inside media queries ensure the layout adapts to smaller devices.

@media(max-width: 900px) {
  .flex_0_50 {
    flex: 0 0 100%;
  }
  .mobile_flex_column {
    flex-direction: column;
  }
}

Specific Page Elements

This section contains styles for page-specific elements such as the homepage hero, reviews, and breadcrumbs.

.breadcrumbs a {
  font-weight: bold;
  color: #000;
  text-decoration: none;
}
.homepage_hero {
  background: #fff;
  min-height: 500px;
}