There are many responsive and elegant themes available for free that you can use for polishing the presentation layer of your project. But almost always there is a need to add some adjustments to them and in this post you can see how custom styles can be included while the assets are being built with gulp.
What we are going to build
To the project described in the post about jtwig in a Spring Boot app we are going to add some custom css code to make the top navigation act exactly as the one from the original MDBootstrap example and change the background photo. Fortunately, the required css code is accessible through the theme example, so I will reuse it. Following the good practices we will minify the custom styles.
So we will progress from this:
to the version with a new photo and the top menu highlighted during scrolling through the page:
In this example I’m working on a project created with:
- Spring Initializr (How to create a new Spring Boot Project);
- npm (Manage project dependencies with npm);
- jtwig (jtwig template engine in a Spring Boot application);
- Material Design for Bootstrap theme and gulp (How to use Bootstrap themes with Spring Boot and gulp).
Create the tailored appearance
Build the custom styles with gulp
We need to add the custom css code, so let’s create the files for it in the
resources/static/css/custom directory. You can create just one,
custom.css file, but to show how the
gulp-concat plugin works I will create the following files:
top_nav.csswith the code responsible for highlighting the top navigation when the page is scrolled through:
headers.cssfor some headers styles:
decorators.cssfor styling the line placed under the title:
media.cssfor the rest of the code required for the full background image:
When using external resources we usually add the files that were already minified. With our custom styles we will include the minification into a gulp task.
Check out your
package.json for meeting the dependencies:
You can add the required plugins with npm:
custom_css task in
gulpfile.js. List all the source files for the build, minify the code and place it in the destination file –
Run the new task in a directory where the gulpfile.js file is placed:
Include the new assets from the
app.css file into the
base.twig template, so the whole app can access it:
During the development you can work on one big or many precise css files, just remember to add every new file to the
gulp.src. When all globally required assets are put in the
app files after the build, there is no need to modify the base template in case of changes in the list of resources. You can also create more gulp tasks for building the assets that are required only in some part of the app. Include them exclusively in a template that needs them.
Set a new background image
We will change the background picture from
intro.twig template you can see that the background image is set with a
It is considered to be a good practice to avoid the
style tag whenever possible. Add to your
decorators.css the following class:
In the command line rebuild your custom styles:
and go back to the
intro.twig template to remove the unnecessary
and add the
Check out the results
After rebuilding the project and refreshing the page you will see the new background image and the navigation changes its colour when you scroll down the page.