Skip to content
This repository has been archived by the owner on Jul 26, 2022. It is now read-only.

Using Sass

Adarsh Pastakia edited this page Mar 30, 2017 · 2 revisions

To build custom sass file requires compass

// sass/app.scss
@import url( '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,800italic,300,400,600,800');
@import url( '//fonts.googleapis.com/css?family=Trirong:300italic,400italic,600italic,800italic,300,400,600,800');
@import url( '//fonts.googleapis.com/css?family=Source+Code+Pro');
@import url( '//fonts.googleapis.com/css?family=Lato:300,400');
@import "variables";

// Override theme variables here
$primary   : #582758;
$secondary : #8F1C56;

@import "framework";
# sass/config.rb
require 'compass/import-once/activate'

http_dir="/"
css_dir = "/css"
sass_dir = "/sass"
images_dir = "/images"
javascripts_dir = "/src"
fonts_dir = "/fonts"

add_import_path "node_modules/aurelia-ui-framework/sass/"

output_style = :compressed

relative_assets = true

line_comments = false
gulp sass

Sass Variables

  • Theming Colors
    • primary
    • secondary
    • info
    • danger
    • success
    • warning
    • light
    • dark
    • muted
    • base-bg: Default page background
    • base-text: Default text color
  • Typography
    • base-font-family-serif
    • base-font-family-input
    • base-font-family-fixed
    • base-font-family: Default font family
    • base-font-size: Default font size
    • link-text: Default link color
    • link-hover-text: Default link hover color
  • Application Theme
    • app-header-bg
    • app-header-text
    • app-header-link-text
    • app-header-link-hover-text
    • app-footer-bg
    • app-footer-text
    • page-title-bg
    • page-title-text
    • sidebar-width
    • drawer-width

All sass variable see here


Getting Started

Core Elements
Input Elements
  • UIButton
  • UIFieldset
  • UIForm
  • UIInputGroup
  • UIInput
  • UITextarea
  • UIDate
  • UIPhone
  • UICheckbox
  • UIRadio
  • UISwitch
  • UICombo
  • UITag
  • UIList
  • UIReorder
  • UILanguage
  • UIMarkdown
Components
API Classes
Clone this wiki locally