OROCHI

Framework CSS Moderne & Puissant

Pourquoi choisir Orochi ?

Découvrez les fonctionnalités qui font d'Orochi le framework CSS de choix pour vos projets

Ultra Léger

Avec seulement 66KB minifié, Orochi garantit des temps de chargement rapides et une expérience utilisateur optimale.

Responsive Design

Conçu avec l'approche mobile-first, Orochi s'adapte parfaitement à tous les appareils et tailles d'écran.

Composants Modulaires

Utilisez uniquement les composants dont vous avez besoin grâce à une architecture modulaire et flexible.

Personnalisation Facile

Personnalisez facilement les couleurs, les espacements et plus grâce aux variables CSS modernes.

Performances Optimisées

Code optimisé pour des performances maximales, avec un impact minimal sur la taille de votre application.

Design Élégant

Un design moderne et épuré avec des animations subtiles pour une expérience utilisateur raffinée.

Code Élégant, Résultats Exceptionnels

Découvrez la simplicité et la puissance de la syntaxe Orochi

<!--Boutons-->
<button class="o-btn o-btn-primary">Primaire</button>
<button class="o-btn o-btn-outline-success">Outline Succès</button>
<button class="o-btn o-btn-laptop o-btn-danger">Grand Danger</button>
<button class="o-btn o-btn-phone o-btn-warning">Petit Avertissement</button>
<button class="o-btn o-btn-info" disabled>Désactivé</button>

<!--Grille-->
<div class="o-row">
  <div class="o-col-12 o-col-tablet-6">Colonne 1</div>
  <div class="o-col-12 o-col-tablet-6">Colonne 2</div>
</div>

<!--Carte-->
<div class="o-card">
  <div class="o-card-header">Titre</div>
  <div class="o-card-body">Contenu de la carte</div>
</div>

<!--Formulaire-->
<input class="o-form-control" type="email" placeholder="Email">
<select class="o-form-select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>
<button class="o-btn o-btn-success">Envoyer</button>

Installation Simple et Rapide

Intégrez Orochi à votre projet en quelques minutes

1

Via CDN

Ajoutez simplement cette ligne dans le head de votre HTML :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Orochichrys/orochi-framework@main/dist/orochi.min.css">
2

Installation avec NPM

Installez Orochi via npm pour une intégration avec vos outils de build :

npm install orochi-css
3

Personnalisation Totale

Téléchargez les fichiers CSS et JS et liez-les localement :

<link rel="stylesheet" href="chemin/vers/orochi.css">

Composants Intégrés

Une collection complète de composants prêts à l'emploi

Système de Grille Flexbox

Une grille responsive basée sur Flexbox avec des breakpoints personnalisables pour tous vos besoins de mise en page.

Composants de Formulaire

Des champs de formulaire stylisés, des cases à cocher, des boutons radio et des sélecteurs modernes et accessibles.

Navigation Responsive

Des barres de navigation élégantes qui s'adaptent parfaitement aux appareils mobiles avec un menu hamburger.

Cartes et Panneaux

Des composants de carte modernes avec des ombres portées et des animations au survol pour présenter votre contenu.

Alertes et Notifications

Des alertes contextuelles avec des styles pour le succès, les avertissements, les erreurs et les informations.

Utilities CSS

Des classes utilitaires pour les espacements, la typographie, les couleurs et les displays pour un développement rapide.

Ils utilisent Orochi

Découvrez ce que les développeurs disent de notre framework

"Orochi a considérablement accéléré notre processus de développement. Sa simplicité et sa légèreté en font un choix parfait pour nos projets web."

SD

Sophie Dubois

Développeuse Front-end

"La documentation claire et les composants modulaires nous ont permis d'intégrer Orochi facilement dans notre workflow existant. Un framework vraiment bien pensé."

TM

Thomas Martin

Lead Designer

"Nous cherchions une alternative légère à Bootstrap pour nos projets. Orochi a dépassé nos attentes avec ses performances et son design moderne."

LJ

Laura Jensen

CTO, TechSolutions