Implement a Sticky Footer within a ReasonReact App Using the bs-css BuckleScript Package
One of the key benefits of BuckleScript is the ease in which it makes the process of porting JavaScript libraries so they can be used within the context of a ReasonML application. The Reason Package Index, or redex, provides a central place for browsing all available packages. Additionally, creating your own BuckleScript bindings is a straight forward process that also provides value in the form of knowledge surrounding the inner-workings of the library at hand.
In this lesson, we learn how to integrate the emotion css-in-js libray into our project by installing the bs-css package. Once installed, we'll create a .re file for our style rules and see how we can add global css, as well as styles for specific css classes which we'll target using React's className prop.
Link
Thomas Greco: [0:01] Instead of using CSS inside of our application, we're going to use the bs-css library. Now, to get started using this, we're going to need to run yarn add bs-css. If instead of yarn you're using npm, you can just run npm i bs-css. Whatever the case, running both commands is going to install this package inside of our local project.
[0:31] From there, we need to go into the bsconfig.json file and just add this package to our list of dependencies. Now, I already have it added. If I were to technically run it again, I would just type it in like so. I don't need to save that or anything because again, mine's already all setup. I can just begin now by adding a new file called styles.re inside of our source directory.
[1:06] Inside here, I'm going to create a module called styles and inside here, we're going to write open CSS as this is going to give us access to all of the functions bs-css library provides us with.
[1:22] It's worth pointing out that since we're inside of our module, we're not polluting our global scope with all these functions. Rather, only the code inside this module are going to be affected by this import.
[1:37] The first thing I'm going to do is just create our wrapperStyles variable and then we're going to use our first function from bs-css, which is the style function. There's various ways in which we can use the style function. However, right now, we're simply going to pass our arguments in as a list.
[2:01] The first CSS row inside of our list is going to be display, which we're setting to flex. Then, flexDirection, we'll set to column. Lastly, we'll define a minHeight of 100 view height.
[2:20] You see that there's various ways we could do it, however, we're just going to use vh for view height. Then we're going to pass in a 100 but we'll see that this is going to take a float value so we can alleviate this error by just saying, float_of_int.
[2:42] Now that we have this defined, we can go in to our layout file and instead of a fragment, I'm sure we use a div to wrap our entire application.
[2:54] Before I can actually use the class name, we going to need to use that open keyword again to grab our style as module and then from there, we can set our class name equal these Styles.wrapperStyles. We can't see the effect taking hold yet, but we're going to need to go and add some more style rules.
[3:16] This time we want to target that content class name. However, instead of applying the css like we did last time, we're going to use the global function to create a global css rule. Global is going to take our selector or tag name however we are tagging it to be the first argument so we just have .content to signify the class name of content.
[3:47] Then, we are going to pass in our list of style rules. We'll only be defining one value and that's going to be flex. Now again, there's num keyword just going to take an integer value. However, instead of using float event, I'm just going to manually put 1. and the errors will subside.
[4:11] Additionally, we'll notice that our footer text is no longer appearing right below our buttons and it's stuck to the page. We've successfully implemented this sticky footer using the bs-css library. Let's not stop there though. Next, a mission to create a button variable. Again, we're going to use the style function which as we know by now takes a list.
[4:41] As you've probably noticed throughout the video and will continue to notice, ReasonML is constantly telling us what values we can use and what errors we're making.
[4:52] Here it's just telling us all the possible values that width can take. This will do this for each style declaration that we use. However, I actually have it delayed for the sake of the video.
[5:05] That said, we're just going to use the pixel function here to specify a width of 300 pixels and then below this, we're going to set our font size using that pixel variable again.
[5:21] From there, we're going to go into our counters file and just open up this module like we did in our layout file. I'm just going to format every one of our buttons. They now have a class name prop, and more specifically, so that they all have a class name prop that points to this button class inside of our styles module.
[5:48] If we save, we'll see there, buttons now grow in width and their font size changes. Just to finish this up, I'm going to go back into our styles file. I'm just going define it background color. Instead of pixel, we're going to use hex, and then pass in a hex string.
[6:11] Notice that we have no pound sign here, only the hexadecimal values that we want to use. To make these actually legible, I'm also going to give this a color. We're going to use a hexagon, and just pass in the hex value for Y.
[6:32] Now we can actually read these buttons. We can also interact with them and receive the exact same behavior that we were before. However, this time, it's a little bit more aesthetically pleasing.