Sprocket Rocket
  • Sprocket Rocket Design System
  • Initial Setup
    • Setup HubL Local Server
    • Setup SR App Locally
    • Clone LaunchPad Starter
  • Create a New Module
    • Design
    • Code
    • Implementation
    • Create a Pull Request
    • Fields JSON
  • Code Patterns
    • Design Settings
    • Headings
    • Responsive Images
    • Implementing Forms
    • Typography
    • CTA/Button
    • Spacers
  • PR Review
    • Design / Code Review
    • Implementation Review
  • Handoff Relay Checklist
    • Client Request - Handoff
    • Page/Template Design - Handoff
    • Module Design - Handoff
    • Page/Template Development - Handoff
    • Module Development - Handoff
    • Review & Delivery - Handoff
  • Guides and Tutorials
    • Code Snippets
    • Lazy Loading
    • How to setup the blog subscription notification emails
    • 404 Error Tracking Event with Google Analytics and Google Tag Manager
    • How to setup a form to be used with SR Conversational Form 01
    • Upgrading Bootstrap to Latest Version
  • HS Page Launch (QC)
  • SR Agency Website Review Checklist (QC)
Powered by GitBook
On this page
  1. Code Patterns

Spacers

// == standard padding ==
.sr-padding-zero {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.sr-padding-half {
	padding-top: 3.125rem !important;
	padding-bottom: 3.125rem !important;
}
.sr-padding-full {
	padding-top: 6.25rem !important;
	padding-bottom: 6.25rem !important;
}

// == standard spacers ==
.sr-spacer-25 {
	padding-top: 25 / $font-size-base + 0rem;
	padding-bottom: 25 / $font-size-base + 0rem;
}
.sr-spacer-top-25 {
	padding-top: 25 / $font-size-base + 0rem;
}
.sr-spacer-bottom-25 {
	padding-bottom: 25 / $font-size-base + 0rem;
}

.sr-spacer-50 {
	padding-top: 50 / $font-size-base + 0rem;
	padding-bottom: 50 / $font-size-base + 0rem;
}
.sr-spacer-top-50 {
	padding-top: 50 / $font-size-base + 0rem;
}
.sr-spacer-bottom-50 {
	padding-bottom: 50 / $font-size-base + 0rem;
}

.sr-spacer-75 {
	padding-top: 75 / $font-size-base + 0rem;
	padding-bottom: 75 / $font-size-base + 0rem;
}
.sr-spacer-top-75 {
	padding-top: 75 / $font-size-base + 0rem;
}
.sr-spacer-bottom-75 {
	padding-bottom: 75 / $font-size-base + 0rem;
}

.sr-spacer-100 {
	padding-top: 100 / $font-size-base + 0rem;
	padding-bottom: 100 / $font-size-base + 0rem;
}
.sr-spacer-top-100 {
	padding-top: 100 / $font-size-base + 0rem;
}
.sr-spacer-bottom-100 {
	padding-bottom: 100 / $font-size-base + 0rem;
}
PreviousCTA/ButtonNextPR Review

Last updated 6 years ago