https://github.com/alexy-os/layouter
Download branch: www.github.com/alexy-os/layouter/tree/stable. Draw layouts using Layouter's intuitive interface and export your designs to clean html files. This preview beta version:
https://github.com/alexy-os/layouter
layout layouts pointer tailwind tailwindcss ui-design ux-design
Last synced: 28 days ago
JSON representation
Download branch: www.github.com/alexy-os/layouter/tree/stable. Draw layouts using Layouter's intuitive interface and export your designs to clean html files. This preview beta version:
- Host: GitHub
- URL: https://github.com/alexy-os/layouter
- Owner: alexy-os
- License: mit
- Created: 2025-02-10T10:39:38.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-17T13:51:01.000Z (2 months ago)
- Last Synced: 2025-02-17T14:34:10.880Z (2 months ago)
- Topics: layout, layouts, pointer, tailwind, tailwindcss, ui-design, ux-design
- Language: JavaScript
- Homepage: https://layouter-ui.vercel.app
- Size: 151 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Layouter UI
## The Most Elegant Approach to UI Design
Layouter is not just another design tool – it's a philosophical statement about simplicity. While others offer endless toolbars that would make Swiss Army knives blush, we've distilled interface design to its purest essence: a rectangle and some text.
## The Power of Two
Just as a proper cup of Earl Grey needs only tea and water, Layouter needs only two tools:
### 🟦 The Rectangle
The foundation of all interfaces. Think of it as the Lego bricks that built an empire:
- Buttons? A rectangle with rounded corners
- Cards? A rectangle with a shadow
- Headers? A rather wide rectangle
- Modals? A rectangle that knows how to make an entrance
### 📝 The Text
Because even the finest architecture needs proper signage:
- Perfectly positioned
- Tailwind-powered styling
- No unnecessary formatting faff
- Just the essentials: size, alignment, and weight
## Tailwind: Our Faithful Butler
Every rectangle and text element is impeccably dressed in Tailwind utilities:
```html
Precisely positioned, old chap!
```
## The BuildY Integration: a match made with love for HinddY
See [buildy](https://github.com/alexy-os/layouter/tree/main/buildy) for more details.
Coming soon: Clever algorithms to pick shadcn/ui blocks right while drawing your rectangles in Layouter.
### How It Works
1. Draw your interface with rectangles
2. Layouter analyses your composition
3. BuildY suggests matching shadcn/ui components
4. You select your favourites with a gentlemanly click
### The Roadmap
#### Phase 1: The Foundation (Current)
- ✅ Rectangle and text tools
- ✅ Drag-and-drop precision
- ✅ Tailwind utility exports
- ✅ Dark mode (for those long designers nights)
#### Phase 2: The Intelligence (Q1 2025)
- 🔄 Pattern recognition for common UI elements
- 🔄 Integration with shadcn/ui component library
- 🔄 Smart component suggestions
- 🔄 One-click component favouriting
#### Phase 3: The Refinement (Q2 2025)
- 📅 Automatic layout optimization
- 📅 Component variation suggestions
- 📅 Theme customization
- 📅 Export to BuildY projects
## Getting Started
```bash
# Clone with British precision
git clone https://github.com/alexy-os/layouter.git
# Enter the establishment
cd layouter
# Start the service
# (No tea will be served, unfortunately)
```
## The Philosophy
Why complicate what can be simple? With the approach of true perfectionists:
- Every interface is a composition of rectangles
- Every rectangle can be a component
- Every component should be precisely placed
- And everything should work together like a well-oiled machine
## The Future
Imagine designing your interface as easily as arranging furniture in a proper English manor:
1. Draw your layout with rectangles
2. Add text where needed
3. Click suggested components
4. Export to BuildY
5. Have a cup of tea while your interface assembles itself
## Contributing
We welcome contributions with the same enthusiasm as a proper English garden welcomes spring flowers. Do mind the coding standards – we're quite particular about those.
## License
MIT - As free as speech, not as free as tea.
---
*"In simplicity lies the ultimate sophistication" - Leonardo da Vinci (who would have loved Layouter, we're quite certain)*