NationBuilder is a powerful tool for organizing people online. But just what does that mean?
Well you can think of it as a platform for making websites that also provides a host of integrated tools to help coordinate communities around a common goal, with the website as one part of a multifaceted approach. So in that way, NationBuilder is conceptually different from other platforms on the web and quite a bit more ambitious. It connects your site to a ready-made framework for organizing, coordinating, and communicating with users. It also includes powerful financial tools necessary for many initiatives, and provides optimal control over how it all goes together. NationBuilder serves up an impressive breadth and depth of functionality while still being incredibly customizable, scalable, and flexible.
And that is no easy feat.
For a product like this to be universally adaptable, it has to make trade-offs, which can be limiting. So you need to be aware of its restrictions as well as its functional attributes. NationBuilder is a complex piece of software, but the more you work with it, the more you see the thought that went into making every piece connect as seamlessly as possible.
Radish Lab is now a certified NationBuilder architect so yes, I am biased. We don’t recommend NationBuilder for every project, but it can be a great option for certain types of clients, including nonprofits, educational institutions, advocacy groups, and political organizations; anyone who wants to raise funds, hold an event, boost awareness, spark action, or create a movement.
NationBuilder Website Basics
When getting acquainted with NationBuilder, the control panel is a good place to start. This is where all aspects of an organization’s community are managed. It includes a Dashboard where you can monitor activity as well as sections for the website itself, people, communication, finance, and general settings. A nation can have many websites, but they can all be managed in one place and connected in useful ways here.
The control panel is where most general organization of a website happens. For example, when you create a page here, be sure to choose its page type wisely. There are many options, and whichever one you choose will determine what that page will be set up to accomplish within your site. For example, a signup page type comes ready to collect user submissions, with the preloaded capability to customize a form however you need it.
I'm going to get a bit technical here, so proceed with caution.
NationBuilder is built with Ruby on Rails and uses PostgreSQL for its back-end database, but not much back-end expertise is needed. You also have solid front-end control as well as easy monitoring of comments and activity feeds, advanced spam blocking, reliable server scaling, recruiter and referral tracking, full control over SEO, and built-in Google Analytics.
NationBuilder uses Theme Sync for developing locally on a Mac. Once you create a nation, you’ll want to download it via Theme Sync. Then, you’ll have much greater access to what’s under the hood than the control panel affords you, although you’ll still switch back and forth with the control panel as some stuff can only be done there. It’s also useful to remember the two levels of NationBuilder editing. Theme-level editing is modifying page types across your entire website. To do that from your control panel, go to Website > Theme. Page-level editing is modifying a specific page. This will override your theme level template. To do that, go to Website > Template.
In addition to SCSS and Javascript, NationBuilder uses the open source Liquid template language to access objects and variables. Liquid is based in Ruby and was first developed for Shopify. The two basic types of liquid markup are output and tags. Output variables are used to to display dynamic content. They are surrounded by {{ two curly brackets }} and are replaced with the data they reference. Tags are put inside {% a curly bracket and a percent %} and are used to define logic like for loops or branching logic.
Here’s an example of some liquid template logic:
{% subpage "page_slug" with "features" %}
This will display the content of the _features.html partial template with the settings of the page_slug in question.
So that Liquid code would go in an HTML template file. The most important template files in a NationBuilder project are:
- layout.html wraps every page and includes header and footer.
- _columns_1.html wraps the main content area of a page when the sidebar is turned off.
- _columns_2.html wraps the main content area of a page when the sidebar is turned on.
- _nav.html is the top navigation include.
And the most important stylesheets are:
- _variables.scc contains all variables.
- theme.scss is the mobile first stylesheet which controls the overall look of your website.
- tablet-and-desktop.scss are the styles for people viewing the site on tablet and desktops.
- _navs.scss contains base navigation styles.
- _navbar.scss contains navigation bar styles.
Familiarize yourself with those files and check out what else lives in a nation’s theme and site folders and you’ll have a good understanding of everything that goes into a NationBuilder website. In my next post, I’ll be providing some specific tips and tricks for developing themes on NationBuilder so stay tuned to learn how to customize that website!