If I open up the Modal right now, you can see we have the basic HTML input tags and then a basic button. So, let's in this guide, let's redo this so that we have a better layout. I'm wanting to do this one, because we've had several highly technical guides in a row and I want us to have a little bit of a break and then two, as we start to add the Rich Text Editor and the image uploaders, then it can be helpful to have a real design to work with.

If not, it might look a little messy, you might have image uploaders all over the place, rich text media where you're not exactly sure how it's gonna layout with the rest of the form and so, I think it is a good idea right now to take a step back and to build the structure for this form.

Let's get started with that, we're gonna follow the same pattern that we did with the Portfolio Manager, so if you click here, you can see we have these nice underlined text elements and we have this nice button here and that kind of thing, so we're gonna follow that.

And you might be tempted to do something like what I'm gonna start off with by just calling the portfolio-form-wrapper, so if I open up Visual Studio Code here, and go all the way down into the blog-form, I could technically say className equals and then I believe it's called portfolio-form-wrapper and then we have our two-column grid, so if I say div className equals two-column and then let's wrap up both these input tags inside of this two-column grid.

blog-form.js

render() {
  return (
    <form onSubmit={this.handleSubmit} className="blog-form-wrapper">
      <div className="two-column">
        <input
          type="text"
          onChange={this.handleChange}
          name="title"
          placeholder="Blog Title"
          value={this.state.title}
        />

        <input
          type="text"
          onChange={this.handleChange}
          name="blog_status"
          placeholder="Blog status"
          value={this.state.blog_status}
        />
      </div>

If I come back and now look at it, you can see that our form looks good.

And you may think okay, we're done but this isn't exactly the perfect implementation and I'm gonna walk through why here in a moment but also let's add styles to the button, so I'm gonna give a className and just call our normal btn class and that's gonna give us a nice big button. If you open up the Modal now, you'll see it is right there.

So, this is good but I would like to actually create a class dedicated to the blog form and part of the reason for that is because there are certain styles especially when it comes to media queries and different things like that that I would like to have that are specific to the blog form inside of the Modal.

If you open up the portfolio-form, the portfolio-form Sass file, you can see that the majority of the elements here that we're really caring about like the input tags, these are all bringing in the mix-ins that we created and that's the reason why we created the mid-ins, was so that we can easily call them from any other style file and we can not have to duplicate code and also, it'll make us have a nice and small form wrapper for our blog.

So, let's get started with that. I'm going keep this open kind of as a model and then we're gonna create a dedicated blog-form style file. So, create a new file in the Style directory called blog-form and it's a Sass file and then make sure that you import this, so open up your main Sass file and just at the very bottom you can bring in blog-form, hit save, close and we're good to go.

main.scss

@import "./variables.scss";
@import "./mixins.scss";
@import "./base.scss";
@import "./forms.scss";
@import "./button.scss";
@import "./grid.scss";
@import "./navigation.scss";
@import "./portfolio.scss";
@import "./portfolio-manager.scss";
@import "./portfolio-form.scss";
@import "./portfolio-sidebar.scss";
@import "./auth.scss";
@import "./blog.scss";
@import "./loaders.scss";
@import "./blog-form.scss";

Now, inside of the portfolio-form, we can copy most of this. We don't care about the image uploaders yet, we'll take care of that later, for right now let's just copy that and paste it in. Let me get rid of that and then make sure you end with a closing bracket and then as far as everything else that we have here, we don't wanna class it the portfolio-form-wrapper, now can call it the blog-form-wrapper, hit save.

blog-form.scss

.blog-form-wrapper {
  @include base-grid();
  grid-template-columns: 1fr;
  padding: 42px;

  @include input-element();
  input {
    margin-bottom: 0px;
  }
}

Now we can just call blog-form-wrapper from our form. So, I'll say blog-form-wrapper and then let's go back and make sure that that's still working, hit refresh, click Open Modal and you'll see all of that's working and we can test this out, so I could say test from styled modal with a draft, hit Save and you can see that's working perfectly. So, we have populated all of the correct styles we're wanting in and we have a much better looking form.

blog-form.js

render() {
  return (
    <form onSubmit={this.handleSubmit} className="blog-form-wrapper">
      <div className="two-column">

Now, when it comes to designing and structuring your styles, you have a few different options. So, you can try to create very abstract classes, so you could do something like create a form wrapper class and then you could add in a blog specification and a portfolio specification and do things like that.

I prefer to use tools like mix-ins where you can have say your grid mix-in, then you can have your input mix-in and that way you're able to have the same idea of shared functionality but now what we can do is say that we need to create a media query for responsiveness and we want the blog-form-wrapper to work differently than the Portfolio Manager, we can now call this from our media query file and have it rendered differently than the Portfolio Manager.

That's the reason why I created a separate class and I brought in each one of these mix-ins and part of the reason why I'm spending a little bit of time talking about this is because this concept is also very similar to the idea of composition when it comes to development.

So, you may hear the term or the argument of composition versus inheritance and what that means, it's something very popular in JavaScript is inheritance is when you have classes, so kind of like a blog class or a Portfolio Manager class and inheritance is when you create that class and then you have child classes that have shared behavior, that's inheritance.

What composition is, is more of like what's we're doing here. It's where you create a blueprint or in this case, our blog-form-wrapper, and then instead of having it inherit from some big abstract class or some big module, you simply slide in only what's needed.

You compose whatever it is you're building and in this case, we're composing styles and that's the reason I really like using this composition kind of design pattern and why I like using tools like mix-ins or helper files or even really the entire component-based architecture that React is built on.

So, hopefully you enjoyed this and it gave us a little bit of a chance to talk about a pretty important concept and this is a very practical example of how that can be used and now we have a great looking blog form and in the next guide, we're gonna get rid of this ugly link here and we are going to create the cool little icon there that is going to allow us to click on it and open up our Modal.

Resources

• Source code