OpenFarm Style Guide

Hey there! Interested in contributing to OpenFarm's style? We've put together the following to help save you some time and get you up and styling fast. Ready? Let's go!

Staying Classy

The styles in this guide are available to all OpenFarm pages by default. Consider these styles and those provided by Foundation before inventing something new so that we can keep a consistent look and feel across OpenFarm. If there is something new you'd like or something you think could be better please bring it up on Slack (email Rory to get added!) or raise a GitHub issue.

As mentioned, these styles largely build off of Foundation; because of this a lot of the styles we use are not discussed here. If you're not familiar with Foundation, now is a great time to familiarize yourself with it before moving forward. If you've used Bootstrap before, it is extremely similar, but does vary in syntax. If you want to do something really cool and don't see it in Foundation or here, please let us know so we can help :)

The CSS Itself

When contributing to OpenFarm's front-end it's a good idea to use existing views and and partials as a template (we do our best to lead by example, but we're not perfect… yet).

Where Should I Start?

Most stylesheets live in

OpenFarm/app/assets/stylesheets/styles

(the overarching application.css and main.css.scss files livin stylesheets/ but you should only have to mess with these when you add a new partial to main!

Partials and Scoping

All partials (for example _crops.css.scss, _users.css.scss) should contain one root selector that matches the partial name. For example _crops.css.scss should look something like this…

                .crops {

                    .your-selectors-here {...}

                    .more-awesome-selectors {...}

                }

…this prevents scoping issues where someone's class in another partial could override yours without you realizing it! Scope your selectors and don't forget to then wrap applicable views in a div with the matching selector class!

Help! I Need a Global Selector!

If you think you need a global selector, take a moment, think hard, and consider going on a walk. Global selectors are rarely needed, but they are necessary sometimes! It's a good idea to bug the team when you need one, chances are it already exists in some form! Global selectors and variables go in _presets.css.scss.

The Grid

Below is a row (styled so you can see it). They're used to create a max-width on a page. Every row must be filled with at least one column!

This text is contained in one full-width (small-12) column, contained in a row. Inspect and explore!

Foundation's grid is composed of 12 columns. For tons of better examples, check out Foundation's examples.

Generally if you're viewing this on a small screen, the columns will wrap and stack on one another where a vertical layout typically makes more sense. (Note: we've disabled the wrapping on small screens in this example!)

This column has a large-3 and small-6 class, meaning when the page is small enough it will take up half the width of the row. Try resizing the page!

This column has a large-4 and small-6 class, meaning when the page is small enough it will take up half the width of the row. Try resizing the page!

This column has a large-5 and small-12 class, meaning when the page is small enough it will take up the full width of the row. Try resizing the page!

Keep in mind that people view websites on all sorts of screen sizes and resolutions. Make sure your columns don't get too small! That means avoid using columns classes smaller than small-3.

Small, large, what?

If you've reached this point and are confused it probably means you should go check out Foundation's docs. Go ahead and check it out, we'll wait :)

Action Colors

These are based on the standard colors within Foundation.

OpenFarm Primary
$primary-color
primary

OpenFarm Secondary
$secondary-color
secondary

OpenFarm Alert
$alert-color
alert

OpenFarm Success
$success-color
success

OpenFarm Warning
$warning-color
warning

OpenFarm Info
$info-color
info

Navigation Colors

Currently changing, please ignore for now.

OpenFarm Overview
$of-orange

OpenFarm Prerequisites
$of-blue

OpenFarm Timeline
$of-purple

OpenFarm Instructions
$of-green

OpenFarm Usage
$of-red

OpenFarm Forum
#f1c232
$of-yellow

Forms

Use small or tiny buttons. Links can also look like buttons. The following are defaults.

Submit Link Tiny Submit Link

Options: alert, secondary, success

Alerts

Don't use the foundation standard alert. Use .alert-box instead. Use .radius to round them and limit their size with .large-6. Center them with .centered.

This is a success alert. ×

This is an alert alert. ×

This is an warning alert. ×

This is an info alert. ×

Icons

The icon set is still expanding, will probably use a font in the future.

.of-water
.of-temperature
.of-ph
.of-soil
.of-sun-shade
.of-location
.of-practices
.of-time-commitment
.of-physical-ability
.of-time-of-year