https://github.com/appzic/layout-css-modules
Layout made easy with CSS modules grid system inspired by Bootstrap
https://github.com/appzic/layout-css-modules
12-column bootstrap-grid-system css-layout css-module css-modules flexbox-grid flexbox-layout mobile-first responsive-layout responsive-web-design
Last synced: 10 months ago
JSON representation
Layout made easy with CSS modules grid system inspired by Bootstrap
- Host: GitHub
- URL: https://github.com/appzic/layout-css-modules
- Owner: appzic
- License: mit
- Created: 2023-04-08T04:44:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-14T04:02:16.000Z (over 1 year ago)
- Last Synced: 2025-01-29T20:49:18.232Z (11 months ago)
- Topics: 12-column, bootstrap-grid-system, css-layout, css-module, css-modules, flexbox-grid, flexbox-layout, mobile-first, responsive-layout, responsive-web-design
- Language: CSS
- Homepage: https://appzic.com/open-source-projects/layout-css-modules
- Size: 286 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
Layout CSS Modules
Layout made easy with CSS modules grid system inspired by Bootstrap.
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Introduction](#introduction)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
## Introduction
Layout CSS Modules is a mobile-first, twelve column system based on a flexbox layout, that takes advantage of CSS modules for simpler styling and maintenance, allowing you to easily create responsive layouts for your web applications inspired by Bootstrap.
## Features
- Mobile-first design approach
- Based on a flexbox layout
- Twelve-column grid system
- Uses CSS modules for simpler styling and maintenance
- TypeScript support for type checking and improved development experience
- Encapsulation of CSS rules and styles to prevent conflicts
- Reusable styles across components for consistent designs
- Reduced duplicate code in your application
- Improved performance through unique class names generated at build time.
## Installation
You can install Layout CSS Modules using npm:
```bash
npm install layout-css-modules
```
## Usage
```astro
---
import { container, row, col12, colXL4 } from "layout-css-modules/index.module.css";
---
Column
Column
Column
```
## Contributing
We welcome contributions from the community! Please take a look at our [CONTRIBUTING.md](https://github.com/appzic/layout-css-modules/blob/main/CONTRIBUTING.md) file for more information on how to get started. We appreciate all kinds of contributions, from bug reports and feature requests to code contributions and documentation improvements. Thank you for considering contributing to our project!
## License
Layout CSS Modules is licensed under the [MIT](https://github.com/appzic/layout-css-modules/blob/main/LICENSE) License.