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.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Dot-style cards - Auto Layout simple list (7.1)

Looking for a cool dynamic effect to add to your Auto Layout Simple List cards? Look no further! With this copy/paste plugin you’ll be able to add a clean static style and eye-catching hover mode in a single swoop. Plus, through the snippet settings you’ll get to control the color of the “dots”, set up two titles with their own styles, and manage how visible the image becomes on hover, to fully match the look of your section to the rest of your project.

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

Dot-style cards - Auto Layout carousel (7.1)

Looking for a cool dynamic effect to add to your Auto Layout Carousel cards? Look no further! With this copy/paste plugin you’ll be able to add a clean static style and eye-catching hover mode in a single swoop. Plus, through the snippet settings you’ll get to control the color of the “dots”, set up two titles with their own styles, and manage how visible the image becomes on hover, to fully match the look of your section to the rest of your project.

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

Expansive cards on hover - Auto Layout Simple List (7.1)

Add a little something something to your project’s Auto Layout Simple List with this cool hover mode expansive effect. You’ll be able to set a custom icon for all the cards to mark them with your site’s brand, continue to modify the settings of the text through the native options, control the thumbnails saturation/opacity levels on both the initial and hover mode, and automatically get a sleek and responsive look on tablets and mobile, regardless of how many cards you set up on desktop!

Read More
All CSS tricks, 7.1, Cool look Beatriz Caraballo All CSS tricks, 7.1, Cool look Beatriz Caraballo

Side-by-side thumbnail and content - Auto Layout Simple List (7.1)

If you’re looking for a quick way to display your Auto Layout Simple List items in a horizontal fashion, this is the snippet for you! You’ll get to decide whether the image sits to the right or left side of the text, choose the thumbnail size, adjust the spacing between elements, and even pick at which mobile breakpoint you’d like the slides to go back to their vertical look.

Read More

Bordered items with hover overlay - Auto Layout Carousel (7.1)

Give your Auto Layout Carousels a super custom look with this code snippet! It’ll instantly add a border to your list items, create an overlay on hover with the icon of your choice, and you’ll even be able to set up a floating label with whichever text you want to highlight on each slide!

Read More
All CSS tricks, 7.1, Carousel/slideshow controls Beatriz Caraballo All CSS tricks, 7.1, Carousel/slideshow controls Beatriz Caraballo

Inactive arrow style (7.1) - Auto Layout Carousel

There’s no shame in being a control freak! Manage the opacity/transparency level of your 7.1 Auto Layout Carousel inactive pagination arrow with this short snippet. With some small tweaks to the values of the code, you’ll be able to decide how this element should show up on your site.

Read More
All CSS tricks, 7.1, Carousel/slideshow controls Beatriz Caraballo All CSS tricks, 7.1, Carousel/slideshow controls Beatriz Caraballo

Custom arrow titles (7.1) - Auto Layout Carousel

Loving the Auto Layout Carousel but not a fan of the native arrow look? Then get your hands on this little code snippet to add some custom titles to those pagination elements and make them look completely personalized and on-brand! You’ll be able to adjust the font styles to your needs, so that everything matches your existing design.

Read More