Documentation

About this site

The Why

We created this template to make it easier for everyone to be able to stand up site to help raise awarenesses about social issues.

I was reading a story on Lebron James, when I came across his new site for morethanavote.org. It was a beautiful site, but when it launched, there wasn't much there when it came to how I, a visitor, could take action. They've added more functionality since launch, but I thought about the wide range of issues we face today and wondered how we could make it easy to help people raise their voice.

The answer was V1 of this template. With this project, you'll be able to quickly change the way this site looks to match your brand and issue, but you'll get a core functionality that will make it easy for your audience to contact their elected officials.

The Who

This project was built by Ben Parker for Visual Dev FM.

Getting Started

Clone this project

To get started, clone this project by clicking on the button below:

Clone this site

Set this page to draft

Once you clone this project, before you publish make sure to set this page to draft. You can do that by clicking on the pages menu, clicking on the cog wheel or settings for this page, then in the top right hand corner of the pages menu where you can save your settings, choose save as draft.

You can learn more about how to save pages as draft at Webflow University.

Once you're finished with these instructions or if you don't need them, you can also delete this page.

The Data

The data in this project comes courtesy of the ProPublica Congress API. I will keep this data up to date using Parabola. The ProPublica API is free to use and has a lot of great data points.

To update the data, you can delete the House and Senate members and the use our Parabola flows. You'll need to sign up for a key (it's free) from the Pro Publica API, then use that and your Webflow account to reconnect these Parabola flows.

You'll just need to create a new flow in Parabloa (one each for the house and Senate) and paste these values in your blank flow.

For the Senate:


parabola:cb:3313d0f8d99d4256bc565986da9150bc

‍

For the House:


parabola:cb:ab0e197788c04363bea733c1730421b5

‍

The style guide

The style guide lives on the style page and is where you can start with customizing the look and feel of this site.

The body and basic fonts

If you select the body tag (select the body, select a class, choose "Body All Pages"), this is where the font settings are set. We're using Poppins from Google Fonts, but you can use whatever you like. Our body font is set to 16px and we're using unitless line height.

Headings

The headings are set using the "All Headings" tags for each (H1 - H6). You can change their style there.

Colors

At the top, you can see color blocks. These and all elements are tied to global swatches in the color panels. Editing the colors in the swatches will change these color blocks as well as the colors of all the other elements (buttons, links, etc.).

Buttons and links

There are a few different options for buttons you can use.

The base class you can use is Button. But you can Also use Button with a combo class of Secondary to get your button to use the secondary color.

Additionally, you can use Button with Trailing Icon and Leading Icon to add an icon to the button. You can also use the Secondary class here as well.

Inputs and Forms

For inputs, since there isn't an option for all inputs, we're using the class Input.

Columns and Containers

Instead of using the native container element, I'm using a div with the class Container. The max width for the container is 1200 px. If you need a container that is better for content and readability, you can use the Narrow Contain class.

For colums, I'm using the grid. You can just add a div and use the class, 2 Columns, 3 Columns, or 4 columns depending on what you need.

Symbols

There are two symbols being used in this project. The first is the Nav which is, obviously the Navigation Menu and the second is the footer.

There is something special in the Nav Menu. This site was built with accessibility in mind so there is a skip to content link in the symbol.

This means, you'll need to make sure you have a section or some content on every page that has an id of main. To keep things semantic, make sure it's inside a main tag.

On the element with the id of main, you'll also need to make sure it has a custom attribute of tabindex="0". This will make that content focusable.

In this project, in the before body code area, we're loading a javascript file titled location.js. In this file there is some code that listens for a click on the skip to content link and then focuses the content with an id of main. The code looks like this:


// When you click the button with an ID of skip
$("#skip").click(function () {
  // focus on the element with an ID of main
  document.getElementById("main").focus();
});

If you need to remove this functionality you can just delete the button in the Nav symbol. The code in location.js shouldn't cause any additional issues.

The footer is unremarkable and there isn't anything there that you'll need to be specifically aware of.

Pages and Custom Code

Home and About

The home and about pages don't have any special functionality to be aware of. There is placeholder content you can replace, remove, or add to any way you like!

Contact

The contact page has quite a bit of functionality to it, but you shouldn't need to know how to code for it to work for you. But, I do want to explain what's happening.

When a user clicks on a "I live here" button, we set an item in local storage. We copy the HTML and the content of the entire location they clicked on and set that as the local storage value.


// Add a location as a favorite in localStorage
// When you click a button with the class of .live-button
$(".live-button").click(function () {
  // Let myLocation = the html of the .location-grid element
  let myLocation = $(this).closest(".location-list-item").html();
  // Set that html as the value in local storage with the key of mylocation
  localStorage.setItem("mylocation", myLocation);
});

When they click that button, they're also redirected to their home states page. But, when they come back to the contact page we run a script.


// If else statement, this checks whether there is a mylocation in localStorage
$(document).ready(function () {
  // If there is a mylocation in localStorage
  if ("mylocation" in localStorage) {
    // set a variable called currentLocation and make the value the mylocation localStorage item
    let currentLocation = localStorage.getItem("mylocation");
    // append that html in local storage to the .yourlocation div
    $(".yourlocation").append(currentLocation);
    // style .yourlocation by removing the border and changing the background color
    $(".yourlocation").children().css("border-bottom", "none");
    $(".yourlocation").children().css("background-color", "transparent");
    // change the text of the button so it's different that when it's in the list
    $(".yourlocation").find("a").text("Contact your reps!");
    // make sure to show the .current-location-wrapper
    $(".current-location-wrapper").show();
  } else {
    // if there's nothing in localStorage, remove.current-location-wrapper
    $(".current-location-wrapper").remove();
  }
});

We check to see if they've clicked a "I live here" button before. If they have, we display a section with the class Current Location Wrapper

If you want to change the design of that area, just select it in the Navigator, and set it to display: block. Then, when finished, just make sure that you set it back to display: none.

IMPORTANT: there is a div inside the Current Location Wrapper with the class yourlocation. Do not remove that div. The code will append the location the user clicked (that's now in local storage) to that div.

We also provide a button that allows a user to clear a location after that has been set. This simply removes the item from local storage.

We're also using listjs on the contact page to let users filter by state.

Click to Tweet

When a user visits a state page, they can see all of the elected officials for that state. Then they can click to tweet any individual. On the collection page at the very bottom there is a script that runs all of this functionality.

The good news it, this is using the CMS! To change this, go to the Issue's collection and then select the issue that's there and edit it.

Or, you can create a new issue. The tweet function will use the newest issue. You can change the share url and the copy for the tweet with having to mess with any custom code.

Credits

The art in this project comes from the free Streamline Icons election set. The other icons come from Remix Icon.