This blogpost will guide you through the theme layer of our Open Social distribution. This layer — continue reading
This blogpost will guide you through the theme layer of our Open Social distribution. This layer is designed to be easily extensible, maintainable and future proof. We will give you a quick overview of the themes we created and provide you with some tips for setting up your own Open Social branding layer. Excited? Let’s get started!
Meet socialblue and socialbase
Open Social ships with two custom themes called socialbase and socialblue. The themes are component based and extend on functionality provided by the popular Drupal Bootstrap theme.
The socialbase theme is the bare version of the total Open Social theme layer we ship with the distribution. It provides a clean but stable starting point for themers. In the codebase you will find the Twig templates necessary to provide the correct markup for our features, PHP logic to alter and preprocess components, basic styles for general layout and styling purposes and Javascripts for the interactive components. We integrated a Gulp task runner that compiles CSS from our SCSS base and generates the SVG icon sprite we use to render the icons in the theme. It also minifies the JavaScript files we use for our interactive components to reduce the page load time and amount of requests.
The socialblue theme adds a the default (blue) branding layer on top of this. It will be enabled by default, but can be disabled just as easy. It comes with some Gulp tasks for updating the Open Social style guide that gives designers a starting point for designing their own version of the component library. This style guide is built with Knyle Style Sheets (KSS), which basically comes down to defining the markup for your styling in comments throughout your SCSS files. You can find more information about the our atomic design implementation and the correct markup for certain components in the style guide.
We are slowly moving away from the Bootstrap class name convention as you can read in Maikels blog about our transition to BEM classname conventions, but we still depend on some of the Bootstrap SCSS files that you can find in socialbase. The style guide will help you find out how they are implemented and which classes are currently used. The changelogs in the latest version of the themes will explain what we changed with every release.
Want to learn how to edit the CSS and HTML to optomize your landing pages? Read: 4 Secret Tips to Style Your Open Social Landing Page
A quick start for Open Social theming
1. Do not change the Open Social codebase
It is important to always create custom modules or sub themes to extend Open Socials features, because you will lose the changes you made to the original codebase when updating to a newer version of the application. Keep track of our Open Social releases on Drupal.org.
2. Always test your site after an update
Update Open Social in a staging environment and test it before releasing it to your production environment. Since we are still moving to BEM naming conventions, class names your CSS uses may change in the future
3. Extend socialblue libraries for small customizations to the default theme
If you do not need to customize the design that much, you can base your custom theme on socialblue and make use of Drupals library-extend feature to add your stylesheets to components and change some colors or use library-override to change the font declarations for example. Read more about this topic in the Drupal 8 theming documentation or checkout socialbase.info.yml to check out some examples.
4. Extend socialbase libraries for big customizations to the default theme
If you do have to implement a complex design, you should base your custom theme on socialbase. This will provide the necessary logic for the site to work correctly, but strip the theme of all the Open Social branding so you can start with a bare layout and add styles of your own. It saves you a lot of overrides.
5. Make smart use of the gulp tasks we provide in socialblue
If you want to use the Gulp tasks we provide in our themes you can copy the package.json and gulpfile.js files and mimic the ‘components’ folder structure. Make sure to run `npm install` from your CLI and examine the contents in gulpfile.js to see which tasks you are able to run.
6. Use SVG icon sprites and override the icons component in socialbase
When you decide to follow the socialbase components folder structure, you can copy the icons found in /components/06-libraries/icons/source/ with it and redesign them. Gulp will compile an SVG sprite of these files. Make sure to override the contents of the SVG sprite to the page as we did in the html preprocessor in socialbase.
7. Keep your theme organized
Since there are a lot layers that impact the front-end of the site it is important to keep your theme organized. When overriding or extending libraries in your theme try to use similar naming conventions in your folder structure and library definitions to be able to find or create the right assets quickly.
Alright, this should give you a good starting point for setting up an Open Social sub theme. Feel free to contact us in the drupal.org issues queue and support requests or report bugs if you encounter them. Good luck and happy theming!
