Modernizing Drupal 10 theme development build fast, responsive Drupal websites with custom theme design to deliver a rich user experience
A comprehensive guide to creating Drupal themes from scratch, from design to fully styled websites with custom Twig templates and headless architecture Key Features Explore real-world examples with proven methodologies to gain a deeper insight into the Drupal theme layer Learn how to translate a gra...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt Publishing Ltd
[2023]
|
| Edición: | 1st ed |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009764836606719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Dedication
- Contributors
- Table of Contents
- Preface
- Part 1 - Styling Drupal
- Chapter 1: Setting up a Local Environment
- Technical requirements
- Git
- Docker
- DDEV
- Visual Studio Code
- Installing the demo site
- Cloning and building
- Composer
- Configuration management
- Drush
- Default Content
- Yarn
- Exploring the demo site
- Fields
- Paragraph types
- Content types
- Vocabulary
- Blocks
- Views
- Menus
- Disabling production optimization
- Summary
- Chapter 2: Setting a New Theme and Build Process
- Where to start
- Core
- Contributed open source themes
- Commercial
- Custom
- Using a starterkit
- Keeping things updated
- Clearing the cache
- Which tools to use
- Tailwind CSS
- PostCSS
- webpack
- Browsersync
- BackstopJS
- Ensuring coding standards
- Stylelint
- ESLint
- PHPCS
- Setting up a build process
- Summary
- Chapter 3: How Drupal Renders an HTML Page
- What is a template?
- WebProfiler
- Twig
- Custom modules
- What is a render array?
- The dump() function
- Cache
- Controllers and blocks
- Regions
- Controller actions
- Blocks
- How to inject CSS and JavaScript into a template
- Libraries
- Attaching the library to a render array
- Custom CSS
- Custom JavaScript
- Alternate ways to render a controller action output
- Summary
- Chapter 4: Mapping the Design to Drupal Components
- What is a design system?
- Design tokens
- Atomic design
- Storybook
- Splitting mockups into components
- The home page
- The trips page
- The Trip page
- The level page
- The Search page
- The login page
- The Contact Us page
- Forecast page
- Mapping components to Drupal structures
- Menu
- MenuItem
- Block and Region
- Social
- MenuBlock
- Footer
- Picture and PictureWithCaption.
- Slide, Slider, Grid, and Card
- Term and Details
- Body
- Map
- Table
- Trip
- Quote
- Weather and Forecast
- Banner
- Level
- Search result
- User Login
- Summary
- Chapter 5: Styling the Header and the Footer
- Regions and blocks
- Passing PHP variables by reference
- Retrieving the currently active theme
- Rendering an array for (very) simple markup
- Twig's autoescape feature
- How to override a template
- Defining theme regions
- Custom page.html.twig
- Overriding custom templates
- Including templates
- Finding templates
- Template suggestions
- Providing a new suggestion
- Blocks
- Styling menus
- Template preprocess
- Xdebug
- Summary
- Chapter 6: Styling the Content
- Entity, fields, bundles, and display modes
- Bundles
- Display modes
- Media and image styles
- Image styles
- Taxonomy terms
- How to structure content
- Using fields
- Using paragraphs
- Defining a new field formatter
- Plugins
- Customizing the WYSIWYG editor
- Text formats
- Alternative ways to manage content
- Summary
- Chapter 7: Styling Forms
- Understanding forms
- Render elements
- Theme wrappers
- Process, pre-, and post-render
- Altering existing forms
- Styling forms
- Styling generic forms
- Styling specific form
- Summary
- Chapter 8: Styling Views
- View templates
- Using a row plugin
- Using fields
- Exposed filters
- Pagers
- Summary
- Chapter 9: Styling Blocks
- Technical requirements
- Editorial blocks
- Adding a new block suggestion
- Injecting the block content into the template
- Extracting field values from the entity
- Extracting field values using a preprocess function
- Extracting field values using a bundle class
- Programmatic blocks
- Titles and breadcrumbs
- Title
- Breadcrumb
- Summary
- Chapter 10: Styling the Maintenance, Taxonomy, Search Results, and 403/404 Pages.
- Styling the maintenance page
- Styling the taxonomy page
- Styling taxonomy term fields
- Styling the search results page
- Extending Twig templates
- Styling the error pages
- Summary
- Part 2 - Advanced Topics
- Chapter 11: Single Directory Components
- Technical requirements
- The new kid on the block
- Why SDC?
- How to create a component with SDC
- Metadata
- Twig
- CSS
- JavaScript
- Using the component
- Libraries
- Slots
- Overriding CSS and JavaScript
- Overriding a component
- Component metadata
- Integration with Storybook
- Conclusions
- Summary
- Chapter 12: Creating Custom Twig Functions and Filters
- Technical requirements
- Creating a custom Twig function
- Defining a Twig function for a render array
- Using a custom Twig function
- Useful core and contrib Twig functions
- Creating a custom Twig filter
- Useful core and contrib filters
- Summary
- Chapter 13: Making a Theme Configurable
- Technical requirements
- Creating a theme settings form
- Configuration management
- Using theme settings in Twig and JavaScript
- The Twig function
- Using themes settings in JavaScript
- Sub-theming
- Overriding the logo
- Overriding configurations
- Overriding libraries
- Overriding functions
- Overriding regions
- Summary
- Chapter 14: Improving Performance and Accessibility
- Technical requirements
- Performance
- Google Lighthouse
- Core Web Vitals
- Converting images in WebP format
- Responsive images
- Lazy loading images
- Critical CSS
- Accessibility
- ARIA attributes
- Announcing changes
- Accessible methods for hiding content
- Keyboard navigation
- Summary
- Part 3 - Decoupled Architectures
- Chapter 15: Building a Decoupled Frontend
- Technical requirements
- Setting up the environment to build a decoupled site
- RESTful Web Services
- JSON:API.
- Differences between RESTful Web Services and JSON:API
- Authenticated requests
- Introduction to Next.js
- Next.js
- CORS
- Next for Drupal
- Summary
- Index
- About Packt
- Other Book You May Enjoy.
