Modular Scale Stepper

Developer
Jason Howmans
Size
2,642 Kb
Views
36,432
  1. Modular Scale Stepper Previews
  2. Modular Scale Stepper HTML Codes
  3. Modular Scale Stepper CSS Codes

How do I make an modular scale stepper?

A simple stepper function written in SCSS, for traversing a modular scale like this one: modularscale.com/?1&em&1.25&web&table. What is a modular scale stepper? How do you make a modular scale stepper? This script and codes were developed by Jason Howmans on 05 August 2022, Friday.

Modular Scale Stepper Previews
IQ Test

Modular Scale Stepper - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modular Scale Stepper</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="scale scale--one">One</div>
<div class="scale scale--two">Two</div>
<div class="scale scale--three">Three</div>
<div class="scale scale--four">Four</div>
<div class="scale scale--five">Five</div>
<div class="scale scale--six">Six</div>
<div class="scale scale--seven">Seven</div>
<div class="scale scale--eight">Eight</div>
</body>
</html>

Modular Scale Stepper - Script Codes CSS Codes

/**! * SCSS Modular scale function * Will use $ms-base as the scale, and $degrees to calculate stops on the scale * * @examples: * Usage example for font-size: * // Using a scale of 1.4, this will output font-size: 1.96rem; * font-size: ms(2)rem; * * Will also work with backward steps * // Using a scale of 1.4, this will output font-size: .714rem; * font-size: ms(-1)rem; */
.scale { box-sizing: border-box; padding-left: 10px; font: 1rem monospace; width: 50%; margin: 10px auto; background: #F6E74F;
}
.scale--one { font-size: 1.4rem; height: 1.4rem;
}
.scale--two { font-size: 1.96rem; height: 1.96rem;
}
.scale--three { font-size: 2.744rem; height: 2.744rem;
}
.scale--four { font-size: 3.842rem; height: 3.842rem;
}
.scale--five { font-size: 5.378rem; height: 5.378rem;
}
.scale--six { font-size: 7.53rem; height: 7.53rem;
}
.scale--seven { font-size: 10.541rem; height: 10.541rem;
}
.scale--eight { font-size: 14.758rem; height: 14.758rem;
}
Modular Scale Stepper - Script Codes
Modular Scale Stepper - Script Codes
Home Page Home
Developer Jason Howmans
Username jasonhowmans
Uploaded August 05, 2022
Rating 3
Size 2,642 Kb
Views 36,432
Do you need developer help for Modular Scale Stepper?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jason Howmans (jasonhowmans) Script Codes
Name
A Pen by Jason Howmans
IOS style sliding menu
Re-usable elements
Vanilla modal window
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!