So I know we developers love coding everything from scratch. But I've made a Shopify app (Design Packs) that is a collection of sections and templates and I've started using it for my own development projects and it is bringing me joy.
As much as I love creating new and exciting things with code, I don't necessarily love coding variations on the same component over and over.
Since my app partner and I are both developers, we've created Design Packs in a way that is very developer friendly. We've created the ability to add section specific CSS that is scoped to each individual section.
I wanted to share my experience with creating custom themes based on designs given to me by an outside firm with Design Packs.
Video
Custom CSS
.dsgn-pck__small-heading {
font-size: 32px;
border-bottom: 1px solid;
padding-bottom: 32px;
text-align: center;
}
.dsgn-pck__text p:first-of-type {
font-family: monospace;
font-weight: 500;
font-size: 16px;
line-height: 122%;
letter-spacing: 0.1em;
}
.dsgn-pck__text p:nth-of-type(2) {
font-weight: 700;
font-size: 64px;
margin-bottom: 16px;
margin-top: 16px;
}
.dsgn-pck__text p:nth-of-type(3) {
font-size: 24px;
border-bottom: 1px solid;
padding-bottom: 48px;
padding-right: 16px;
}
.dsgn-pck__text p:nth-of-type(4) {
font-family: monospace;
font-weight: 500;
font-size: 16px;
}
.dsgn-pck__text p:nth-of-type(5) {
font-family: 'muli';
font-weight: 700;
font-size: 64px;
margin-bottom: 16px;
margin-top: 16px;
}
.dsgn-pck__text p:nth-of-type(6) {
font-weight: 100;
font-size: 24px;
border-bottom: 1px solid;
padding-bottom: 48px;
padding-right: 16px;
}
Mobile Custom CSS
.dsgn-pck__heading {
width: 80%;
margin: 0 auto;
margin-bottom: 32px;
}
.dsgn-pck__small-heading {
font-size: 32px;
padding-bottom: 20px;
}
.dsgn-pck__text p:nth-of-type(2) {
font-weight: 700;
font-size: 48px;
}
.dsgn-pck__text p:nth-of-type(3) {
font-weight: 400;
font-size: 16px;
padding-bottom: 16px;
}
.dsgn-pck__text p:nth-of-type(5) {
font-weight: 700;
font-size: 48px;
}
.dsgn-pck__text p:nth-of-type(6) {
font-weight: 400;
font-size: 16px;
padding-bottom: 16px;
}