CSS Generators

A collection of modern, interactive tools to help you generate CSS code for common layout patterns and components. Built with vanilla JavaScript and modern CSS, these tools provide an intuitive visual interface for creating complex layouts.

🌐 Try Live Demo • 📖 Documentation • 🚀 Getting Started • 💻 Usage

🛠 Available Tools

1. Grid Generator

• Visual grid builder with drag functionality
• Real-time CSS code generation
• Customizable rows, columns, and gaps
• Responsive grid layout options
• Live preview of the generated grid

2. Table Generator

• Interactive table builder
• Customizable borders and padding
• Header and cell styling options
• Alternating row colors
• Responsive table design
• Generated HTML and CSS code

3. Masonry Generator

• Visual masonry layout builder
• Dynamic item sizing and positioning
• Responsive breakpoints
• Customizable gaps and columns
• Generated CSS code with browser support

4. Flexbox Generator

• Interactive flexbox container configuration
• Customizable flex properties
• Alignment and distribution controls
• Real-time preview
• Generated CSS code

5. Gradient Generator

• Support for Linear, Radial, and Conic gradients
• Multiple color stops with position control
• Visual angle adjustment for linear gradients
• Real-time preview
• Generated CSS and Tailwind code
• Color stop management (add/remove/modify)

6. CSS Converter

• Convert CSS to LESS, SCSS, or Tailwind CSS
• Automatic variable extraction for colors
• Smart conversion of media queries to mixins
• Intelligent Tailwind class mapping
• Real-time preview
• Copy-to-clipboard functionality

7. HTML5 Boilerplate Generator

• Generate modern HTML5 boilerplate code
• Integration options for popular frameworks and libraries:
  • CSS Frameworks: Bootstrap, Tailwind CSS, Foundation, Pure.css
  • CSS Reset/Normalize: Normalize.css, Reset.css
  • UI Libraries: Next UI, Master CSS
  • Icons: Font Awesome
  • Animations: Animate.css
• Customizable meta tags and SEO options
• Responsive viewport settings
• Script loading optimization options
• Generated HTML with proper indentation
• Copy-to-clipboard functionality

✨ Features

• Visual Builders: Drag-and-drop interface for creating layouts
• Real-time Preview: See your changes instantly
• Code Generation: Get clean, optimized CSS and HTML code
• Modern UI: Material Design inspired interface
• Responsive Design: All tools work great on mobile and desktop
• No Dependencies: Built with vanilla JavaScript - no frameworks required
• Browser Support: Works in all modern browsers

🚀 Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/css-generators.git

2. Open the project:

cd css-generators

3. Serve the files using any local development server:

Using Node.js

1. Install Node.js from nodejs.org
2. Install a simple HTTP server:

   npm install -g http-server

3. Navigate to the project directory:

   cd path/to/generators

4. Start the server:

   http-server

5. Open your browser and visit http://localhost:8080

Using Live Server (VS Code)

1. Install the "Live Server" extension in VS Code

2. Right-click on index.html in the root directory

3. Select "Open with Live Server"

4. Access the tools:

• Grid Generator: /grid/index.html
• Table Generator: /table/index.html
• Masonry Generator: /masonry/index.html
• Flexbox Generator: /flexbox/index.html
• Gradient Generator: /gradient/index.html
• CSS Converter: /converter/index.html
• HTML5 Boilerplate Generator: /boilerplate/index.html

Choose the method that best suits your development environment. The tools will work with any static file server.

💻 Usage

Grid Generator

1. Open the Grid Generator tool
2. Drag in the builder area to create your desired grid size
3. Adjust rows, columns, and gap using the controls
4. Copy the generated CSS code

Table Generator

1. Open the Table Generator tool
2. Use the visual builder to set table dimensions
3. Customize border width and cell padding
4. Switch between CSS and HTML tabs to copy the code

Masonry Generator

1. Open the Masonry Generator tool
2. Create your masonry layout visually
3. Adjust columns and gaps as needed
4. Copy the generated CSS code

Flexbox Generator

1. Open the Flexbox Generator tool
2. Configure container properties (direction, justify, align)
3. Adjust item properties and count
4. Copy the generated CSS code

Gradient Generator

1. Open the Gradient Generator tool
2. Choose gradient type (Linear, Radial, or Conic)
3. Add and customize color stops
4. Adjust positions and angles
5. Copy the CSS or Tailwind code

CSS Converter

1. Open the CSS Converter tool
2. Paste your CSS code in the input area
3. Choose your target format (LESS, SCSS, or Tailwind)
4. Click Convert to transform your code
5. Copy the generated code

HTML5 Boilerplate Generator

1. Open the HTML5 Boilerplate Generator tool
2. Select desired frameworks and libraries
3. Configure meta tags and viewport settings
4. Choose script loading options
5. Copy the generated HTML code

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Commit your changes: git commit -m 'Add new feature'
4. Push to the branch: git push origin feature/new-feature
5. Submit a pull request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Material Icons for the beautiful icons
• Inter font family for the typography
• The web development community for inspiration

📧 Contact

If you have any questions or suggestions, feel free to open an issue or reach out to me:

• GitHub: @axe020

Serving the Files Locally

You can serve these tools using any local development server. Here are a few options:

Using Node.js

1. Install Node.js from nodejs.org
2. Install a simple HTTP server:

   npm install -g http-server

3. Navigate to the project directory:

   cd path/to/generators

4. Start the server:

   http-server

5. Open your browser and visit http://localhost:8080

Using Live Server (VS Code)

1. Install the "Live Server" extension in VS Code
2. Right-click on any HTML file
3. Select "Open with Live Server"

Choose the method that best suits your development environment. The tools will work with any static file server.

---

Made with ❤️ by Akshay Kadam