web-illinois / illinois_framework_theme

An Illinois branded Drupal theme based off of the bootstrap4 theme.
5 stars 1 forks source link
drupal drupal-theme illinois-framework sass

Illinois Drupal Framework Theme

NOTE: This theme is intended to be used as part of the Illinois Drupal Framework Distribution. Using this theme without the profile and core module is not supported. Instructions on how to set up the Illinois Drupal Framework Distribution within cPanel can be found at https://github.com/web-illinois/illinois_framework_project.

Customizing your site by creating a sub-theme

If you wish to customize the look and feel of your Illinois Drupal Framework website, creating a sub-theme is recommended. To create a sub-theme, follow the steps below. This is assuming a site is set-up using the steps found at https://github.com/web-illinois/illinois_framework_project

image

After generating your sub-theme with Drush, you'll need to modify the regions of your theme to match the Illinois Framework Theme. Replace "MY_THEME" with the machine name of your sub-theme.

regions:
  header: Header
  nav_main: 'Main navigation region'
  breadcrumb: Breadcrumbs
  highlighted: Highlighted
  help: Help Information
  tabs: 'Tabs'
  content: 'Main content'
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  footer: Footer
  hidden: 'Hidden region for referenced blocks'

After your sub-theme is created, you'll need to set it as your site's theme. To do that, follow these steps:

Contributing to the Illinois Framework Theme

If you encounter any issues with the Illinois Framwork, please feel free to submit an issue to our issue queue.

The WIGG Drupal group is welcoming contributions from anyone on campus. Please see the WIGG Drupal webpage for more information.

Developing the theme

Since this theme is a subtheme of Bootstrap, you will want to use a SASS compiler to make customizations. The SASS files are located in the scss directory. Instructions for installing SASS can be found at https://sass-lang.com/install. Using the command-line, you can compile the theme's SASS file by running the command sass --source-map style.scss ../css/style.css in the scss directory.

See Theming Bootstrap for information on getting started customizing Bootstrap 4.

To customize look and feel of the IL Framework Theme, you'll want to override SCSS variables. Full list of variables is in [path to themes/contrib]/bootstrap4/dist/bootstrap/4.4.1/scss/_variables.scss or [path to themes/contrib]/bootstrap4/scss/_theme_variables.scss.

There is a style guide available at style-guide/index.html. The link will be available on Manage theme configuration page. If you get a 404 error, add index.html to the URL.

Twig Templating with Twig Tweak

If you are looking to modify the twig templates there are some shortcuts provided by the Twig Tweak Module. See the cheat sheet.