[EN] Let’s Write – the first styles

So it came out that this week I didn’t have too much time for the project. But I couldn’t don’t touch it. So I decided to get on CSS styles. Well I treat this project as a sandbox to learn React because what came out this week is terrible. Although I was able to add only the base of the upper menu :D In spite of everything I have for you some information about the progress.

Temporary memory

For the weekend I wasn’t at home so I had to use the laptop instead of my main computer. The man quickly forgets what he was doing. I downloaded sources, I wanted to run page and I saw that dist folder don’t exists! Do you remember what I wrote previously? That I don’t commit this folder to repository? I forgot about this. By the way I remembered the need to install packages. I used npm install command and after that I wanted to run Gulp but it didn’t want to work. After a few minutes I found source of problem – on the laptop I had old version of Node.js. Quick update. Ok, I can run Gulp. Then the problems caused jslint which, in the end, I decided to turn off because I couldn’t find source of problem.

Project is started.

Let’s start with something simpler…

I decided that for warm up I’ll do menu. Finally, the menu is very important in the application :D Goal was to prepare the styles for upper menu. Right now I say that I failed to achieve this goal. I don’t know nice styling.

First thing I did is I started looking colors for my application. To this task I strongly recommend this Adobe page: https://color.adobe.com/en. It allows ver easily based on single color find other matches by selected rules. It didn’t help me and I chose ugly colors:

After selecting a basic colors I added SCSS file with variables. In this variables I saved values of colors. I recommend this approach because it easier to keep consistency in the application and causes that changes in appearance are much easier. My variables.scss file looks like this:

//colors
$main-color: #1978B2;
$red: #FF8385;
$blue: #6AC6FF;
$second: #CCCCAD;
$dark-second: #B2B171;
 
$text-color: #222;
$error-color: $red;
$success-color: $second;
 
$white: #fff;
$border-color: #939393;

I imported it in the main file with styles and now I can use these variables to set the color of the element.

I started a reading about menu in the web application. I based on this page: https://webdesign.tutsplus.com/articles/a-simple-responsive-mobile-first-navigation–webdesign-6074

While reading I added in the project file which reset all default styles. I took it from http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/. Thanks to this file you’ll be sure that all elements for which you didn’t write styles will look the same on all browsers.

It’s time to add components for main menu. I assumed that in the application will be at least two menus – for not logged in users and for logged in users. But they’ll differ only links. So at the beginning I started doing the base component, the same for all menus. According to the article, which I have given above, I needed the two elements for menu – one at the top and second at the bottom. Consequently it created such monster:

BaseMainMenuTop = React.createClass({
    render: function() {
        return <header className="base_main-menu--top">
                <h1 className="logo"><a href="#">Let's Write</a></h1>
                <a className="to_nav" href="#main_menu">Menu</a>
            </header>
    }
}) 

BaseNav = React.createClass({
    render: function() {
        return <nav className="base_main-menu--nav" id="main_menu">{this.props.children}</nav>
    }
})

It will be just a moment

I struggled for two hours with styles for the menu. Although I copied them from website still didn’t want to work. The cause was a typo. I forgot to add a colon before after . Before I found this error I tried to do the menu in a different way piecing together from several pages. I gave up and I fixed this version. I finally came to such a style for the top menu:

.base_main-menu {
    &--top {
        background-color: $main-color;
        padding: 15px 20px;

        &:before,&:after {
            content: "";
            display: table;
        }

        &:after {
            clear: both;
        }

        a.to_nav {
            @media screen and (min-width: $min-md) {
                display: none;
            }

            float: right;
            text-decoration: none;
            color: $white;
            padding: 0 10px;
            font-size: 12px;
            font-weight: bold;
            line-height: 22px;
            height: 22px;
            text-transform: uppercase;
            letter-spacing: 0.1em;

            &:hover, &:focus {
                background: $blue;
            }
        }

        h1.logo a {
            float: left;
            color: $dark-second;
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 20px;
            line-height: 22px;
            letter-spacing: 0.2em;
        }
    }

    &--nav {
        background-color: $main-color;
        @media screen and (min-width: $min-md) {
            position: absolute;
            top: 5px;
            right: 10px;
            background: none;
        }

        & ul {
            list-style: none;
            padding: 5px 0;

            & li {
                @media screen and (min-width: $min-md) {
                    display: inline;
                }
                
                & a {
                    @media screen and (min-width: $min-md){
                        float: left;
                        border: none;
                        padding: 0 10px;
                    }

                    display: block;
                    padding: 0 20px;
                    color: $white;
                    text-decoration: none;
                    font-weight: bold;
                    text-transform: uppercase;
                    letter-spacing: 0.1em;
                    line-height: 2em;
                    height: 2em;
                    border-bottom: 1px solid $border-color;

                    &:hover, &:focus {
                        background: $blue;
                    }
                }

                &:last-child a {
                border-bottom: none;
            }
            }
        }
    }
}

What could possibly go wrong?

Happens here a little magic because with only CSS we managed to achieve an effect where for mobile views content of menu is on the bottom of the page and for desktop views menu is displayed at the top. Magic. The Final result looks like this:

1) For desktop views: