SyntaX_for_CSS is a lightweight, parameterized CSS utility library designed to bring modern UI standards and consistent naming conventions to web development.
Are you tired of writing complex Flexbox, Glassmorphism, and Glow effects from scratch for every project? SyntaX provides a set of pre-configured "Power Classes" that allow you to build futuristic, high-performance interfaces in seconds. It is the styling backbone of the SyntaX Ecosystem.
- Standardized Naming: All classes start with the
bs-(BetterSyntax) prefix to avoid style collisions. - Dynamic Customization: Powered by CSS Variables (
:root), allowing you to change your entire theme in one line. - Modern Visuals: Built-in support for Glassmorphism, Neon Glows, and Smooth Transitions.
- Performance First: Zero dependencies, zero JavaScript required for core styling. Pure CSS execution power.
- Responsive by Default: Includes smart grid systems that adapt to any screen size.
To keep your project clean, we provide a dedicated stylesheet for practical implementations. You can find comprehensive examples covering:
- The Ultimate Center: Perfect centering using
bs-center. - Glassmorphism: Elegant frosted-glass panels with
bs-glass-panel. - Neon Aesthetics: Professional glow effects using
bs-glow. - Interactive UI: Smooth scaling and hover states with
bs-hover-scale.
👉 Check out samples.css for ready-to-use UI components!
- Download the bettersyntax.css file from this repository.
- Place it in your project's CSS or assets directory.
- Link it in the
<head>of your HTML file using the standard link tag. - Start using the bs- classes in your HTML elements to see the "Power" in action!
The library is designed to be fully adjustable. You can override the default parameters such as colors, blur intensity, and border radius by redefining the CSS variables in your own stylesheet. This allows for a completely custom look while maintaining the SyntaX structure.
| UI Feature | Standard CSS | SyntaX for CSS (bs-style) |
|---|---|---|
| Centering | Manual Flex/Grid Setup | class="bs-center" |
| Glass Effect | Multiple Filter/BG Layers | class="bs-glass-panel" |
| Neon Glow | Complex Text-Shadows | class="bs-glow" |
| Modern Grid | Manual Column Math | class="bs-grid-auto" |
| Background | Manual Color Codes | class="bs-bg-core" |
| Interaction | Manual Transition/Hover | class="bs-hover-scale" |
hypernova-developer