[ToDoList] Styling with Materialize

Materialize is an open-source front-end framework built to simplify Google's excellent Material Design framework. As such it follows the Material design concepts, but includes features such as column layout for ease of use - it's very beautiful and very clever! This section and its subsections will detail the installation and usage of MaterializeCSS v1.0.0 via Webpack with our Rails v6.1.4.4 web app.
We will also be using the material icons set of icons to compliment our fancy new styling.

1. Installing MaterializeCSS
2. Sections

 

---

 

Unfortunately Materialize does not have official documentation for setup on a webpack / esbuild driven Rails application (6+) at time of writing - there is plenty for the sprocket-happy Rails 5 platform though, the little tart.
However fear not, for with the usual levels of frustration, cursing and insomnia-based surplus of time (plus a lo-hot of Googling), I have got it to work with some effort.

So let's install Materialize for use with Webpack - this will include the relevant steps from the Styling landing page to create our new git branch and move our assets over to Webpack, but with the context of not wanting to preserve any existing styling (as Materialize will now handle that for us).

1. First of all, let's create our new repository branch so we can work and commit changes without affected the main branch that we know definitely works - I'm going to be unimaginative and call this branch materialize but you can call it whatever you like:

   $ git checkout -b materialize

2. Now we'll need to install the packages for materialize and material-icons using yarn:

   $ yarn add materialize-css material-icons

   Both of these packages should appear as entries in our app's /package.json file if this completes correctly, and will generate a yarn.lock. These will allow our app to install these files again when we need to deploy it.

3. Next we need to configure webpack to handle our styles - we'll start by creating a directory for our stylesheets in the default webpack directory which is oddly /app/javascript:

   $ mkdir app/javascript/styles

   • We will also create the directory for images:

     $ mkdir app/javascript/images

4. With the styles directory set up we can create our stylesheet in it and get it to import materialize-css from the yarn package we installed - /app/javascript/styles/styles.scss:

   @import 'materialize-css';

   (note that we don't have to specify exact filepath, as webpack already knows where to look for the yarn package [/node_modules]!)

5. We need to copy the default master CSS stylesheet into the packs dir from the asset pipeline for Rails to play nicely:

   $ cp app/assets/stylesheets/application.css app/javascript/packs/application.css

   As explained on Styling landing page, we need to copy this file as opposed to move it because, while we are not using sprockets or the asset pipeline, Rails will not correctly compile assets if sprockets is improperly configured.

6. Next we need to update the JavaScript manifest in the packs dir to import our new styles.scss stylesheet, the materialize & material-icons packages, and the directory containting any images we might use in future - /app/javascript/packs/application.js (below the other import tags):

   require.context('images', true)
   import 'styles/styles'
   import 'materialize-css'
   import 'material-icons/iconfont/material-icons.css'

   Note here that, as in styles.scss, we only have to specify the package name for materialize. However material icons isn't quite as clever so we do need to specify the specific file to point to.

7. Finally, we will get Rails to import styles from our new area by swapping the stylesheets_link_tag in application.html.erb for the correct stylesheet_pack_tag:

       <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

And with that, our site is ready to handle whatever materialize-y goodness we ask of it!

If you now load up your site in the browser again, you will notice that the site takes a little while to load compared to normal. This is because webpack is compiling the styles we have set up in order for the pages we request to use them - in the terminal window running your rails server, you may notice the logging informing you of this:

[Webpacker] Compiling...
[Webpacker] Compiled all packs in /home/nask/projects/to_do_list/public/packs

When the page does load, you will see some small changes to your styling that shows you the change has taken effect, and we can move onto some funkier things!

With this working, let's quickly push these changes to GitHub so that we at least have the config set up in the repository:

$ git status                             ## check branch and files changed
$ git add -A                             ## stage the files for commit
$ git commit -m 'Installed Materialize'
$ git push origin materialize            ## push changes to the remote branch on GitHub

 

---

 

With Materialize installed and ready to go, we can begin our styling journey! This was originally just one massive page but, in the interest of preserving your sanity, I have split it into a number of sections:

1. Basic Layout

2. Colour Variables & Icons

3. Form Views

4. Other Views

5. Other Pages

 
 

< [ToDoList] Styling Options	|	[ToDoList] Materialize I: Basic Layout >
Back