Info

Every kool project has a dot-rc (runtime configuration) file, so it goes without saying ctr also has one. Aside from the “coolness” factor the .ctrrc.yml the file can be an extremely powerful aid to help localize global settings and variables. Implementation is as simple as can be; create a .ctrrc.yml file in the root directory of the project and everything else is taken care of. While the primary purpose for the dot-rc file is to set global ctr options such as the hover duration and or the default ease function, global variables can also be defined in the .ctrrc.yml which is handy for YAML centric implementations.

Notes

Example Configuration

Description: This is an example configuration with the available global options and their set defaults.

Example

## Variables can be referenced in ctr instances

variable:

  colors:

    background: '#eee'

    text: '#555'



## Sets "new" default options

option:

  ## ---------------------------- ##

  ## Animation defaults

  ## ---------------------------- ##

  animation:

    duration: 0.5s

    ease: cubic-bezier(0.420, 0.000, 0.580, 1.000)

    delay: 0s

    count: 1

    direction: normal

    mode: none

    state: running



  ## ---------------------------- ##

  ## Transition and State defaults,

  ## all use the same syntax as transitionDefault

  ## ---------------------------- ##

  transitionDefault:

    duration: 0.5s

    ease: cubic-bezier(0.420, 0.000, 0.580, 1.000)

    delay: 0s

  # transition: inherits from transitionDefualt

  # hover: inherits from transitionDefualt

  # active: inherits from transitionDefualt

  # focus: inherits from transitionDefualt

  # visited: inherits from transitionDefualt

  # link: inherits from transitionDefualt

  # customState: inherits from transitionDefualt



  ## ---------------------------- ##

  ## Media query defaults

  ## ---------------------------- ##

  media:

    xs: 400px

    sm: 600px

    md: 800px

    lg: 1050px

    hd: 1800px



  ## ---------------------------- ##

  ## Grid defaults

  ## ---------------------------- ##

  grid:

    flexbox: true

    gutter: 30px

    rtl: false



  ## ---------------------------- ##

  ## Responsive Type defaults

  ## ---------------------------- ##

  type:

    rootSize: 16px

    fontSize:

      minSize: 12px

      maxSize: 21px

      # Defaults to the first and last property of media

      minWidth: null

      maxWidth: null

    letterSpacing:

      minSize: 3px

      maxSize: 10px

      # Defaults to the first and last property of media

      minWidth: null

      maxWidth: null

    lineHeight:

      minSize: 1rem

      maxSize: 2rem

      # Defaults to the first and last property of media

      minWidth: null

      maxWidth: null



  ## --------------------------------------------- ##

  ## Global options control the inner workings of ctr

  ## --------------------------------------------- ##

  global:

    ## ---------------------------- ##

    ## style specific options

    ## ---------------------------- ##

    # animationShorthand: To use animation property shorthand syntax 

    animationShorthand: false

    # checkLocally: Check for global option properties within the root of every ctr instance

    checkLocally: true

    # classLock: Lock all class styles, so that they can not be overwritten or altered unless specifically specified

    classLock: false

    # doubleColon: All applicable pseudo-elements should use double colon syntax, rather than single colon syntax

    doubleColon: true

    # editColor: The default color for the edit helper

    editColor: rgba(0,0,255,0.1)

    # errorSuppress: Suppress all ctr errors

    errorSuppress: false

    # processBy: How ctr process the instance, refer to docs - basic/processing

    #            possible values: 'level' 'order'

    processBy: level

    # processMedia: Process media queries

    processMedia: true

    # processStyle: Process CSS property styles 

    processStyle: true

    # processMedia: Process animation timeline @keyframes

    processTimeline: true

    # queueAnimation: Place the generation of animation timeline @keyframes styles at the end of the queue, to be processed after the main styles

    queueAnimation: true

    # queueMedia: Place the generation of media query styles at the end of the queue, to be processed after the main styles

    queueMedia: true

    # sort: The sorting source order for generated CSS

    #       possible values: 'len', '-len', 'abc', '-abc', false

    #       Docs: basic/general/#sort-order

    sort: len

    # stateOmitList: States that should not generate transition properties

    stateOmitList: [link, visited, optional, required, valid]

    # transitionOmitList: Values that should not generate transition properties

    transitionOmitList: [content, postion, cursor, display, clear]

    # transitionShorthand: To use transition property shorthand syntax 

    transitionShorthand: false



    ## ---------------------------- ##

    ## process specific options

    ## ---------------------------- ##

    # comment: Custom comment for write method

    comment: false

    # commentFile: Included ctr source file path in comment

    commentFile: true

    # duplicateCSS: Allow for duplication of exact CSS styles

    duplicateCSS: false

    # localVariableUpdate: Allow local variable sibling reference. Default value is true for Stylus but not for Javascript because, well, your in Javascript

    #                      Docs: variable/general/#localVariableUpdate

    localVariableUpdate: true

    # memoize: Memoize results internally

    memoize: true

    # privateVariable: Allow the use of private local variables, ie _<var>_. Default value is true for Stylus but not for Javascript

    #                  Docs: variable/general/#privateVariable

    privateVariable: true

    # propertyReplace: Allow the use of property replacement. Default value is true for Stylus but not for Javascript

    #                  Docs: variable/general/#propertyReplace

    propertyReplace: true

    # rcPath: .ctrrc location path, by default it searches the root dir

    rcPath: false

    # requireWatch: requireWatch Function for ctr-loader

    requireWatch: false