CSSence - Advanced CSS/SCSS Snippets

Overview

CSSence is a powerful VS Code extension providing a comprehensive collection of CSS/SCSS snippets based on Ant Design system. It includes optimized base configurations, mobile-first responsive design patterns, and iOS-specific fixes.

Features

🎨 Design System Integration

Complete Ant Design color system
Consistent spacing scales
Typography system
Border radius utilities
Shadow configurations

📱 Mobile Optimization

iOS-specific fixes
Touch interaction improvements
Mobile-first media queries
Performance optimizations
Disabled hover states on touch devices

🚀 Quick Start Snippets

Base HTML/Body Setup

base-html⇥

Outputs optimized HTML and Body configurations with mobile fixes.

Root Variables

root-full⇥

Sets up complete design system variables.

📦 Main Snippets

Prefix	Description
`base-html`	Optimized HTML/Body base configuration
`root-full`	Complete root variables setup

Installation

Open VS Code
Press Ctrl+P / Cmd+P
Type: ext install PavelMelnik.cssence
Press Enter

Usage

Open any CSS/SCSS file
Type snippet prefix (e.g., root-full)
Press Tab or Enter

Supported Languages

CSS
SCSS
CSS Modules
SCSS Modules

Examples

Setting up root variables

root-full⇥

:root {
  /*Colors */
  --color-primary: #1890ff;
  --color-success: #52c41a;
  /* ... more variables*/
}

Optimized base configuration

base-html⇥

html {
  /*Mobile optimizations */
  -webkit-text-size-adjust: 100%;
  /* ... more optimizations*/
}

Best Practices

Mobile-First Development

// Use the provided media query helpers
@media (min-width: var(--breakpoint-md)) {
  // Desktop styles
}

iOS Specific Fixes

// Automatically included in base-html snippet
@supports (-webkit-touch-callout: none) {
  // iOS specific fixes
}

Contributing

Fork the repository
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request

Roadmap

[ ] Additional component snippets
[ ] Dark mode utilities
[ ] Animation presets
[ ] Custom themes support
[ ] RTL support

Support

If you encounter any issues or have suggestions:

License

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

Author

Pavel Melnik

GitHub: @PavelMelnik94

Acknowledgments

Inspired by Ant Design System
Created for modern web development needs
Optimized for real-world use cases

Made with ❤️ by Pavel Melnik

Last Updated: 2025-01-18 02:04:29 UTC

CSSence-extended

PavelMelnik94