https://github.com/smithsonian/drupal-castle-components
Drupal component library using TailwindCSS and AlpineJS.
https://github.com/smithsonian/drupal-castle-components
Last synced: 6 months ago
JSON representation
Drupal component library using TailwindCSS and AlpineJS.
- Host: GitHub
- URL: https://github.com/smithsonian/drupal-castle-components
- Owner: Smithsonian
- Created: 2024-02-23T20:24:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T19:42:34.000Z (over 2 years ago)
- Last Synced: 2025-10-17T08:56:20.204Z (9 months ago)
- Language: Twig
- Size: 550 KB
- Stars: 3
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Castle Components
Drupal component library using TailwindCSS and AlpineJS.
View the [online documentation](https://components.saam.media/).
> [!WARNING]
> This module is under active development, and is not ready to be used in production.
## Install
Install as any Drupal module. It's recommended to use composer.
```bash
composer install smithsonian/castle_components
```
## Extend
To use the components in your theme you'll need to include the module's libraries in your theme's info.yml file.
For example:
```yml
# my_theme.info.yml
name: my_theme
type: theme
libraries:
- castle_components/scripts
- castle_components/tailwind
dependencies:
- castle_components:castle_components
```
Note: Including the `castle_components/tailwind` library will use the package's default TailwindCSS styles. Normally, you'll want to exclude this library, and instead, create a Tailwind config in your custom theme to customize the way components are styled in your theme. An example config:
```javascript
// tailwind.config.js
const colors = require('tailwindcss/colors')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'../../../modules/contrib/castle_components/components/**/*.twig',
'./templates/**/*.twig',
],
darkMode: 'selector',
theme: {
colors: {
primary: colors.blue,
secondary: colors.slate,
accent: colors.red,
success: 'hsl(160, 84%, 39%)',
warning: 'hsl(38, 92%, 50%)',
error: 'hsl(0, 84%, 60%)',
}
},
plugins: [require('@tailwindcss/typography')],
}
```
## Usage
Once configured you can use components in your Drupal theme using Twig [embed](https://twig.symfony.com/doc/3.x/tags/embed.html).
```twig
{% embed 'castle_components:button' with { size: 'large' } only %}
{% block content %}
This is a Castle button
{% endblock %}
{% endembed %}
```
or Twig [include](https://twig.symfony.com/doc/3.x/tags/include.html)
```twig
{{ include ('castle_components:icon', { 'name': 'download' }, with_context=false ) }}
```
## AlpineJS
Many of the Castle components use AlpineJS for interactivity, transitions, and event handling.
You'll want to add the following style to you're HTML head to prevent unstyled components appearing before Alpine is initialized.
```html
[x-cloak] {
display: none !important;
}
```
## Visual Studio Code
For autocomplete helpers copy the `.vscode/castle-components.code-snippets` Snippets file from the module directory into your VSCode project root. More information about [creating your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets).
## Development