Creating Jumbles (part 4: look n’ feel)

If you are coming here directly and have not yet read part 1, part 2 and/or part 3 you should. Over there I go through the structure of the app and why the structure is the way it is along with some views making a wireframe, if you will, of the app. Also I talk about the app it self, what it should do and how it should look. Well, now we should give it some style; so lets get to it…

Styles

How do we style our application? There are multiple ways to successfully styling an application but we will focus on two and select one to actually implement.

First there is using a SASS preprocessing and BEM methodology that are good in almost any situation since it allows you to isolate components and use variables in your styling. We will be looking at the benefits, referring to articles and showing how you can implement this in the jumbles application.

Second we will look at styled components that utilises tagged template literals and basic CSS (the magic). This is the way we will implement jumbles. What we like about this approach is the fact that you have the CSS in the code with your components. Like with html in our render function in React this will take a little getting used to but once you have taken a few steps it will feel natural.

Note: you can skip the BEM & SASS section and go directly to our styled components implementation below.

BEM & SASS

You can use plain CSS that you import into your components. However, if we are going to allow this application to grow into a large application we should find a way to do our CSS a little bit better then plain CSS. Why not plain CSS? I’ll take a quote from BEM to answer that

When it comes to larger, more complex projects, how you organise your code is the key to efficiency in at least these three ways: it affects how long it takes you to write code, how much of that code you’ll have to write and how much loading your browser will have to do. This becomes especially important when you’re working with teams of themers, and when high performance is essential.

One thing to consider when creating UI using React is that we are creating components. Those components should be isolated and not be affected by their surroundings if it can be avoided. CSS has the tendency to cascade and that is not necessarily what we want when creating components.

There are ways to achieve this isolation using, for instance, CSS Modules but there is no support for that in create-react-app so we are out of luck unless you would like to eject and make your own build scripts; but that is not what we are doing here. So, the best way to proceed would be using some methodology like Block Element Modifier (BEM) that allows you to isolate the styles to be applied.

We would also like to have a reusable colour scheming and not repeat similar CSS statements throughout our project and to achieve this we could use SASS. You can read an article on why Sass and languages like it will triumph or another one on the Benefits of using SASS over Traditional CSS

We are in luck since there is support for SASS in create-react-app but no support for CSS Modules even if we like that more we need to work with what we got. Or, you could eject and make your own build scripts; but that is not what we are doing here.


Like before we follow the instructions to add the support. First we need to do to add support for SASS is to install node-sass-chokidar

yarn add node-sass-chokidar --dev

Now that we have that out of the way we add two scripts to our package.json

What we have there is support for relative paths so we can import SASS files in other SASS files we can simply provide relative paths to the src folder.

We need to preprocess the SASS files before we start our application and to do that we need a little helper script that allows us to run multiple scripts in parallel. So install this little helper

yarn add npm-run-all --dev

Now we need to include some preprocessing commands in our start script and to do that we update our start and build scripts and add a start-js script

Please read the guide from create-react-app to get more insight into why all of this needs to be done and what it all means. If we have that here we are simply doing a copy of another guide and that is not our way :)

Since we are using SASS we rename all of our .css files to .scss files and add a little ignore to our .gitignore file so we are no longer adding .css files to git but only .scss files.

Remember; we are still importing .css files to our components since what we have done is preprocess our .scss files and that creates .css files that are used when running the application.

Now that this is out of the way you can start doing some look n’ feel; but, do we know how to use SASS to apply the BEM methodology; No? Then we could read Modular CSS with Sass & BEM or Objects in Space that should give us a feeling for what it all means.

Styled components

Now; even if BEM and SASS are good ways to apply styles to components there are other ways. The following approach is simple and easy to prepare for. Simply install the styled-components package

yarn add styled-components

What this package does is take a clever advantage of a technique called template literals in javascript and using this package you can create components that are styled and isolated with the following simple syntax

import styled, { keyframes } from 'styled-components' 
const fadeIn = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
const SomeButton = styled.button`
/* normal CSS styles */
animation: 0.5s ${fadeIn} ease-out;
`

You can also extend those components with ease

const ExtSomeButton = styled(SomeButton)`
/* override any styles you like */
`

And then use it like any other component in your render function

class MyComponent extends React.Component {
render() {
return <ExtSomeButton>Click</ExtSomeButton>
}
}
There are multiple things to read up on so we recommend that you read the documentation and experiment with styled-components to get more familiar with the technique.

Now that we have the technique down we need to understand that we are creating components and in doing so there are some components that are highly reusable and others that are hyper local. So, how do we structure the files holding our components? There are three types of components that can be held in three different places; lets look closer at those…

Reusable: In large applications you might have a folder src/view/components holding files like buttons.js and containers.js and so forth that are highly reusable capturing the basic implementations that can be used in 85%–90% of cases without any changes.

Local: There are various extensions of those reusable components within parts of the applications. For example if you have a part of the application called jumbles you might like to have a folder src/view/jumbles/components holding specific extension of those reusable components or components that are specific to this part of the application and not intended to be reused by other parts of the application.

Hyper local: Then there are, what we call, hyper local components that are specific to individual components within a specific part of the application. Those might be declared and used within a file holding a component and don’t get a specific file.

Now this is simple, right … And we are off :)

Look n’ Feel

We are not going into too much detail here since there is no need to replicate all the code here and you can view the code .

disclaimer: doing CSS work and look n’ feel is not my strong suit; so be kind when you read this part as it is simply here to show you how you can apply styled-components

Our structure is simple since we only have a few Reusable components and then we have some hyper local components that are contained within the files holding the components that use the styled components.

Note: To fetch this part of the code you can fetch the look branch from GitHub

Well, that’s it! Now the App looks good and should be ready to be used by the customer. But how do you use it? You have it handy on your home screen so you can open it quickly to copy the password you need. Let’s do it so the customer can have a handy progressive web app on the home screen. This will be covered in part 5 called deploy as p.w.a ;) Let’s go…