Hyper – 可爱的sass框架

Hyper – 可爱的sass框架

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 @import way 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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。