Hyper: A component-first CSS design system.
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.
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
MIT license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent