Advanced Classy Layouts (Part 4):Fraction-Based Layouts

*This post is part of a series. Please check out Advanced Classy Layout Templates to get the full context for this post.

**This post and the available download requires a working knowledge of HTML/CSS. Need to brush up on your skills? Check out w3schools.com to learn the basics for HTML/CSS.

Fractions… I almost hesitate using that word here, for fear of scaring you off. But I promise this is easier to edit than it sounds. 

Unlike the auto-width layouts, the fraction-based layouts are designed to allow you to make multiple columns of varying size in a single row. Use this type of layout when you want one or more columns in a row to be wider than others. For example, you may build a 1/3—2/3 layout with a fraction-based grid. This can be especially helpful for things like speaker bios at an event, or a small image to represent an activity or just add some character to the page.

Let’s take a look at the HTML code for this section:

FRACTION-BASED LAYOUTS HTML CODE 

<div class="bg-oatmeal-30 grid-container">
      <div class="grid-item">
        <img class="py-2" src="https://images.unsplash.com/photo-1643321611132-15f7b8a63347?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470" alt="">
      </div>
      <div class="grid-item">
        <div class="py-2">
            <p class="font-20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero nulla, molestie sed vestibulum id, aliquam nec sapien. Mauris viverra feugiat libero, vitae dignissim purus. Cras eros turpis, sagittis ac ipsum sed, dictum mollis metus. </p>
            <p><a rel="nofollow" style="margin-bottom:60px;"  href="#" class="btn btn-primary"style="padding-top:15px;padding-bottom:15px;">Customizable Button</a></p> <!-- This is how to add a button. -->
        </div>
      </div>
  </div>

In the code, you’ll notice that there is one big “grid-container” div with several smaller “grid-item” divs inside of it. This is the foundation for the grid system’s rows and columns. The “grid-container” is the whole row, and the “grid-items” are the items that end up in each column. 

Down in the CSS section, the number and width of each column is defined under the “grid-template-columns:” property of the “grid-container” class. This template is set up to use a fraction-based setting for the columns, meaning that each column’s width is defined as part of a whole. If you want all the columns to be the same exact size, check out this post on Auto-Width Layouts. Here’s an example of where the number of columns and widths of the columns in a container is defined with fractions under the grid-template-columns property:

So, what you do is you set up the parent container, add items inside it, then tell the parent container how many columns and what relative width each column should be, from left to right in the CSS. In the example above, the first column in the row should be 1 part of the whole width, while the second column should be 2 part of the whole width.

FRACTION-BASED LAYOUTS CSS CODE 

Here’s the full CSS block, including several “@media” breakpoints that adjust the styles for various screen sizes. Notice how the padding on the grid-container class changes for each breakpoint. 

To modify the number columns in a row at various screen sizes, modify the “grid-container” class at each “@media” breakpoint. This allows you to force the page into less columns on smaller screen sizes. Often the smallest mobile phone view is just a single column.

Use the “fr” measurement to determine how many columns there should be and what width each column in a row should be. So a 1/3—2/3 layout would be: “grid-template-columns: 1fr 2fr;” because you are telling it to make the first column take up 1 part of whole the row and to make the second column take up 2 parts of the whole row. A three column grid with a wider middle column would be “grid-template-columns: 1fr 2fr 1fr;” where each number is a fractional measurement of how wide the columns should be, and by listing three numbers, you are telling it to make three columns.

It’s a little more complicated than the Auto-Width Layout template, but if you specifically need larger column widths on specific areas, this template can be really useful.

In the CSS, you’ll see I’ve broken up the styles into sections for:

• Button design
• Text formatting
• Layout styles for adjusting the content for a background image, if necessary
• Responsive grid layout styles
• Vertical Padding default classes

