https://github.com/ilkeryilmaz/hyper
🎨 Hyper: A component-first CSS design system.
https://github.com/ilkeryilmaz/hyper
bem css-design oocss scaffold scss-files scss-framework scss-library smacss smacss-generator
Last synced: about 1 year ago
JSON representation
🎨 Hyper: A component-first CSS design system.
- Host: GitHub
- URL: https://github.com/ilkeryilmaz/hyper
- Owner: ilkeryilmaz
- Created: 2016-08-28T13:04:52.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-01-16T08:17:58.000Z (over 7 years ago)
- Last Synced: 2025-03-28T08:35:38.993Z (about 1 year ago)
- Topics: bem, css-design, oocss, scaffold, scss-files, scss-framework, scss-library, smacss, smacss-generator
- Language: CSS
- Homepage:
- Size: 146 KB
- Stars: 26
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Hyper
=============
[](https://travis-ci.org/ilkeryilmaz/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