Patternfly imports Boostrap, and we import Patternfly as a base for our less file.
When we concatenate the base layer of Boostrap styling plus the second layer of Patternfly styles plus our styles by importing one into the other, we end up with a huge css that defines classes and structures that we might never use.
For example, if our project doesn’t use the modal component, there is no point in loading it to our css.
To achieve this customisation of component we are going to look into the nuts and bolts of patternfly and Boostrap.
Import what really matters
Until now we created a styles.less files that imports patternfly like this:
As I mention before this will compile into a huge css files.
In order to import just the parts of patternfly and bootstrap that matters to our project, we are going to look into bootrap.less and patternfly.less
TIP By keeping /bower_components untouched, you’ll be able to bower updates.
Lets start from the base: Bootstrap.
When we use bower to install Patternfly, we also install Bootsrap as a component. Open bootstrap.less on your text editor, you’ll find it under bower_components/patternfly/components/Boostrap/less/Boostrap.less
There is a list of core and component styles. These are the steps to do:
Select all in bootstrap.less
Paste it on the beginning of styles.less
Change the path of the imports so they point to the correct location ../bower_components/patternfly/components/Boostrap/less/NAME_OF_THE_FILE
Now, don’t touch the core elements, you’ll need those to do the base styling like typography settings, grids, etc.
Go through the list of component and comment out with a ‘//’ the ones you’ll not use. Let’s say your project doesn’t use breadcrumbs or pagination, go ahead and comment those out:
Now lets do the same with patternfly styles. Open patternfly.less on your text editor, you’ll find it under /bower_components/patternfly/less/patternfly.less and repeat the same steps: select, copy, paste and change the path.
IMPORTANT Remember to paste patternfly styles after bootstrap styles.
Lets go back to our previews example, we are not using breadcrumbs or pagination, so we comment out those lines:
Your styles layer
IMPORTANT Remember not to include a call to patternfly.less @import "/bower_components/patternfly/less/variables.less";
Write your styles after Patternfly styles on styles.less.
Once compiled, styles.css generated from styles.less will not include any reference to breadcrumbs or pagination, making it lighter and faster to load.
Better comment out than delete
Any comment with less // will not became part of the compiled css. It’s good to keep them commented in case you want to add that component later in the project.
You’ll want your production code to be as clean as possible. Sending less code is cheaper and faster.