/* Web-Button Styles */
 .btn {margin:1em 0 60px 0;text-decoration:none;text-transform: uppercase;}
 a.btn {color:#fff;}
 a.btn:hover {color:#fff;} 
 .btn-primary {background:#62b1bd;border:0px solid #fff;border-radius:0;font-size:1.25em;padding:0.5em 2em;}
 .btn-primary:hover {background:#202945;border:0px solid #fff;border-radius:0;font-size:1.25em;padding:0.5em 2em;} 

 /* Text-and-Layout Formatting Options */
 h1,h2,h3,h4,h5,h6,p {font-family:Arial, Helvetica, sans-serif;} 
 .text-center {text-align: center;} 
 .text-white {color:#fff;} 
 .underline {text-decoration:underline;} 
 .text-center img{margin-left:auto;margin-right:auto;display: flex;align-content: center;} 
 .font-20 {font-size:20px;} 
 .font-30 {font-size:30px;} 
 h1 {font-size: 3em;line-height: 1.5em;font-weight: bold;color: #fff;}
 h2 {font-size: 1.75em;line-height: 1.5em;color: #fff;}

 /* Layout Styles */
 /* Page Hero */
 .bg-img {padding: 45% 5% 2% 5%;background-size:cover;background-position: center top;} 
 @media only screen and (min-width: 600px) {
 .bg-img {padding: 10% 5% 2% 5%;background-size:cover;background-position: center top;}
 }
 /* Rows/Columns */
 .grid-container {align-items: start;}
 /* For mobile phones: */
 .grid-container {display: grid;grid-template-columns: auto;gap: 40px;padding: 2% 5% 0 5%;}
 .grid-item {padding: 0 5%;}
 .grid-item img {margin-left:auto;margin-right:auto;width:100%;align-content: center;}
 /* For tablets: */
 @media only screen and (min-width: 600px) {
 .grid-container {display: grid;grid-template-columns: 1fr 2fr;gap: 40px;padding: 0 5%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
 /* For desktop: */
 @media only screen and (min-width: 900px) {
 .grid-container {display: grid;grid-template-columns: 1fr 2fr;gap: 40px;padding: 0% 10%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
 @media only screen and (min-width: 1024px) {
 .grid-container {display: grid;grid-template-columns: 1fr 2fr;gap: 40px;padding: 0% 10%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
 @media only screen and (min-width: 1400px) {
 .grid-container {display: grid;grid-template-columns: 1fr 2fr;gap: 40px;padding: 0 25% 0 25%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }

 /* General */
 .clearfix {clear:both;}

 /* Padding options (increments of 10px, from 10px to 60px). Class names match Bootstrap classes. */
 /* Padding Top */
 .pt-1 {padding-top:10px;}.pt-2 {padding-top:20px;}.pt-3 {padding-top:30px;}.pt-4 {padding-top:40px;}.pt-5 {padding-top:50px;}.pt-6 {padding-top:60px;}
 /*Padding Bottom */
 .pb-1 {padding-bottom:10px;}.pb-2 {padding-bottom:20px;}.pb-3 {padding-bottom:30px;}.pb-4 {padding-bottom:40px;}.pb-5 {padding-bottom:50px;}.pb-6 {padding-bottom:60px;}
 /* Padding Y axis */
 .py-1 {padding-top:10px;padding-bottom:10px;}.py-2 {padding-top:20px;padding-bottom:20px;}.py-3 { padding-top:30px; padding-bottom:30px;}.py-4 { padding-top:40px; padding-bottom:40px;}.py-5 {padding-top:50px; padding-bottom:50px;}.py-6 { padding-top:60px; padding-bottom:60px;}

The vertical padding options are a quick way you can add spacing around an element by adding a simple class to a tag. You’ll notice “pt, pb, and py” which mimic the Bootstrap class names for padding-top, padding-bottom, and padding on the vertical y axis (both top and bottom). These allow you to quickly add incremental spacing to elements within the layout, for refining the spacing around elements as needed.

USING THE TEMPLATE

Once you download the template, you’re ready to start planning your page. If the page will have complex content, or you’ve never built a custom code block before, I recommend starting with a wireframe to plan the content for your page. You can learn more about how to do that in my blog titled Laying It All Out.

Now that you have a plan for how you want to lay out the content on the page. Let’s dive into setting up the template:

1. Open the HTML/CSS template in a code editing software like Visual Studio Code or a plain text editor like Notepad.
2. Open a Classy Peer-to-Peer campaign, Event, or Crowdfunding campaign and navigate to the page editor section of the campaign
3. Select the landing page of your campaign (Don’t forget, there are limitations to where you can use custom code blocks on donation pages, thank you pages, and team or individual fundraising pages. Learn more here.)
4. Select the Design tab on the right, and scroll down to click the “ADD CONTENT TO PAGE” dropdown on the left
5. Select the “</> Custom” block type and drag it into place on the page layout list on the left
6. Open the HTML/CSS template in your code editor and copy and paste the sections labeled <!– HTML CODE –> and <!– CSS STYLES –> into the HTML and CSS tabs of your new custom code block.
7. (Optional) If you want to add a background image or background color to the section, scroll down to the “UPLOAD BACKGROUND IMAGE” button on the left in order to add an image to the background of your custom block. You’ll have to add any blur to the background image by editing it in a tool like Photoshop, but the Custom code blocks do allow you to change the opacity of the image (to darken or lighten it with a background color) and change the image position settings. For a parallax type of effect, select Cover & Fixed as the image position.  

You may notice that the page preview appears funny if the CSS styles have not been added. Sometimes the preview version of the page doesn’t look exactly like it will look on the live page anyway, so I recommend opening the page in a new tab and refreshing it to see any updates you save. 

Speaking of which, save the page now and open the landing page in a new tab to see if the template has been added properly. 

To modify the code, either edit the code in your code-editing software on your computer, copying and pasting the updates into Classy, or edit the code in Classy directly. I recommend making a copy of the original files each time to modify them for a new campaign, that way the original files always remain intact, and you can delete the copy and start over if you accidentally break something in the code.

Learn more about the CSS Grid System here: https://www.w3schools.com/css/css_grid.asp