a brand new styleguide: Page Sections
Fancy Form Fields
Headers and Footers
Layout and Formatting
Page Sections
Buttons
Colors
Typography
Misc
Slick Carousel
Mixins

Blue

  • blue page section 
    .blue-page-section
  .small-9.small-centered.columns
    %h2 Example Title
    %hr
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

  • blue page section with title lines 
    .blue-page-section.title-lines
  .small-9.small-centered.columns
    %h2 Example Title
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

Circle

For a circle page section, you can use the class name shown here (though customization using the mixin is recommended). This will display the default image shown here.

  • circle page section 
    .circle-page-section
  .hero-section
    .small-12.small-centered.columns
      .hero-circle
      .circle-text
        %h3.bold.circle-text-header Let's Get
        %h1.circle-text-title Started!
        %button.btn-border.cta.apply-btn Apply Today

    • Let's Get

    Started!

Circle Section Customization

To customize the circle, image, and overlay, you can include the mixin called circle-page-section in your own custom class.

The mixin takes the following arguments:

  • $filename - the name of the file you want to use as a background image. (This name will the be automatically wrapped in image_url.)
  • $overlay [OPTIONAL] - the color you would like to overlay the image with. This is set to transparent by default.
  • $circle-color [OPTIONAL] - the color you would like the circle to be. This is set to $la-blue by default.
  • $circle-opacity [OPTIONAL] - the opacity you would like your circle to have. This is set to .6 by default.

Example:

.my-custom-class {
  @include circle-page-section(
    $filename: "launchers.jpg",
    $overlay: rgba(0,0,0,.5),
    $circle-color: $la-green,
    $circle-opacity: .9);
}

Dark

  • dark page section 
    .dark-page-section
  .small-9.small-centered.columns
    %h2 Example Title
    %hr
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

  • dark page section with title lines 
    .dark-page-section.title-lines
  .small-9.small-centered.columns
    %h2 Example Title
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

Image

For a simple image page section, use the class name shown here (though customization using the mixin is recommended). This will display the default image shown here.

  • image page section 
    .image-page-section
  .small-9.small-centered.columns
    %h2 Example Title
    %hr
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

Image Customization

To customize the image and the overlay, you can include the mixin called image-page-section in your own custom class.

The mixin takes the following arguments:

  • $filename - the name of the file you want to use as a background image. (This name will the be automatically wrapped in image_url.)
  • $overlay - the color you would like to overlay the image with. This is set to transparent by default.

Example:

.my-custom-class {
  @include image-page-section("launchers.jpg", rgba(0,0,0,.5));
}

Light

  • light page section 
    .light-page-section
  .small-9.small-centered.columns
    %h2 Example Title
    %hr
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

  • light page section with title lines 
    .light-page-section.title-lines
  .small-9.small-centered.columns
    %h2 Example Title
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

Light Blue

  • light blue page section 
    .light-blue-page-section
  .small-9.small-centered.columns
    %h2 Example Title
    %hr
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

  • light blue page section with title lines 
    .light-blue-page-section.title-lines
  .small-9.small-centered.columns
    %h2 Example Title
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

Pink

  • pink page section 
    .pink-page-section
  .small-9.small-centered.columns
    %h2 Example Title
    %hr
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

  • pink page section with title lines 
    .pink-page-section.title-lines
  .small-9.small-centered.columns
    %h2 Example Title
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

White

  • white page section 
    .white-page-section
  .small-9.small-centered.columns
    %h2 Example Title
    %hr
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

  • white page section with title lines 
    .white-page-section.title-lines
  .small-9.small-centered.columns
    %h2 Example Title
    %p At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

    • Example Title

    At Launch, you’ll learn how to code in the most in-demand languages. We start by giving you a foundation in Rails, and then transition to other languages.

Customization

In addition to the helper classes listed below, there is a mixin called page-section that you can use to customize the colors of your own page sections.

The mixin takes the following arguments:

  • $background-color
  • $header-color
  • $body-color - set to a default of $body-font-color, the value for all body text set in foundation_and_overrides
  • $line-color - describes the colors of the hr underline or title lines. Set to a default of whatever the $body-color variable is set to.

You can include the mixin in your own styles if there isn't an existing helper class that suits your needs! Example:

.my-custom-class {
  @include page-section(
    $background-color: $la-navy,
    $header-color: $la-white,
    $body-color: $la-white
  );
}

This documentation generated using Hologram