Skip to content

Instantly share code, notes, and snippets.

@withoutwax
Created May 8, 2018 15:08
Show Gist options
  • Save withoutwax/f4eab2f878104cc8b6fd1fa2ef5ac6ef to your computer and use it in GitHub Desktop.
Save withoutwax/f4eab2f878104cc8b6fd1fa2ef5ac6ef to your computer and use it in GitHub Desktop.
Modular CSS
/* MODULAR CSS */
/* PADDING */
.padding-top-10 {padding-top: 10px;}
.padding-top-20 {padding-top: 20px;}
.padding-top-30 {padding-top: 30px;}
.padding-top-40 {padding-top: 40px;}
.padding-top-50 {padding-top: 50px;}
.padding-top-60 {padding-top: 60px;}
.padding-top-70 {padding-top: 70px;}
.padding-top-80 {padding-top: 80px;}
.padding-top-90 {padding-top: 90px;}
.padding-top-100 {padding-top:100px;}
.padding-top-110 {padding-top: 110px;}
.padding-top-120 {padding-top: 120px;}
.padding-top-130 {padding-top: 130px;}
.padding-top-140 {padding-top: 140px;}
.padding-top-150 {padding-top: 150px;}
.padding-top-160 {padding-top: 160px;}
.padding-top-170 {padding-top: 170px;}
.padding-top-180 {padding-top: 180px;}
.padding-top-190 {padding-top: 190px;}
.padding-top-200 {padding-top: 200px;}
.padding-top-300 {padding-top: 300px;}
.padding-top-400 {padding-top: 400px;}
.padding-top-500 {padding-top: 500px;}
.padding-top-600 {padding-top: 600px;}
.padding-top-700 {padding-top: 700px;}
.padding-top-800 {padding-top: 800px;}
.padding-top-900 {padding-top: 900px;}
.padding-top-1000 {padding-top:1000px;}
.padding-bottom-10 {padding-bottom: 10px;}
.padding-bottom-20 {padding-bottom: 20px;}
.padding-bottom-30 {padding-bottom: 30px;}
.padding-bottom-40 {padding-bottom: 40px;}
.padding-bottom-50 {padding-bottom: 50px;}
.padding-bottom-60 {padding-bottom: 60px;}
.padding-bottom-70 {padding-bottom: 70px;}
.padding-bottom-80 {padding-bottom: 80px;}
.padding-bottom-90 {padding-bottom: 90px;}
.padding-bottom-100 {padding-bottom:100px;}
.padding-bottom-110 {padding-bottom: 110px;}
.padding-bottom-120 {padding-bottom: 120px;}
.padding-bottom-130 {padding-bottom: 130px;}
.padding-bottom-140 {padding-bottom: 140px;}
.padding-bottom-150 {padding-bottom: 150px;}
.padding-bottom-160 {padding-bottom: 160px;}
.padding-bottom-170 {padding-bottom: 170px;}
.padding-bottom-180 {padding-bottom: 180px;}
.padding-bottom-190 {padding-bottom: 190px;}
.padding-bottom-200 {padding-bottom: 200px;}
.padding-bottom-300 {padding-bottom: 300px;}
.padding-bottom-400 {padding-bottom: 400px;}
.padding-bottom-500 {padding-bottom: 500px;}
.padding-bottom-600 {padding-bottom: 600px;}
.padding-bottom-700 {padding-bottom: 700px;}
.padding-bottom-800 {padding-bottom: 800px;}
.padding-bottom-900 {padding-bottom: 900px;}
.padding-bottom-1000 {padding-bottom:1000px;}
.padding-right-10 {padding-right: 10px;}
.padding-right-20 {padding-right: 20px;}
.padding-right-30 {padding-right: 30px;}
.padding-right-40 {padding-right: 40px;}
.padding-right-50 {padding-right: 50px;}
.padding-right-60 {padding-right: 60px;}
.padding-right-70 {padding-right: 70px;}
.padding-right-80 {padding-right: 80px;}
.padding-right-90 {padding-right: 90px;}
.padding-right-100 {padding-right:100px;}
.padding-right-110 {padding-right: 110px;}
.padding-right-120 {padding-right: 120px;}
.padding-right-130 {padding-right: 130px;}
.padding-right-140 {padding-right: 140px;}
.padding-right-150 {padding-right: 150px;}
.padding-right-160 {padding-right: 160px;}
.padding-right-170 {padding-right: 170px;}
.padding-right-180 {padding-right: 180px;}
.padding-right-190 {padding-right: 190px;}
.padding-right-200 {padding-right: 200px;}
.padding-right-300 {padding-right: 300px;}
.padding-right-400 {padding-right: 400px;}
.padding-right-500 {padding-right: 500px;}
.padding-right-600 {padding-right: 600px;}
.padding-right-700 {padding-right: 700px;}
.padding-right-800 {padding-right: 800px;}
.padding-right-900 {padding-right: 900px;}
.padding-right-1000 {padding-right:1000px;}
.padding-left-10 {padding-left: 10px;}
.padding-left-20 {padding-left: 20px;}
.padding-left-30 {padding-left: 30px;}
.padding-left-40 {padding-left: 40px;}
.padding-left-50 {padding-left: 50px;}
.padding-left-60 {padding-left: 60px;}
.padding-left-70 {padding-left: 70px;}
.padding-left-80 {padding-left: 80px;}
.padding-left-90 {padding-left: 90px;}
.padding-left-100 {padding-left:100px;}
.padding-left-110 {padding-left: 110px;}
.padding-left-120 {padding-left: 120px;}
.padding-left-130 {padding-left: 130px;}
.padding-left-140 {padding-left: 140px;}
.padding-left-150 {padding-left: 150px;}
.padding-left-160 {padding-left: 160px;}
.padding-left-170 {padding-left: 170px;}
.padding-left-180 {padding-left: 180px;}
.padding-left-190 {padding-left: 190px;}
.padding-left-200 {padding-left: 200px;}
.padding-left-300 {padding-left: 300px;}
.padding-left-400 {padding-left: 400px;}
.padding-left-500 {padding-left: 500px;}
.padding-left-600 {padding-left: 600px;}
.padding-left-700 {padding-left: 700px;}
.padding-left-800 {padding-left: 800px;}
.padding-left-900 {padding-left: 900px;}
.padding-left-1000 {padding-left:1000px;}
.padding-10 {padding: 10px;}
.padding-20 {padding: 20px;}
.padding-30 {padding: 30px;}
.padding-40 {padding: 40px;}
.padding-50 {padding: 50px;}
.padding-60 {padding: 60px;}
.padding-70 {padding: 70px;}
.padding-80 {padding: 80px;}
.padding-90 {padding: 90px;}
.padding-100 {padding:100px;}
.padding-110 {padding: 110px;}
.padding-120 {padding: 120px;}
.padding-130 {padding: 130px;}
.padding-140 {padding: 140px;}
.padding-150 {padding: 150px;}
.padding-160 {padding: 160px;}
.padding-170 {padding: 170px;}
.padding-180 {padding: 180px;}
.padding-190 {padding: 190px;}
.padding-200 {padding: 200px;}
.padding-300 {padding: 300px;}
.padding-400 {padding: 400px;}
.padding-500 {padding: 500px;}
.padding-600 {padding: 600px;}
.padding-700 {padding: 700px;}
.padding-800 {padding: 800px;}
.padding-900 {padding: 900px;}
.padding-1000 {padding:1000px;}
/* MARGIN */
.margin-top-10 {margin-top: 10px;}
.margin-top-20 {margin-top: 20px;}
.margin-top-30 {margin-top: 30px;}
.margin-top-40 {margin-top: 40px;}
.margin-top-50 {margin-top: 50px;}
.margin-top-60 {margin-top: 60px;}
.margin-top-70 {margin-top: 70px;}
.margin-top-80 {margin-top: 80px;}
.margin-top-90 {margin-top: 90px;}
.margin-top-100 {margin-top:100px;}
.margin-top-110 {margin-top: 110px;}
.margin-top-120 {margin-top: 120px;}
.margin-top-130 {margin-top: 130px;}
.margin-top-140 {margin-top: 140px;}
.margin-top-150 {margin-top: 150px;}
.margin-top-160 {margin-top: 160px;}
.margin-top-170 {margin-top: 170px;}
.margin-top-180 {margin-top: 180px;}
.margin-top-190 {margin-top: 190px;}
.margin-top-200 {margin-top: 200px;}
.margin-top-300 {margin-top: 300px;}
.margin-top-400 {margin-top: 400px;}
.margin-top-500 {margin-top: 500px;}
.margin-top-600 {margin-top: 600px;}
.margin-top-700 {margin-top: 700px;}
.margin-top-800 {margin-top: 800px;}
.margin-top-900 {margin-top: 900px;}
.margin-top-1000 {margin-top:1000px;}
.margin-bottom-10 {margin-bottom: 10px;}
.margin-bottom-20 {margin-bottom: 20px;}
.margin-bottom-30 {margin-bottom: 30px;}
.margin-bottom-40 {margin-bottom: 40px;}
.margin-bottom-50 {margin-bottom: 50px;}
.margin-bottom-60 {margin-bottom: 60px;}
.margin-bottom-70 {margin-bottom: 70px;}
.margin-bottom-80 {margin-bottom: 80px;}
.margin-bottom-90 {margin-bottom: 90px;}
.margin-bottom-100 {margin-bottom:100px;}
.margin-bottom-110 {margin-bottom: 110px;}
.margin-bottom-120 {margin-bottom: 120px;}
.margin-bottom-130 {margin-bottom: 130px;}
.margin-bottom-140 {margin-bottom: 140px;}
.margin-bottom-150 {margin-bottom: 150px;}
.margin-bottom-160 {margin-bottom: 160px;}
.margin-bottom-170 {margin-bottom: 170px;}
.margin-bottom-180 {margin-bottom: 180px;}
.margin-bottom-190 {margin-bottom: 190px;}
.margin-bottom-200 {margin-bottom: 200px;}
.margin-bottom-300 {margin-bottom: 300px;}
.margin-bottom-400 {margin-bottom: 400px;}
.margin-bottom-500 {margin-bottom: 500px;}
.margin-bottom-600 {margin-bottom: 600px;}
.margin-bottom-700 {margin-bottom: 700px;}
.margin-bottom-800 {margin-bottom: 800px;}
.margin-bottom-900 {margin-bottom: 900px;}
.margin-bottom-1000 {margin-bottom:1000px;}
.margin-right-10 {margin-right: 10px;}
.margin-right-20 {margin-right: 20px;}
.margin-right-30 {margin-right: 30px;}
.margin-right-40 {margin-right: 40px;}
.margin-right-50 {margin-right: 50px;}
.margin-right-60 {margin-right: 60px;}
.margin-right-70 {margin-right: 70px;}
.margin-right-80 {margin-right: 80px;}
.margin-right-90 {margin-right: 90px;}
.margin-right-100 {margin-right:100px;}
.margin-right-110 {margin-right: 110px;}
.margin-right-120 {margin-right: 120px;}
.margin-right-130 {margin-right: 130px;}
.margin-right-140 {margin-right: 140px;}
.margin-right-150 {margin-right: 150px;}
.margin-right-160 {margin-right: 160px;}
.margin-right-170 {margin-right: 170px;}
.margin-right-180 {margin-right: 180px;}
.margin-right-190 {margin-right: 190px;}
.margin-right-200 {margin-right: 200px;}
.margin-right-300 {margin-right: 300px;}
.margin-right-400 {margin-right: 400px;}
.margin-right-500 {margin-right: 500px;}
.margin-right-600 {margin-right: 600px;}
.margin-right-700 {margin-right: 700px;}
.margin-right-800 {margin-right: 800px;}
.margin-right-900 {margin-right: 900px;}
.margin-right-1000 {margin-right:1000px;}
.margin-left-10 {margin-left: 10px;}
.margin-left-20 {margin-left: 20px;}
.margin-left-30 {margin-left: 30px;}
.margin-left-40 {margin-left: 40px;}
.margin-left-50 {margin-left: 50px;}
.margin-left-60 {margin-left: 60px;}
.margin-left-70 {margin-left: 70px;}
.margin-left-80 {margin-left: 80px;}
.margin-left-90 {margin-left: 90px;}
.margin-left-100 {margin-left:100px;}
.margin-left-110 {margin-left: 110px;}
.margin-left-120 {margin-left: 120px;}
.margin-left-130 {margin-left: 130px;}
.margin-left-140 {margin-left: 140px;}
.margin-left-150 {margin-left: 150px;}
.margin-left-160 {margin-left: 160px;}
.margin-left-170 {margin-left: 170px;}
.margin-left-180 {margin-left: 180px;}
.margin-left-190 {margin-left: 190px;}
.margin-left-200 {margin-left: 200px;}
.margin-left-300 {margin-left: 300px;}
.margin-left-400 {margin-left: 400px;}
.margin-left-500 {margin-left: 500px;}
.margin-left-600 {margin-left: 600px;}
.margin-left-700 {margin-left: 700px;}
.margin-left-800 {margin-left: 800px;}
.margin-left-900 {margin-left: 900px;}
.margin-left-1000 {margin-left:1000px;}
.margin-10 {margin: 10px;}
.margin-20 {margin: 20px;}
.margin-30 {margin: 30px;}
.margin-40 {margin: 40px;}
.margin-50 {margin: 50px;}
.margin-60 {margin: 60px;}
.margin-70 {margin: 70px;}
.margin-80 {margin: 80px;}
.margin-90 {margin: 90px;}
.margin-100 {margin:100px;}
.margin-110 {margin: 110px;}
.margin-120 {margin: 120px;}
.margin-130 {margin: 130px;}
.margin-140 {margin: 140px;}
.margin-150 {margin: 150px;}
.margin-160 {margin: 160px;}
.margin-170 {margin: 170px;}
.margin-180 {margin: 180px;}
.margin-190 {margin: 190px;}
.margin-200 {margin: 200px;}
.margin-300 {margin: 300px;}
.margin-400 {margin: 400px;}
.margin-500 {margin: 500px;}
.margin-600 {margin: 600px;}
.margin-700 {margin: 700px;}
.margin-800 {margin: 800px;}
.margin-900 {margin: 900px;}
.margin-1000 {margin:1000px;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment