Get started wtih Gap CSS

GapCSS is a minimal pure CSS framework which is fully responsive.
GapCSS is a mobile first CSS framework with unique 8 boxes layout.
GapCSS does not contain JavaScript code, which makes it blazingly fast.
GapCSS has the built-in dark mode, and it is extremely easy to set up.
GapCSS is compatible with all the modern browsers as well as the old browsers.

1. Introduction

The Gap CSS framework is a lightweight fully responsive framework designed to provide a simple and flexible set of classes for building responsive web pages. It includes grid system for creating layouts, navbar for responsive menu, card class for creating elegant cards, popup classes for different size modals and utility classes for common styling tasks as well as the dark mode.

To use the Gap CSS framework, include the following CDN in your HTML document or alternatively download the Gap CSS file with the download button below.

HTML Code

CODE Copied


<link rel="stylesheet" href="cdn.jsdelivr.net/gh/tayabraza/gapcss/main.css">

Download

2. Menu and Navbar

By using GAP CSS you can easily create a responsive navigation bar with dropdown menus with the ability to extend or collapse according to the screen size in pure CSS without the JavaScript.

.menu class is used to style a menu component. It sets the position, background color, and padding for the menu.

.menu-tablet or .menu-t class is used to style a menu component for tablet devices.

.menu-desktop or .menu-d class is used to style a menu component for desktop and large screen devices.

.hamburger class is used to create a pure CSS hamburger toggle menu.

.navbar class is used to style a navigation bar.

.dropdown class is used to style a dropdown menu. It sets the position and adds visual indicators for the dropdown menu.

HTML Code

CODE Copied

<div class="menu">
  <label class="hamburger" for="navbar-toggle"></label>
  <input type="checkbox" id="navbar-toggle">
  <nav class="navbar">
    <ul>
      <li class="active">
        <a href="#home"> Home </a> 
      </li>
      <li>
        <a href="#about"> About </a> 
      </li>
      <li class="dropdown" aria-label="dropdown-menu">
        <a href="#services"> Services </a>
        <ul>
          <li>
            <a href="#">Design</a>
          </li>
          <li>
            <a href="#">Devlopment</a>
          </li>
          <li>
            <a href="#">Deployment</a>
          </li>
        </ul>   
      </li>
      <li>
        <a href="#contact"> Contact </a> 
      </li>
    </ul>
  </nav>
</div>

HTML Output

3. Grid system

In Gap CSS, the grid system works similar to the Bootstrap. However, Gap CSS is based on 8 box layout instead of 12 columns in Bootstrap. The .linear class works like the .row class in Bootstrap, and the .box class works like the .col class.

The box classes have different variations. The class .box-1 through .box-8 specifies the width of the columns. For instance, .box-1 makes the column take up 100% width, .box-2 makes it 50%, .box-3 makes it 33.33%, and so on. These widths are in relation to the parent container. The .box-1 to .box-8 are the grid columns, used with in the .linear class.

Similar to Bootstrap GapCSS has container classes as well i.e. .box can be used as a fixed container and .box-full is an alternate to Bootstrap's .container-fluid

.box class serves as a container. It sets the maximum width to 1200px and centers the container horizontally.

.box-full class defines a container with the full width.

.linear class is used to create a horizontal layout to contain the columns classes.

.box-1 class represents a grid column that occupies the 100% width of the container.

.box-2 class represents grid column that occupies 50% of the container's width.

.box-3, .box-4 and .box-5 classes represent grid columns that occupy 33.33%, 25% and 20% of the container's width.

.box-6, .box-7 and .box-8 classes have width 16.66%, 14.28% and 12.50% of the container's width.

.box-skip-1 to .box-skip-8 classes are used to create empty spaces equivalent to the width of columns.

For responsiveness, use .box-t-1 or .box-tablet-1 to .box-t-8 or .box-tablet-8 for Tablets and .box-d-1 or .box-desktop-1 to .box-d-8 or .box-desktop-8 for Desktop screens. These classes are used when the screen size is greater than 600px and 900px.

Also, if you would like to create empty spaces for tablets and desktop screens then you can use .box-t-skip-1 or .box-skip-tablet-1 to .box-t-skip-8 or .box-tablet-skip-8 for Tablets and .box-d-skip-1 or .box-desktop-skip-1 to .box-d-skip-8 or .box-desktop-skip-8 for Desktop screens.

