🚀 Losta Framework

A revolutionary React-like framework with a unique modular architecture, built-in theme system, and modern development experience.

✨ What Makes Losta Unique?

🎯 Modular Architecture

Unlike traditional frameworks, Losta organizes code by feature and type rather than just functionality:

src/
├── pages/          # Page-level components
├── components/     # Reusable UI components  
├── hooks/          # Custom React-like hooks
├── utils/          # Utility functions
├── styles/         # Component-scoped CSS
├── types/          # TypeScript definitions
└── assets/         # Static assets

🌙 Built-in Theme System

• Dark/Light Mode with automatic persistence
• CSS Custom Properties for consistent theming
• Smooth transitions between themes
• Component-aware theme switching

🎨 Component-Scoped CSS

Each component has its own dedicated CSS file with:

• CSS Custom Properties for theming
• Advanced animations and transitions
• Responsive design with mobile-first approach
• Modern CSS features like Grid and Flexbox

🪝 Custom Hooks System

// Built-in useTheme hook
const { theme, toggleTheme } = useTheme()

// Easy to create custom hooks
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue)
  // ... custom logic
  return { count, increment, decrement, reset }
}

🚀 Quick Start

Create a New App

npx losta create my-awesome-app
cd my-awesome-app
npm install
npm run dev

Project Structure

my-awesome-app/
├── src/
│   ├── pages/App.jsx           # Main application page
│   ├── components/             # Reusable components
│   │   ├── Counter.jsx
│   │   ├── Header.jsx
│   │   └── Footer.jsx
│   ├── hooks/useTheme.js       # Custom hooks
│   ├── utils/formatting.js     # Utility functions
│   ├── styles/                 # Component styles
│   │   ├── global.css
│   │   ├── App.css
│   │   └── Counter.css
│   └── types/index.ts          # TypeScript types
├── losta.config.js             # Framework configuration
└── package.json

🛠️ Features

⚡ Modern Development

• JSX with Automatic Runtime - No need to import React
• Hot Module Replacement (HMR) - Instant updates
• TypeScript Support - Full type safety
• ESLint Configuration - Code quality
• Modern Build System - Fast builds with esbuild

🎭 Advanced Styling

• CSS Custom Properties for theming
• Component-scoped styles for better organization
• Advanced animations with keyframes
• Responsive design with mobile-first approach
• Modern CSS features (Grid, Flexbox, etc.)

🔧 Developer Experience

• Intuitive file structure - Find files quickly
• Component isolation - Each component is self-contained
• Type safety - Full TypeScript support
• Modern tooling - ESLint, Prettier, and more

📝 Code Examples

Component with Theme Support

import { useState } from 'losta-framework'
import '../styles/Counter.css'

export function Counter() {
  const [count, setCount] = useState(0)
  const { theme } = useTheme()

  return (
    <div className={`counter theme-${theme}`}>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  )
}

Component-Scoped CSS

/* Counter.css */
.counter {
  background: var(--light-card-bg);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xxl);
  transition: all var(--transition-normal);
}

.theme-dark .counter {
  background: var(--dark-card-bg);
}

.count {
  font-size: 4rem;
  color: var(--primary-color);
  animation: fadeIn 0.5s ease-out;
}

Custom Hook

// hooks/useCounter.js
import { useState, useEffect } from 'losta-framework'

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue)
  
  useEffect(() => {
    localStorage.setItem('counter', count)
  }, [count])

  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)
  const reset = () => setCount(initialValue)

  return { count, increment, decrement, reset }
}

🎯 Key Differences from Other Frameworks

| Feature | Losta Framework | React | Vue | Angular | |---------|----------------|-------|-----|---------| | File Structure | Modular by type | Flexible | Flexible | Strict | | Theme System | Built-in | Manual | Manual | Manual | | CSS Organization | Component-scoped | Various | Scoped | Various | | Hooks | Custom + Built-in | Built-in | Composition API | Services | | TypeScript | First-class | Optional | Optional | Built-in | | Learning Curve | Low | Medium | Low | High |

🔧 Configuration

losta.config.js

import { defineConfig } from '@losta/cli'

export default defineConfig({
  server: {
    port: 3000,
    host: 'localhost',
    open: true
  },
  
  build: {
    outDir: 'dist',
    sourcemap: true,
    minify: true
  },
  
  jsx: {
    runtime: 'automatic'
  },
  
  theme: {
    default: 'light',
    storage: 'localStorage'
  }
})

📚 Learning Path

1. Start with Components - Learn the component structure
2. Explore Hooks - Understand custom hooks
3. Master Styling - Learn component-scoped CSS
4. Add Themes - Implement dark/light mode
5. Type Safety - Add TypeScript types
6. Advanced Features - Custom hooks and utilities

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE file for details.

🎉 Why Choose Losta?

• 🎯 Intuitive Structure - Find what you need quickly
• 🌙 Built-in Themes - No need for external theme libraries
• 🎨 Component-Scoped CSS - Better organization and maintainability
• ⚡ Modern Tooling - Fast development with modern tools
• 📱 Mobile-First - Responsive design out of the box
• 🪝 Custom Hooks - Reusable logic with React-like patterns
• 🔧 Type Safety - Full TypeScript support
• 🚀 Performance - Optimized builds and fast development

Ready to build something amazing? Start with npx losta create my-app and experience the future of web development! 🚀