Read Order¶

This is the read/learn order I recommend you take.

General Sections¶

Each feature is made up of sub-features. If a sub-feature is ordered alphabetically, disregarding General and Feature, it means the read order is of little importance. If a sub-feature is not ordered alphabetically, it means the read order is important and it should be read from top to bottom. The same goes for the examples/topics within each sub-feature. For better or worse, I apologize to the alphabetical snobs out there, but I felt this was the best option. The following is a general overview of what each sub-feature entails.

General: An overview of the feature. It includes the syntax structure, the basic premise and functionality along with other bits of helpful information.

Key: Covers the Object key syntaxes that can be used to create/implement the feature.

Object: Details how multiple instances of a feature can be grouped together to share common properties and values.

Specific Option: As the name implies, options that are specific to the feature.

Target Option: Options that target the selector and are the same across all features.

Feature: Demonstrates the use of the feature in other features.

Every example has a Description which is a formal-ish explanation of said example. Additionally, some particular examples have Notes which can range from general thoughts to helpful tidbits and everything else in-between.

Syntax & Symbols¶

Language

• List: In Stylus, an Array is called a “List” and like an Array, a List is a collection of values absent of the commas , and brackets [ & ]
  • If you are using ctr outside of Stylus, you need to use typical Javascript Array or YAML syntax

Syntax

• <#selector>: The selector for the ctr instance which can be any CSS selector value
• <identifier>: Represents the identity of the feature in some shape or form
  • For example, the <identifier> for animation is the animation-name
• |: The pipe operator represent the keyword “or”
• <...>: <...>: Any CSS property and key-value pair

Symbols

• Verified
  • Signifies a method that I prefer to use and use often; take it with a grain of salt
• MDN tag MDN
  • Link to Mozilla Developer Network for documentation reference

Code Examples¶

Every example has an interactive code example in both Stylus and YAML, and it’s my hope that somewhere in between the description, notes, and the interactive code example you will be able to find meaningful context. The following are some helpful tidbits of information about the interactive code examples.

Helpful Tidbits

• To initate the interactive examples, the “Interactive Examples” checkbox must be clicked.
• The interactive examples are similar to that of codepen.io or similar ilk, just specifically tailored for ctr with error reporting both on screen and in the console. While both ctr and Stylus have been slightly modified to work with the browser, they both are full-fledged, and all features should work.
• Custom syntax highlighting: Both Stylus and YAML have the same custom syntax highlighting applied.
  • Green: ctr instances, classes, or set Functions.
  • Blue: features such as animation, element, etc.
  • Orange: special features keys like option, key, etc.
• To activate an interactive example either click the “Edit” button at the bottom-right corner of the code example or just click inside the code to start editing.
• Full-screen mode: f11 to go full-screen and esc to close.
• Keybinding is set to Sublime. Life is too short, so love the one you got.