Learn what architectural design principles does the Victoria UI Kit follow. Its understanding is crucial to be able to build advanced ,


Project adheres to Semantic Versioning. All releases and pre-releases are tagged in GitHub and changes summarised in project's changelog.

PRO TIP: If you are including the library through a package manager (Bower, npm etc.), it is safe to assume that minor releases will not introduce any breaking changes - whenever a minor version is released, you can let your package manager auto-update the library.



Bourbon and Neat frameworks

ITCSS Architecture

Victoria UI Styles follows Inverted Triangle Cascading StyleSheets (ITCSS) architecture - a set of principles and practices by which developers should group and order their CSS in order to keep the styles scalable, terse, logical, and manageable.

Simply said, ITCSS is building styles in layers from the lowest to highest specificity (~ from most generic rules to least generic rules).

As the specificity of every layer is gradually increasing, styles in every layer can easily build on top of the styles from all the layers before them (top to bottom):

This leads to a cleaner and more maintainable stylesheets:

Layers and structure

The library separates the styles into following layers, each represented by similarly named folders (ordered from most generic to least generic):

By not following ITCSS structure when extending or overriding the Victoria UI Styles, your code can become hardly maintainable as your project grows. ITCSS keeps the separation of concerns high.

Learn more about ITCSS