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
Sets up complete design system variables.
📦 Main Snippets
Prefix
Description
!init
🎯 Complete project initialization with typography, root variables and basic HTML optimizations (Ant Desing based)
s-full-bg
🖼️ Full-screen responsive background image
s-center-flex
📍 Centering elements using flexbox
s-center-absolute
📌 Absolute centering using transform
s-div.background
🎨 DIV with background image and scroll fixation
s-media-min
📱 Media query min-width (Mobile First)
s-media-max
💻 Media query max-width (Desktop First)
s-animation
✨ CSS animation template with keyframes
s-theme-toggle
🌓 Light/Dark theme toggle functionality
s-aspect-ratio
📐 Fixed aspect ratio (16:9) container
s-tooltip
💬 Tooltip with smooth animation
s-card-hover
🃏 Card with hover effect animation
s-hamburger-menu
🍔 Animated hamburger menu button
s-input-floating
✍️ Input field with floating label
s-skeleton-loading
⌛ Skeleton loading animation
s-scroll-snap
📜 Container with scroll snap functionality
s-gradient-text
🌈 Text with animated gradient effect
s-custom-scrollbar-minimal
📊 Minimal custom scrollbar design
s-grid-container
🏗️ Responsive grid container
s-truncate-text
✂️ Text truncation with ellipsis
s-glassmorphism
🌫️ Frosted glass effect
s-responsive-image
🖼️ Responsive image handling
s-smooth-transition
🔄 Smooth transition effect
s-custom-checkbox
☑️ Custom animated checkbox
s-loading-spinner
🔄 Animated loading spinner
Usage
Open any CSS/SCSS file
Type snippet prefix (e.g., !init)
Press Tab or Enter
Supported Languages
CSS
SCSS
CSS Modules
SCSS Modules
// 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
