Layx is a powerful and extensible CSS framework designed specifically for creating modern landing pages. It combines advanced layout capabilities with high customizability, making it ideal for building high-converting, responsive landing pages with minimal effort. With its modular architecture and landing-page-focused components, Layx helps you create stunning, fast-loading pages that deliver results.
Main Point: "Build stunning landing pages faster. No bloat, no runtime overhead—just pure performance."
- 🚫 Zero Runtime - No JavaScript dependencies required
- 📦 Landing Page Ready - Pre-built components optimized for conversions
- 🎨 Highly Customizable - Easy theming with CSS variables
- ⚡ Lightning Fast - Optimized for performance and SEO
- 📱 Mobile-First - Fully responsive designs that look perfect on all devices
Note: Layx is currently in the development stage and available for testing. We welcome your feedback and contributions!
- 📦 Landing Page Components: Pre-designed, conversion-focused components like hero sections, CTAs, testimonials, and pricing tables.
- 🎨 Rapid Development: Build complete landing pages in minutes, not days.
- 📱 Fully Responsive: Mobile-optimized layouts that adapt perfectly to any screen size.
- ⚡ Performance Optimized: Lightweight CSS and zero runtime overhead for blazing-fast load times.
- 🔧 Built-in Sections: Hero, features, pricing, testimonials, FAQ, footer—everything you need.
- 🛠️ Build Tool: Bundle your project and remove unused code for optimal file size.
- 🖼️ Image Optimization: Boost performance with the integrated image optimizer.
- 💻 Command-Line Interface (CLI): Efficiently manage your landing page projects with our intuitive CLI.
- 🚀 SEO Ready: Semantic HTML and optimized structure for search engines.
- 🌐 File-Based Routing: File-based routing supported in Apache and similar servers like LightSpeed (common in Cpanel hosting).
Layx is purpose-built for landing pages with a focus on conversion and performance:
- Landing Page Optimized: Purpose-built components designed for high-conversion landing pages, not general web apps.
- Performance First: Leverages modern CSS without JavaScript runtime, ensuring lightning-fast load times.
- Conversion Focused: Pre-designed sections and patterns that follow landing page best practices.
- Full-Width Designs: Layout and container elements that extend to screen edges for modern aesthetics.
- Zero Bloat: Only what you need—no unnecessary features or code.
- SEO Friendly: Built with semantic HTML and structured data in mind.
With Layx, you don't build from zero:
- Pre-Built Starting Point: Every project comes with a ready-to-use structure, components, and best practices already in place.
- Automated Optimizations: The built-in build tool automatically minifies CSS/JS, optimizes images, and removes unused code—no manual setup needed.
- Repetitive Tasks Handled: Stop writing boilerplate code. Layx handles responsive design, cross-browser compatibility, and SEO optimization out of the box.
- Convention Over Configuration: Follow proven patterns and conventions, allowing you to focus on your unique content and design tweaks, not infrastructure.
- Ready for Production: Deploy with confidence—your landing page is already optimized for performance, accessibility, and conversions.
Layx introduces intuitive syntax for common landing page elements:
<container>
<div class='content'></div>
</container><layout>
<div class='x-6'></div>
<div class='x-6'></div>
</layout><navbar>
<nav class='link-wrapper'>
<a class='link' href='#'>link</a>
<a class='link' href='#'>link</a>
</nav>
</navbar>Layx is organized into a well-structured directory hierarchy:
Click to expand project structure
root
│ index.html
│
│
├───assets
│ ├───brand
│ ├───css
│ ├───font
│ ├───images
│ ├───js
│ └───media
│
├───layx
│ │ layx.css
│ │ layx.js
│ │
│ ├───assets
│ │ ├───css
│ │ └───js
│ │
│ ├───components
│ ├───main
│ ├───others
│ └───utilities
│
└───pages
Key directories:
layx/: The core of the framework, including components, main styles, and utilities.assets/: Here you can put your all assets like CSS, JS, images, and media files.assets/[css|js]/base.[css|js]: Here you can write your base CSS and JS which are common, it will be added afterlayxCSS or JS in build time. This original CSS or JS file will be moved insidelayx/assets/[css|js]/user_base.[css|js].assets/[css|js]/pages/: For page-specific content. Inside this dir all CSS and JS file will be minified and original one moved tolayx/assets/[css|js]/pages/.
To install Layx on your system:
-
Download the Layx setup file from our download page.
-
Extract the contents of the ZIP file.
-
Open a terminal or command prompt and navigate to the extracted directory.
-
Run the following command or click
layx.bat:layx install
Note: On Linux and macOS, before installation, you need to run
chmod +x ./layx.shto make it executable. Once installed, all commands remain the same.
-
Create a New Landing Page: Open your terminal, navigate to your desired folder, and run:
layx create
-
Start Building: Dive into your new project and begin designing your landing page!
-
Build Your Project: When you're ready to deploy, run:
layx build
-
Modify Your Project After Build: Need to make changes? Use the
unbuildcommand:layx unbuild
-
Add Components, Templates, or Fonts: Easily extend your project with the
addcommand:# Add a component layx add -c <component-name> # Add a template layx add -t <template-name> # Add a font layx add -f <font-name>
-
Optimize Images: Compress and optimize your images for better performance:
layx optimizeImages
For comprehensive guides and API references, visit our official documentation.
We welcome contributions of all kinds! To get started, please read our Contributing Guide.
Layx is open source software licensed as MIT.
⭐ If you find Layx helpful, consider giving it a star on GitHub!