05. Footer and Socials

The footer is another element that is the same for all pages. With that in mind, it also has features that can be configured in the JS config in our core script js/core.js. But first, let's look at the basic markup.

 Footer 
footer id="anita-footer"
    div class="anita-footer-inner"
        div class="anita-copyright anita-js-copyright"/div
        div class="anita-socials anita-js-socials"/div
    /div
/footer

That is actually all markup if you prefer to use generated copyright and social links for all website pages. The key classes for generator features are anita-js-copyright and anita-js-socials. If you have no plans to use the procedural generation - remove those classes.

Copyright Text

The copyright text is placed in the l10n parameter of the config inside the file js/core.js. So, you can easily find it there:

...
     --- Localization --- 
    l10n : {
        // Footer Copyright string
        copyright : 'Copyright © 2022. All Rights Reserved.',
        ...
    }
...

If you want to stay true to the classics, you can remove the class anita-js-copyright and write your text directly in div class="anita-copyright"/div.

Social Links

As for the social links. When you use the anita-js-socials, they automatically append to the div class="anita-socials"/div according to the config in js/core.js:

...

 --- Social Links --- 
socials: {
    'facebook' : {
        'url': '#',
        'label': 'Fb.'
    },
    'twitter' : {
        'url': '#',
        'label': 'Tw.'
    },
    'instagram' : {
        'url': '#',
        'label': 'In.'
    },
    'youtube' : {
        'url': '#',
        'label': 'Yt.'
    }
},

...

The parent param of each item is the label of the social network, and also will be used as a part of the class for this item. Due to that, the requirements for that param are the same as for the class name: no dots, commas spaces, and other special symbols. For example, for the value facebook the item class will be anita-socials--facebook.

Next, inside this we add two additional params: URL and the displayed label. The label param is optional and you can leave it empty, if have plans to use custom styles, for example, with icons. By the way, you can customize it using the classes anita-socials--parentParam.

This trick with the anita-js-socials works not only in the footer. You can also use it to place your social links inside any block you need. An example of usage can see on the Contacts page.

But if you need to use the hardcoded version, you can use the following markup to do so:

        ...
        div class="anita-socials"
            ul class="anita-socials-list"
                li class="anita-socials--facebook"
                    a href="#"Fb./a
                /li
                li class="anita-socials--twitter"
                    a href="#"Tw./a
                /li
                li class="anita-socials--instagram"
                    a href="#"In./a
                /li
                li class="anita-socials--youtube"
                    a href="#"Yt./a
                /li
            /ul
        /div
    /div
/footer

Next Chapter