Skip to content

Instantly share code, notes, and snippets.

@dasbairagya

dasbairagya/README.md

Last active July 24, 2021 09:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dasbairagya/01ed2af6dabd2b37f2444ecf266f7106 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dasbairagya/01ed2af6dabd2b37f2444ecf266f7106 to your computer and use it in GitHub Desktop.
Download ZIP
🎗️ Drupal 8 theming from scratch 🎗️
Raw
README.md

Simple bootstrap based theme

👉️ Steps:

  • Install drupal via composer

    composer create-project drupal-composer/drupal-project:8.x-dev my_site_name_dir --no-interaction

  • Create a virtual host for the same.

  • Download bootstrap contributed theme using drupal console [drupal theme:download bootstrap] and create a demo theme(blogging)[drupal gt blogging].

  • Extends the theme using bootstrap contributed theme. [not required for now if you already mentioned base theme as bootstrap while generating demo theme say blogging]

  • Download a simple theme and paste into the newly created theme.

  • Create libraries.yml file and add your libraries and update the info.yml file as well.[bassically you have to add the library name[first line of .libraries.yml] to the .info.yml as the value of kye 'libraries' ]

    e.g.

    libraries:
  - bloging/global-styling

  • Go to sites/default folder and copy default.services.yml and rename to services.yml and activate the theme debug in service.yml by doing debug : true under Twig debugging.

  • Disable template caching to have less cache to clear.[in service.yml by doing cache: false under same Twig debugging.

  • Install and activate the Devel,Admin Toolbar, Twig Tweak, Better Exposed Filters and Views Infinite Scroll modules via composer/drush.

    composer require drupal/admin_toolbar and drush en admin_toolbar

  • Activate the kint debuging tool.

  • Template overriding from the core.

  • Clearing the body markup.

  • Implementing the menu wrapper.

  • Implementing the menu item markup.

  • Preparing the two menus from the footer.

  • Arranging the blocks.

  • Implementing the footer markup.

  • Implementing the footer menu markup.

  • Install paragraphs module.

  • Create 3 paragraphs types [3 action, Image with title & Title with text].

  • Modify fields of basic page content types and add a Sections field of type paragraphs.

📌️Building the top segment markup- banner section (from the node):

  • Prepare the fields in the display.

  • Create the image style.

  • Overwrite the node template.

  • Implement the markup for the top segment.

📌️Building the first paragraph section with the icons:

  • Prepare the fields in the paragraph display.

  • Add the dummy content that we are going to style.

  • Search and overwrite the markup from the paragraph templates.

📌️Building the image paragraph section:

  • Create the image style.

  • Prepare the fields in the paragraph display.

  • Add the dummy content that we are going to style.

  • Search and overwrite the markup from the paragraph templates.

📌️Building text paragraph section:

  • Prepare the Fields in the Paragraph display.

  • Add the dummy content that we are going to style.

  • Search and overwrite the markup from the paragraph templates.

📌️Building some pages with the help of our Paragraphs:

  • Change the logo.

  • Change the front page.

  • Create some more pages. (clap)(clap)(clap)

Clone: https://github.com/dasbairagya/webshop.git

Source

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment