CSS Files
{ H I V E } CSS + Animation Lib | Total 121 kb Compressed
{ H I V E } CSS Framework 92 kb Compressed
Animation Library 29 kb Compressed
JS Files
{ H I V E } JS + All Additional Modules | Total 41 kb Compressed
Pure Javascript / Jquery is not a dependency.
{ H I V E } JS Core Framework 7 kb Compressed
Module – Dom (Jquery replacement) 5 kb Compressed
Module – Utilities 3 kb Compressed
Module – Cookies 1 kb Compressed
Module – CSS Animation 2 kb Compressed
Module – Fn 2 kb Compressed
Module – Safe Elements 1 kb Compressed
Module – Size 2 kb Compressed
Module – Nav 1 kb Compressed
Module – Time 2 kb Compressed
Module – Slider 5 kb Compressed
Module – Accordion 1 kb Compressed
Module – Tabs 1 kb Compressed
Module – Modal 4 kb Compressed
Module – Media 3 kb Compressed
Module – Cue 2 kb Compressed
Module – Affix 1 kb Compressed
Module – Light 3 kb Compressed
Module – Alert 1 kb Compressed
Module – Form 3 kb Compressed
Thought Process
- Always start with ‘v’ to separate framework from theme classes.
- Screen size is determined by single letter.Optional
Eg ‘l‘ for Large (desktop), ‘m‘ for medium (tablets), ‘s‘ for small (phones). - Separation ‘-‘
- First three letters of class property including separators ‘-‘.
Eg ‘bor‘ for border. - Separation ‘-‘
- Lastly we add the first letter of the available property or value.
(May not apply to all cases. Some values are determined by x1, x2, x3 or by direction ‘t’ for top, ‘r’ for right etc)
Examples
- vbor-r: view border right. (Applies to all screens)
- vmar-r20: view margin right 20. (Applies to all screens)
- vm-mar-r20: view medium margin right 20. (Applies to tablets)
Notes
The goal is not to replace inline styling or create CSS soup. The purpose is to have interchangeable class properties for different screens. Only the necessary classes that you wish you had available when correcting mobile layouts.
