Last active
November 25, 2024 14:55
-
-
Save Alecto/b61c2723519e1f9798866901b8be7988 to your computer and use it in GitHub Desktop.
Scss variables
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Fonts | |
| * Font settings for the project | |
| */ | |
| $font-primary: 'Roboto', sans-serif; // Main font for text | |
| $font-header: 'Roboto Slab', serif; // Font for headers | |
| $font-icon: 'FontAwesome'; // Icon font | |
| $font-size: 16px; // Base font size | |
| /* Container | |
| * Settings for the main container | |
| */ | |
| $container-width: 1320px; // Maximum container width | |
| /* Breakpoints | |
| * Responsive breakpoints for different screen sizes | |
| */ | |
| $ul: 1380px; // Ultra large (very large screens) | |
| $xl: 1200px; // Extra large (large screens) | |
| $lg: 992px; // Large (medium screens) | |
| $md: 768px; // Medium (tablets) | |
| $sm: 576px; // Small (mobile devices) | |
| $xs: 480px; // Extra small (small mobile devices) | |
| $vs: 420px; // Very small (very small devices) | |
| $us: 360px; // Ultra small (ultra small devices) | |
| /* Gaps | |
| * Spacing between elements | |
| */ | |
| $gap: 20px; // Base gap (20px) | |
| $gap-sm: $gap * 0.5; // Small gap (10px) | |
| $gap-md: $gap * 0.75; // Medium gap (15px) | |
| $gap-lg: $gap * 1.5; // Large gap (30px) | |
| $gap-xl: $gap * 2; // Extra large gap (40px) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment