BEYOND THE BASICS
Code Organization Template
If there was ONE thing I wish I had known on day one it’s this: how to leave myself a note. This would have saved me so. much. time. 🫠
There are over 300 lines of CSS on my website. I used to pile code on top of code, line after line, and anytime I had to change the tiniest thing, it would take me forever (sandlot style foooor-eeeev-errrrr) to track down the right snippet to adjust.
But a few years ago, I discovered that you can actually make notes in your code to label and organize things, and it was a game changer.
/* Here is how to do it */
Did you catch that? Let’s do it again.
/* This is a note */
That’s it! A forward slash, an asterisk, and just like closing our curly brackets, we add an asterisk and forward slash at the end of our note.
Technically you can be a double slasher like this: // note // but I like stars, so I’m sticking with the asterisk technique ⭐
Nowadays, when I sit down to create code, or edit what I already have, I use my notes to easily navigate around my CSS file.
On this page, you’ll see multiple templates that you can use to organize your codes, and I suggest adding to it with your own notes!
Site Wide CSS Template
This template is for important site wide changes that affect fonts, buttons, images, and global elements that are visible on every page.
/* SITE WIDE STYLES - TEXT */
/* SITE WIDE STYLES - BUTTONS */
/* SITE WIDE STYLES - IMAGES */
/* ALERTS */
/* HEADER */
/* FOOTER */
/* MOBILE ONLY */
@media only screen and (max-width: 640px) {
/* mobile menu */
/* mobile styles */
}
/* TABLET ONLY *
@media only screen and (min-width: 641px) and (max-width:950px) {
}
/* DESKTOP ONLY */
@media only screen and (min-width: 951px){
}Collection Page Template
Use this code organization template when you add CSS to the page header code injection for collection pages like online stores and blog posts.
<style>
/* COLLECTION LIST PAGE */
/* COLLECTION ITEM PAGES */
/* MOBILE ONLY */
@media only screen and (max-width: 640px) {
}
/* TABLET ONLY */
@media only screen and (min-width: 641px) and (max-width:950px) {
}
/* DESKTOP ONLY */
@media only screen and (min-width: 951px){
}
</style>
Landing Page Template
Use this code organization template to create a landing page on your site that replaces the standard header and footer with your own custom one for the landing page itself. Learn more about this technique at:
insidethesquare.co/landing-page
<style>
.header, #footer-sections {display: none!important}
/* first page section: header styles */
/* last page section: footer styles */
/* MOBILE ONLY */
@media only screen and (max-width: 640px) {
}
/* TABLET ONLY */
@media only screen and (min-width: 641px) and (max-width:950px) {
}
/* DESKTOP ONLY */
@media only screen and (min-width: 951px){
}
<style>THE TERM “SQUARESPACE” IS A TRADEMARK OF SQUARESPACE, INC.
THIS CONTENT IS NOT AFFILIATED WITH SQUARESPACE, INC.
All Rights Reserved © 2024 by InsideTheSquare.co; 7202 NE HWY 99 #106-167; VANCOUVER WA 98665
For support, please email support@insidethesquare.co