{"id":16361546,"url":"https://github.com/niklan/glisseo","last_synced_at":"2025-03-21T00:31:45.218Z","repository":{"id":150757435,"uuid":"20335914","full_name":"Niklan/Glisseo","owner":"Niklan","description":"Base theme for Drupal 9+. This is mirror from Drupal VCS.","archived":false,"fork":false,"pushed_at":"2023-10-23T06:01:24.000Z","size":2721,"stargazers_count":24,"open_issues_count":0,"forks_count":7,"subscribers_count":14,"default_branch":"2.0.x","last_synced_at":"2025-03-01T01:23:27.586Z","etag":null,"topics":["drupal","itcss","scss","theme"],"latest_commit_sha":null,"homepage":"https://www.drupal.org/project/glisseo","language":"Twig","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Niklan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2014-05-30T16:56:12.000Z","updated_at":"2023-08-29T08:09:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"edfd7f84-65ec-4745-92c6-2504ca45f8f2","html_url":"https://github.com/Niklan/Glisseo","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Niklan%2FGlisseo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Niklan%2FGlisseo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Niklan%2FGlisseo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Niklan%2FGlisseo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Niklan","download_url":"https://codeload.github.com/Niklan/Glisseo/tar.gz/refs/heads/2.0.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244094266,"owners_count":20397020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drupal","itcss","scss","theme"],"created_at":"2024-10-11T02:14:14.323Z","updated_at":"2025-03-21T00:31:44.908Z","avatar_url":"https://github.com/Niklan.png","language":"Twig","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://rawgit.com/Niklan/Glisseo/8.x-1.x/logo.svg\" align=\"center\" alt=\"Glisseo Logo\"\u003e\n\n \u003cp align=\"center\"\u003e\n   Base theme for Drupal with starterkit.\n \u003c/p\u003e\n\u003c/p\u003e\n\n## Features\n\n- **Modern CSS** — which includes **CSS variables** for styling and **CSS grids** for layouts!\n- **Fully native** — not requires node.js or anything similar, ready to use without any extra steps.\n- [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\u0026feature=youtu.be\u0026t=524) by Harry Roberts (@csswizardry) to get inspired.\n- [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.\n\nThe 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.\n\n## Getting started\n\n### Structure of CSS\n\nThis theme is uses [ITCSS architecture](https://github.com/ahmadajmi/awesome-itcss).\n\n**It's highly recommended to watch [this video from it's creator with explanation](https://youtu.be/1OKZOV-iLj4?t=524)**.\n\n![ITCSS](https://i.imgur.com/mropqbH.png)\n\nEach level of triangle is much narrow and used for specific usecase.\n\nAt 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.\n\n## Starter theme\n\n**STARTER** — the only starter theme. It's fully vanilla CSS and JavaScript.\n\n### Create theme from starter\n\n1. Copy and paste **STARTER_*** folder to `/themes/custom` directory.\n2. Rename **STARTER*** folder to name of your theme.\n3. Remove **.txt** suffix from **STARTER.info.yml.txt** filename. You should have **STARTER.info.yml**.\n4. Rename all files with **STARTER** in its filename:\n   1. **STARTER**.breakpoints.yml\n   2. **STARTER**.info.yml\n   3. **STARTER**.layouts.yml\n   4. **STARTER**.libraries.yml\n   5. **STARTER**.theme\n5. Replace all **STARTER** strings with your theme name in that files:\n   1. **STARTER**.breakpoints.yml\n   2. **STARTER**.info.yml.txt\n\nIf 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.\n\n## Predefined field templates\n\nTheme 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.\n\nThese templates are:\n\n- `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.\n- `field-with-entity-markup.twig`: Adds only entity-specific BEM classes.\n- `field-with-common-markup.twig`: Adds common BEM classes like `field field--name`.\n- `field-with-no-markup.twig`: Just field values without any classes and wrappers (label is missing too, even if it's enabled).\n\nMarkup examples:\n\n```html\n\u003c!-- field-with-full-markup.twig (default) --\u003e\n\u003cdiv class=\"node-test-body node-test-body--full field field--name-body field--type-text-with-summary field--label-above\"\u003e\n  \u003cdiv class=\"node-test-body__label field__label\"\u003e\n    Body\n  \u003c/div\u003e\n\n  \u003cdiv class=\"node-test-body__value field__value\"\u003e\n    \u003cp\u003eHello, world!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- field-with-entity-markup.twig --\u003e\n\u003cdiv class=\"node-test-body node-test-body--full\"\u003e\n  \u003cdiv class=\"node-test-body__label\"\u003e\n    Body\n  \u003c/div\u003e\n\n  \u003cdiv class=\"node-test-body__value\"\u003e\n    \u003cp\u003eHello, world!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- field-with-common-markup.twig --\u003e\n\u003cdiv class=\"field field--name-body field--type-text-with-summary field--label-above\"\u003e\n  \u003cdiv class=\"field__label\"\u003e\n    Body\n  \u003c/div\u003e\n\n  \u003cdiv class=\"field__value\"\u003e\n    \u003cp\u003eHello, world!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- field-with-no-markup.twig --\u003e\n\u003cp\u003eHello, world!\u003c/p\u003e\n```\n\n**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!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniklan%2Fglisseo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fniklan%2Fglisseo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniklan%2Fglisseo/lists"}