Close Menu

layoutless


Introduction

Layoutless is a lightweight CSS framework for building responsive and flexible web layouts. It provides a set of classes and utilities to help developers create responsive designs without getting into the complexities of grid systems.

Features:

  • Easy to use and understand
  • Responsive design without a grid system
  • Fluid and flexible layouts
  • Mobile-first approach
  • Built-in classes for common layout patterns
  • Support for modern browsers

Getting Started

Installation

To start using Layoutless, you have a few options:

  1. Download the latest release from the Layoutless GitHub repository.
  2. Install via npm: npm install layoutless.
  3. Include the following CDN link in your HTML file:
    <link rel="stylesheet" href="https://cdn.example.com/layoutless.min.css">

Usage

Once you have included Layoutless in your project, you can start using its classes to create responsive layouts.

For example, to create a two-column layout where the first column occupies 30% of the width, and the second column takes the remaining space, you can use the following HTML:

<div class="layoutless-row">
  <div class="layoutless-col-30">First column</div>
  <div class="layoutless-col">Second column</div>
</div>

This will automatically adjust the width of the columns based on the screen size, providing a responsive layout.

Classes and Components

Layoutless provides a set of classes and components to help you build your layout. Here are a few key ones:

layoutless-container

The layoutless-container class is the outer container for your layout. It centers the content horizontally and sets a maximum width.

layoutless-row

The layoutless-row class is used to create a row of columns. It clears any floats and allows columns to align horizontally.

layoutless-col

The layoutless-col class represents a column in a row. It automatically adjusts its width based on the number of columns in the row.

layoutless-col-*

The layoutless-col-* class allows you to define the width of a column in percentages. For example, layoutless-col-50 will make the column span 50% of the width of its parent container.

layoutless-hidden

The layoutless-hidden class is used to hide elements on specific screen sizes. For example, layoutless-hidden-md will hide the element on medium-sized screens.

layoutless-visible

The layoutless-visible class is used to make elements visible on specific screen sizes. For example, layoutless-visible-lg will only display the element on large screens.

layoutless-offset

The layoutless-offset class allows you to shift columns horizontally. For example, layoutless-offset-20 will move the column 20% to the right.

layoutless-center

The layoutless-center class can be used to horizontally center elements within a column.

Browser Support

Layoutless is designed to work well with modern browsers such as Chrome, Firefox, Safari, and Edge. It may not provide full support for older browsers like Internet Explorer.

Conclusion

Layoutless is a lightweight and easy-to-use CSS framework that allows developers to create responsive and flexible web layouts. With its set of classes and utilities, you can quickly build responsive designs without the complexities of a grid system. Start using Layoutless today and enjoy the freedom of designing responsive layouts with ease!