HTML Code

CODE Copied

<div class="box">

  <div class="linear">
    <div class="box-1 box-t-2">Box 1</div>
    <div class="box-1 box-t-2">Box 2</div>
  </div>

  <div class="linear">
    <div class="box-1 box-d-3">Box 1</div>
    <div class="box-1 box-d-3">Box 2</div>
    <div class="box-1 box-d-3">Box 3</div>
  </div>

</div>

HTML Output

Box 1

Box 2

Box 1

Box 2

Box 3

4. Cards

.card class is used to style a card component. It sets the width, height, border-radius, and box shadow for the card.

.card-landscape class is used to style a landscape-oriented card component. It modifies the width and height properties to create a landscape layout.

HTML Code

CODE Copied


<div class="card">

</div>

HTML Output

5. Popups

.popup class is used to style a popup component for mobile screens. It sets the display, position, width, padding, background color, border, and border-radius for the popup.

.popup-tablet or .popup-t class is used to style a popup component specifically for tablet devices. When the screen size is greater than 600px it provides specific styling for tablet screens.

.popup-desktop or .popup-d class is used to style a popup component specifically for desktop devices. When the screen size is greater than 900px it provides specific styling for desktop screens.

HTML Code

CODE Copied


<a href="#mypopup" class="btn no-decoration"</a>

</a>

<div id="mypopup" class="popup"</div>
  <a href="#" class="close no-decoration">×</a>
  <p>popup text</p>
</div>

HTML Output

popup

6. Inputs

.input-linear class will have the input fields display inline. This is useful for creating a horizontal form.

.input-block class will have the input field take up the full width of its parent container.

HTML Code

CODE Copied


<input class="input-linear" type="text" placeholder="Linear Input">

<input class="input-block" type="text" placeholder="Block Input">

HTML Output

7. Buttons

.btn class makes the button inline with other elements.

.btn-block class makes the button to take up the full width of its parent container.

HTML Code

CODE Copied


<button class="btn">Inline Block Button</button>

<button class="btn-block">Block Button</button>

HTML Output

8. Utilities

.center-box class is used to horizontally center a block-level element.

.center-btn class is used to horizontally center a button element.

.center-img class is used to horizontally center an image element.

.left-float class is used to align an element to the left.

.center-float class is used to align an element to the center.

.right-float class is used to align an element to the right.

.left-text class is used to align text to the left.

.center-text class is used to align text to the center.

.right-text class is used to align text to the right.

HTML Code

CODE Copied


<div class="center-box">
  
</div>

<button class="btn center-btn">Centered Button</button>

<img src="image.jpeg" alt="Centered Image" class="center-img">

<div class="left-float">
  
</div>

<div class="center-float">
  
</div>

<div class="right-float">
  
</div>

<p class="left-text">Left-aligned text</p>

<p class="center-text">Center-aligned text</p>

<p class="right-text">Right-aligned text</p>

HTML Output

Left-aligned text

Center-aligned text

Right-aligned text

9. Breakpoints

Gap CSS has two breakpoints, which are used to create responsive design. If the screen size is greater than 600px it provides styling for tablet screens and if the screen size is greater than 900px then it provides styling for desktop screens.

Breakpoints are used to create responsive design by allowing you to specify different layouts for different screen sizes.

HTML Code

CODE Copied


@media screen and (min-width: 600px) {

}

@media screen and (min-width: 900px) {

}

10. Dark Mode

To enable the dark mode you just need to add .dark class to the body tag.

.dark class is used to set the background color and text color for the entire web page including the menu and the navigation bar.

HTML Code

CODE Copied

<body class="dark">
  <div class="box">
    <div class="menu">
      <label class="hamburger" for="navbar-toggle"></label>
      <input type="checkbox" id="navbar-toggle">
      <nav class="navbar">
        <ul>
          <li class="active">
            <a href="#home"> Home </a> 
          </li>
          <li>
            <a href="#about"> About </a> 
          </li>
          <li>
            <a href="#contact"> Contact </a> 
          </li>
        </ul>
      </nav>
    </div>
  </div>
</body>