Hihi I'm a little HTML/CSS nerd and will be providing snippets that might help you guys! I'll update this every now and again when/if I find anything new or just when I have time.
I believe it's important to know that Sheezy is using Tailwind - something similar to Toyhouse's Bootstrap. However, unlike Boostrap, Tailwind's documentation isn't going to be a lot of use to us, since only parts of Tailwind are used when needed.
Quicklinks
β
Variables
You can read more about CSS variables here. CSS variables are helpful words we can assign information to. For our use case, we can use these variables to match our already established profile colors. This can be a great tool to use if you're creating HTML for other users to use :)
Example
Below is just a demonstration of what using these variables can do. I encourage you to copy and paste this into a custom box to check it out!
π» View Code
<div class="p-15 tablet:flex flex-row flex-wrap" style="
background-color: --profile-body-background-color;">
<div class="p-15 flex-greedy tablet:basis-1/2 max-w-full">
<div class="p-15 h-full" style="
color: var(--profile-block-text, #000);
background-color: var(--profile-block-background-color, #fff);
border-radius: var(--profile-block-border-radius, 1rem);">
Fill in with information! The info after the first variable in var() is a back-up color incase the first color isn't declared.
</div>
</div>
<div class="p-15 flex-greedy tablet:basis-1/2 max-w-full">
<div class="p-15 h-full" style="
color: var(--profile-ribbon-text, #000);
background-color: var(--profile-ribbon-background-top, #fff);
border-radius: var(--profile-block-border-radius, 1rem);">
Another pretty box! This one is using the background and text variables for the profile ribbon :)
</div>
</div>
</div>
Our Profile Variables
This is a full list of profile variables, I've organized them by the edit menu on our profiles.
π¨ View Variables
Page
Text
- Font: var(--profile-body-font-family)
- Body Text: var(--profile-block-text)
- Link Text: var(--profile-block-text-link)
Background
- Image: var(--profile-body-background-image)
- Repeat: var(--profile-body-background-repeat)
- Size: var(--profile-body-background-size)
- Position: var(--profile-body-background-position)
- Color: var(--profile-body-background-color)
Colours
Buttons
- Button: var(--button-override-background)
- Button Hover: var(--button-override-background-hover)
- Button Active: var(--button-override-background-active)
- Button Text: var(--button-override-text)
- Button Hover Text: var(--button-override-text-hover)
Profile Blocks
- Title Bar Background: var(--profile-block-title-background-color)
- Title Bar Text: var(--profile-block-title-text)
- Block Background: var(--profile-block-background-color)
Profile Ribbon
- Gradient Start: var(--profile-ribbon-background-top)
- Gradient End: var(--profile-ribbon-background-bottom)
- Text: var(--profile-ribbon-text)
Decor
Cover
- Image: No variable for this
- Repeat: var(--profile-cover-background-repeat)
- Color: var(--profile-cover-background-color)
Cursor
- Image: var(--profile-body-cursor-image)
Page Doll
- Image: No variable for this
Profile Blocks
- Border Radius: var(--profile-block-border-radius)
- Drop Shadow: var(--profile-block-shadow)
β
β
Grids
I'll be providing a few examples. They'll all work well enough, just depends on the coder's preference and the general use case!
Sheezy's Grid
This is what's used to make our galleries looks so great with ease! You'll only need to change these items in the style to get the grid you want:
- --columns-mobile:3; - The number of columns on mobile you want. Best to have 1 for content and 2 for images
- --columns:6; - The number of columns you want in a row
- --gap:1rem - How big the space between the columns should be
The biggest drawback is that it only breaks on really small screens - so if you have a lot of columns, it's going to look funny on tablets and smaller laptops.
π» View Code
<div class="qcRcq" style="
--columns-mobile:1;
--columns:2;
--gap:2rem">
<div>
Item
</div>
<div>
Item
</div>
</div>
Basic Flex Grid
This one is built using CSS grids. You can view the flexbox in more in depth here, and check Tailwind's documentation on it here. Be warned that Tailwind's use of flexbox is already confusing, and Sheezy has neutered TW's CSS to prevent site bloat.
Below are a few flexbox examples - all of them with break and become one column at 900px.
π» View 1x2 Grid
<div class="tablet:flex flex-row flex-wrap">
<div class="flex-greedy tablet:basis-1/2 max-w-full">
1
</div>
<div class="flex-greedy tablet:basis-1/2 max-w-full">
2
</div>
</div>
π» View 1x3 Grid
<div class="tablet:flex flex-row flex-wrap">
<div class="flex-greedy tablet:basis-1/3 max-w-full">
1
</div>
<div class="flex-greedy tablet:basis-1/3 max-w-full">
2
</div>
<div class="flex-greedy tablet:basis-1/3 max-w-full">
3
</div>
</div>
π» View 1x4 Grid
<div class="tablet:flex flex-row flex-wrap">
<div class="flex-greedy tablet:basis-1/4 max-w-full">
1
</div>
<div class="flex-greedy tablet:basis-1/4 max-w-full">
2
</div>
<div class="flex-greedy tablet:basis-1/4 max-w-full">
3
</div>
<div class="flex-greedy tablet:basis-1/4 max-w-full">
4
</div>
</div>
β
β
Snippets
If I think of anything else that's useful and a lil lesser known, I'll add it here :)
Spoilers
<details style="padding-left:1.5rem;"><summary>Custom Title</summary>
Remove the summary tag if you don't want a custom title.
</details>