The Codebase

Browse all Resources!

Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.

All CSS tricks, 7.0, 7.1, 7.1 CE, Cool look Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, Cool look Beatriz Caraballo

Corner button design (7.0 & 7.1 CE) - Image Block Poster

Create a unique look for your Poster Image Block with this code snippet. You’ll be able to set up the majority of the styles through your regular Site Styles panel, and then control the corner button styles through the code by modifying the existing CSS properties, removing some of them, or adding your own.

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, Mobile design Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, Mobile design Beatriz Caraballo

Keeping horizontal layout on mobile (7.0 & 7.1 CE) - Image Block Card

Depending on how you’re using Card Image Blocks, you may be looking into how to keep the content and the image in a horizontal layout at all times. If that’s the case, this code snippet is for you! With a quick copy/paste you’ll be able to maintain everything side-by-side even on smaller devices, and control the width each part should have.

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, Even height Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, Even height Beatriz Caraballo

Same height for image and content (7.0 & 7.1 CE) - Image Block Card

If you’re working with a Card Image Block and want to have the satisfying feeling of evenness when looking at it, then this snippet is for you. Copy/paste this code and you’ll automatically get the image and content side of your cards matching in height across the site!

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, Hover/overlay, Cool look Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, Hover/overlay, Cool look Beatriz Caraballo

Minimal design with hover mode (7.0 & 7.1 CE) - Image Block Card

Looking for a quick way to spruce up your Card Image Blocks? You got it! This code snippet will allow you to create a rounded minimal style in no time, and allow you to adjust the background color, border radius, shadow intensity, space around the content and hover mode position.

Read More
All CSS tricks, 7.1, Title/Caption Beatriz Caraballo All CSS tricks, 7.1, Title/Caption Beatriz Caraballo

Adding a description (7.1) - Portfolio Page Grid Overlay

Get your hands on this code snippet to add a little description under the title of your Portfolio Page items, when set to the Grid: Overlay layout! Include any text you like, and modify, add or remove CSS properties from the code to style the color, font size, font family and any other font styles you want.

Read More