Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/niklan/glisseo
Base theme for Drupal 9+. This is mirror from Drupal VCS.
https://github.com/niklan/glisseo
drupal itcss scss theme
Last synced: 3 months ago
JSON representation
Base theme for Drupal 9+. This is mirror from Drupal VCS.
- Host: GitHub
- URL: https://github.com/niklan/glisseo
- Owner: Niklan
- License: gpl-2.0
- Created: 2014-05-30T16:56:12.000Z (over 10 years ago)
- Default Branch: 2.0.x
- Last Pushed: 2023-10-23T06:01:24.000Z (over 1 year ago)
- Last Synced: 2024-10-12T02:14:25.446Z (4 months ago)
- Topics: drupal, itcss, scss, theme
- Language: Twig
- Homepage: https://www.drupal.org/project/glisseo
- Size: 2.59 MB
- Stars: 24
- Watchers: 14
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Base theme for Drupal with starterkit.
## Features
- **Modern CSS** — which includes **CSS variables** for styling and **CSS grids** for layouts!
- **Fully native** — not requires node.js or anything similar, ready to use without any extra steps.
- [ITCSS architecture](https://github.com/ahmadajmi/awesome-itcss) for style structure. If you're not familiar with ITCSS, it's recommended to watch [this presentation](https://www.youtube.com/watch?v=1OKZOV-iLj4&feature=youtu.be&t=524) by Harry Roberts (@csswizardry) to get inspired.
- [BEM methodology](https://bem.info/) for template class naming. In [variation](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) of Harry Roberts (@csswizardry) as well.
The theme provides only a basic styles for HTML elements (and some Drupal specific ones), a small set of tools and a pre-organized structure. This means that you need to design the site and connect all the necessary libraries and extensions by yourself. It's a price for the flexibility and freedom that a theme gives you. It's a canvas with some important brushes.
## Getting started
### Structure of CSS
This theme is uses [ITCSS architecture](https://github.com/ahmadajmi/awesome-itcss).
**It's highly recommended to watch [this video from it's creator with explanation](https://youtu.be/1OKZOV-iLj4?t=524)**.
Each level of triangle is much narrow and used for specific usecase.
At the best, utilities is never used, because they meant to have styles with `!important` key. Use it in the cases where you can't do it without it.
## Starter theme
**STARTER** — the only starter theme. It's fully vanilla CSS and JavaScript.
### Create theme from starter
1. Copy and paste **STARTER_*** folder to `/themes/custom` directory.
2. Rename **STARTER*** folder to name of your theme.
3. Remove **.txt** suffix from **STARTER.info.yml.txt** filename. You should have **STARTER.info.yml**.
4. Rename all files with **STARTER** in its filename:
1. **STARTER**.breakpoints.yml
2. **STARTER**.info.yml
3. **STARTER**.layouts.yml
4. **STARTER**.libraries.yml
5. **STARTER**.theme
5. Replace all **STARTER** strings with your theme name in that files:
1. **STARTER**.breakpoints.yml
2. **STARTER**.info.yml.txt
If you did it right, you can find your theme on the Appearance page and install it. To avoid some problems, it's recommended to enable base theme as well, which is Glisseo. You don't need to make it default, just enable.
## Predefined field templates
Theme provides multiple predefined Twig templates with a field markup and classes. Depending on what you want to achieve and how clean it should be, you can freely switch on a global scope or a specific field.
These templates are:
- `field-with-full-markup.twig`: (default) Adds multiple classes on each wrapper. Classes will be entity-specific and common at the same time. This provides flexibility and full control over you styles.
- `field-with-entity-markup.twig`: Adds only entity-specific BEM classes.
- `field-with-common-markup.twig`: Adds common BEM classes like `field field--name`.
- `field-with-no-markup.twig`: Just field values without any classes and wrappers (label is missing too, even if it's enabled).
Markup examples:
```html
Body
Hello, world!
Body
Hello, world!
Body
Hello, world!
Hello, world!
```
**How to use:** Just include any of this template in any `field*.html.twig` templates like `{{ include('@glisseo/field/field-with-no-markup.twig') }}`. You can override `field.html.twig` and include required template to apply globally or using theme suggestion. That's it!