Skip to content

Releases: san-siva/stylekit

Initial public release v1.0.1

16 Dec 14:42
@san-siva san-siva
v1.0.1
7223696

Choose a tag to compare

View all tags
Initial public release v1.0.1 Latest
Latest

We're excited to announce the first official release of Stylekit - a comprehensive, modular SCSS design system for building consistent and beautiful user interfaces!

🚀 What is Stylekit?

Stylekit is a lightweight, modular SCSS library that provides a complete design system including colors, typography, animations, utilities, and layout dimensions. Built with flexibility in mind, you can import the entire library or just the modules you need.

✨ Features

📦 Modular Architecture

Import only what you need - each module can be used independently:

  • Colors - Complete color palette with primary, secondary, accent, error, and greyscale colors
  • Typography - Font families (Rubik, Montserrat, JetBrains Mono), sizes, weights, and line heights
  • Utils - Helper functions and spacing utilities with rem/em converters
  • Dimensions - Responsive containers, page layouts, border radius, and breakpoints
  • Animations - Pre-built keyframe animations for common UI patterns
  • Globals - Global styles and CSS resets

🎯 Key Highlights

  • Modular Imports - Use the entire library or import specific modules
  • SCSS Modules - Modern CSS module support with proper exports
  • Design System - Consistent spacing scale (0-9) and typography scale
  • Utility Classes - Pre-built margin, padding, and typography classes
  • Responsive Breakpoints - Mobile, tablet, and desktop breakpoints
  • Type-Safe - Works seamlessly with CSS modules in TypeScript projects

🎨 What's Inside

Color Palette

  • Primary colors with light variants and accents
  • Secondary colors for supporting UI elements
  • Complete greyscale system
  • Utility colors (error, link, pink, glass effect)

Typography System

  • 3 font families (primary, secondary, code)
  • Full heading scale (h1-h6) plus body text sizes
  • Font weights from 400-800
  • Line height utilities
  • Ready-to-use utility classes

Spacing & Layout

  • Consistent spacing scale (4px to 96px)
  • Flexible container system
  • Page layout with max-width constraints
  • Border radius tokens
  • Responsive breakpoints with auto-adjusting padding

Animations

  • Loading animations
  • Fade effects
  • Slide-in transitions
  • Easy-to-use keyframes

🔧 Technical Improvements

This release includes important fixes for smooth integration:

  • ✅ Fixed exports to include all SCSS files
  • ✅ Resolved import errors for seamless module usage
  • ✅ Optimized package.json for npm publishing
  • ✅ Modular exports for granular imports

📦 Installation

  npm install @san-siva/stylekit

🚀 Quick Start

  // Import everything
  @use '@san-siva/stylekit' as styles;

  .my-element {
    color: styles.$color--primary;
    font-size: styles.$font-size--h1;
    padding: styles.space(3);
  }

  // Or import specific modules
  @use '@san-siva/stylekit/colors' as colors;
  @use '@san-siva/stylekit/typography' as typography;

  .my-element {
    color: colors.$color--primary;
    font-size: typography.$font-size--h1;
  }

🔗 Perfect Companion

Stylekit works seamlessly with https://www.npmjs.com/package/@san-siva/blogkit for building beautiful blog interfaces!

📚 Resources

🙏 Thank You

Thank you for trying Stylekit! We hope it helps you build beautiful, consistent UIs faster.

Assets 2
Loading