A developer-friendly CSS framework for modern web development
Helix CSS is an intuitive CSS framework designed to streamline web development with simple, easy-to-use utilities for building modern web projects. With a focus on developer experience, responsive design, and simplicity, Helix CSS offers a comprehensive set of classes that make creating adaptive and visually appealing layouts effortless and enjoyable.
- Developer-friendly: Simple and intuitive class naming convention that accelerates development
- Modular: Choose only the modules you need for your project, or use the complete framework for a comprehensive solution.
- Easy to use: Straightforward utilities that require minimal learning curve
- Responsive: Built-in responsive grid system for creating flexible and adaptive layouts across various devices and screen sizes.
- Customizable: Easily customize and extend Helix CSS to suit your project's specific requirements.
- Efficient: Optimized for performance while maintaining comprehensive functionality
You can also install the Helix CSS library via NPM:
npm i helix-cssOr you can embed the CDN code in your file:
HTML
<!-- Compressed -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/Helixify/Helix CSS@latest/dist/main.min.css" />
<!-- Expanded -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/Helixify/Helix CSS@latest/dist/main.css" />CSS
/* Compressed */
@import url('https://cdn.jsdelivr.net/gh/Helixify/Helix CSS@latest/dist/main.min.css');
/* Expanded */
@import url('https://cdn.jsdelivr.net/gh/Helixify/Helix CSS@latest/dist/main.css');Modules
You can also install the separate modules in your project
// Compressed
https://cdn.jsdelivr.net/gh/Helixify/Helix CSS@latest/dist/module/layout.css
// Expanded
https://cdn.jsdelivr.net/gh/Helixify/Helix CSS@latest/dist/module/layout.min.cssHere’s a basic example of using Helix CSS:
HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Helix CSS Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Helixify/Helix CSS@latest/dist/main.min.css" />
</head>
<body>
<section class="p-block-16">
<div class="ds-flex-center">
<h1 class="text-center">Hello World</h1>
<p class="text-muted">Welcome to Helix CSS!</p>
</div>
</section>
</body>
</html>React Example
import 'helix-css';
export const App = () => {
return (
<section className="p-block-16">
<div className="ds-flex-center">
<h1 className="text-center">Hello World</h1>
<p className="text-muted">Welcome to Helix CSS!</p>
</div>
</section>
);
};Vue Example
<template>
<section class="p-block-16">
<div class="ds-flex-center">
<h1 class="text-center">Hello World</h1>
<p class="text-muted">Welcome to Helix CSS!</p>
</div>
</section>
</template>
<script>
import 'helix-css';
export default {
name: 'App'
};
</script>Helix CSS is released under the MIT License. You are free to use and modify it for your projects.