Hyper
Hyper: A component-first CSS design system.
Folder Detail
1. settings: Global variables, theme confing and typography settings, etc.2. base: Low-specificity, far-reaching rulesets (e.g. normalize, typography, fonts).3. tools: The style files are the main parts of the site is located in this folder.4. elements: Unclassed HTML elements. (eg.a { },hr { },)5. objects: Objects, abstractions, and design patterns (e.g..o-layout {}).6. components: Discrete, complete chunks of UI (e.g..c-carousel {}).7. utilities: High-specificity, very explicit selectors. Overrides and helper classes (e.g..u-hidden {}).8. vendors: Outside library files. (e.g magnific-popup, jquery-ui, )
hyper.scss: Home sass file. You can@importway of typing necessary to your project.
Depending on the structure of your project, you can add new scss files to expand the structure. You're free.
Scaffolding
hyper/
|
|โ settings/
| |โ __all.scss
| |โ _core.scss
| |โ _theme.scss
| |โ _typography.scss
| โฆ
|
|โ tools/
| |โ __all.scss
| |โ _clearfix.scss
| |โ _breakpoints.scss
| |โ _fonts-face.scss
| |โ _rem.scss
| |โ _list.scss
| |โ _grid.scss
| |โ _visibility.scss
| |โ _transition-delay
| |โ _background-retina
| โฆ
|
|โ base/
| |โ __all.scss
| |โ _normalize.scss
| |โ _fonts.scss
| |โ _typography.scss
| |โ _icons.scss
| |โ _reboot.scss
| โฆ
|
|โ elements/
| |โ __all.scss
| |โ _links.scss
| |โ _hr.scss
| โฆ
|
|โ objects/
| |โ __all.scss
| |โ _header.scss
| |โ _main-nav.scss
| |โ _breadcrumbs.scss
| |โ _list.scss
| โฆ
|
|โ components/
| |โ __all.scss
| |โ _button.scss
| |โ _accordion.scss
| |โ _carousel.scss
| |โ _modal.scss
| |โ _slider.scss
| |โ _table.scss
| |โ _box.scss
| โฆ
|
|โ utilities/
| |โ __all.scss
| |โ _clearfix.scss
| |โ _typography.scss
| |โ _heading.scss
| |โ _print.scss
| |โ _visibility.scss
| |โ _float.scss
| |โ _gap.scss
| |โ _responsive-img.scss
| |โ _scroll.scss
| โฆ
|
|โ vendors/
| |โ __all.scss
| |โ _library-file.scss
| โฆ
|
โ hyper.scss # Hyper main scss file
License
MIT license