LayX
Download
Getting started
Introduction Installation Quick Start CLI
Core Concepts
Overview
Customize
Customize
Layout System
Breakpoints Container Component Layout Component
Main
Base Typography
Components
Accordion Alert Breadcrumb Button Card Carousel Chart Dialog Draggable Form Footer Media Navbar Pagination Popover Sheet Section Tab Tooltip Window
Helpers
Flex and Grid Layout
Utilities
Border Color Display Flex Grid Height Margin Opacity Padding Position Shadow Width Z-index
Others
Background Dynamic Render Icon PWA Partial Render Scroll Driven Animation Smooth Scroll Syntax Highlighter Theme View Transition
About
Contributing License
Core Concepts

Layx is a modern CSS framework built to streamline web development with a modular, flexible, and customizable system. Its core principles include:

  • Modular Architecture: Each component and utility functions independently, providing flexibility and ease of maintenance.
  • Customization: Layx is highly customizable to meet various design requirements, allowing control over layouts, components, and styling.
  • Responsive Design: Built-in breakpoints ensure optimal display across devices.
Project Structure

Layx follows a structured directory layout for organized development:

layx_project ├───assets/ ├───layx/ │ │ layx.css │ │ layx.js │ ├───assets/ │ ├───components/ │ ├───helpers/ │ ├───main/ │ ├───others/ │ └───utilities/ ├───pages/ └───index.html

Key Directories:

  • layx/: The framework's core files, including components, main styles, and utilities.
  • layx/layx.[css|js]: Imports modular CSS and JS files, bundled during the build process.
  • config/: Configuration files, tools, and preferences for Layx setup.
  • assets/: Contains all assets like CSS, JS, images, and media files.
  • assets/[css|js]/base.[css|js]: Common base CSS/JS files, added after Layx core CSS/JS in the build process, with originals moved to layx/assets/[css|js]/user_base.[css|js].
  • assets/[css|js]/pages/: For page-specific CSS/JS, minified, with originals moved to layx/assets/[css|js]/pages/.
Important Files

In layx, the key files are layx.css and layx.js. Examples:

layx.css:

/* Main */ @import url(main/base/variable.css); @import url(main/base/scrollbar.css); @import url(main/base/base.css); @import url(main/typography/typography.css); /* Core components */ @import url(main/container/container.css); @import url(main/layout/layout.css); /* Helpers */ @import url(helpers/layout/layout_helper.css); /* Components */ @import url(components/button/button.css); @import url(components/navbar/navbar.css); @import url(components/section/section.css); @import url(components/footer/footer.css); /* Utilities */ @import url(utilities/color/color.css); /* Others */ @import url(others/icon/icon.css); @import url(others/theme/theme.css); @import url(others/view_transition/mpa_view_transition/page_transition/page_transition.css); @import url(others/syntax_highlighter/syntax_highlighter.css);

layx.js:

/* Theme */ import Theme from "./others/theme/theme.js"; /* Components */ import Navbar from "./components/navbar/navbar.js"; import { Sheet } from "./components/sheet/sheet.js"; /* Other */ import SmoothScroll from "./others/smooth_scroll/smooth_scroll.js";

See Installation guide.