Skip to content

Instantly share code, notes, and snippets.

@elyseholladay

elyseholladay/app-global.sass

Last active December 20, 2015 20:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save elyseholladay/6188341 to your computer and use it in GitHub Desktop.
Save elyseholladay/6188341 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app-global.sass
// -------------------------------------------------------------- //
// APPLICATION GLOBAL ------------------------------------------- //
// -------------------------------------------------------------- //
// These files need app-required.sass (theme and variables and mixins)
// to load. The files imported here are global CSS that will apply to
// all applications and, ideally, never need to be recompiled per app.
@import app-required.sass // import the stuff required for compile
// Styles
@import utilities/typography.sass
@import utilities/icons.sass
@import symbolset/_symbolset.scss
@import symbolset/_ss-standard.scss
@import symbolset/_ss-symbolicons-block.scss
@import utilities/buttons.sass
// Modules
@import utilities/messages.sass
@import utilities/forms.sass
@import utilities/dropdowns.sass
@import utilities/multiselect.sass
@import modules/action_menu.sass
@import modules/sidebar.sass
@import modules/notifications.sass
@import utilities/lists.sass
@import utilities/tables.sass
@import utilities/pagination.sass
@import utilities/search.sass
@import utilities/modals.sass
Raw
app-required.sass
// -------------------------------------------------------------- //
// APPLICATION REQUIRED FOR COMPILE ----------------------------- //
// -------------------------------------------------------------- //
// These files need are needed be all applications to compile their
// CSS. Please @import app-required.sass in global, shell, & apps.
@import client/theme-client.sass
@import utilities/helpers.sass
@import utilities/colors.sass
@import utilities/grid.sass
Raw
app-shell.sass
// -------------------------------------------------------------- //
// APPLICATION SHELL STYLES ------------------------------------- //
// -------------------------------------------------------------- //
// These files contain styles for application modules and pages that
// are in the shell (header, footer, etc).
@import app-required.sass // import the stuff required for compile
@import modules/admin.sass
@import modules/base.sass
@import modules/panels.sass
@import modules/headers.sass
@import modules/footer.sass
@import modules/login.sass
@import modules/main.sass
@import modules/subscriptions.sass
@import modules/permissions.sass
@import modules/profiles.sass
Raw
layout_includes.html.erb
<!-- this file is what is in the <head> of each HTML page. it calls app-global and app-shell -->
<!-- .. stuff -->
<!-- common include for css in both layouts -->
<%= content_for :application_css do %>
<!-- Theme Stylesheet and Application CSS -->
<%= stylesheet_link_tag "app-global.sass" %>
<%= stylesheet_link_tag "app-shell.sass" %>
<% end %>
Raw
sub-app-application.sass
// this file is in a separate repo and engine, it needs the required sass stuff (for the theme/client the app is running for, the brand_name variable), and then to add its own css
@import app-required
@import modules/dashboard
@import modules/dashboard_form
@import modules/dashboard_list
@import modules/dashboard_tiles
@import modules/dashboardui
@import modules/tiles
@import modules/subscribe
Raw
theme-client.sass
// -------------------------------------------------------------- //
// CLIENT THEME & VARIABLES ------------------------------------- //
// -------------------------------------------------------------- //
// primary color, used for main app panels and icons. use main brand color.
$primary_color_bright: #c2002b
// darker version of the primary color. can be replaced by a specified brand color if one exists. used mainly for hover states.
$primary_color_dark: darken($primary_color_bright,10%)
// highlight color, should be bright and provide significant contrast to primary color.
$highlight_color_bright: #0073cb
// darker version of the primary color. can be replaced by a specified brand color if one exists. used mainly for hover states.
$highlight_color_dark: darken($highlight_color_bright,10%)
// tertiary brand color, used sparingly.
$tertiary_color: $greylight
$alert: $highlight_color_bright
$error: $primary_color_dark
$success: #81a635
// FONTS
$fontPrimary: "proxima-nova", Helvetica, Arial, sans-serif
$fontSecondary: $fontPrimary // change if you want to use a secondary font
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment