Battlefield 1 UI

A jab at recreating the menu UI of Battlefield 1 in the browser.

Demo

Right here soldier

Introduction

This is a fan project that tries to recreate the Battlefield 1 UI with web technologies. The main menu UI elements are more or less exact derivatives from the games menu but some of the residing UI elements has been imagined in the vision of Battlefield 1's design. The design is made to be responsive and work across desktop, tablet, and mobile as well.

Getting Started

Download or clone this repo. You can work forward using the index.html in example/ that I've made, or you can just import the stylesheet to your own project. I would recommend taking a look at my example/ to get an idea of the layout required for some elements (primarily the sidebar).

Development:

<link href="style.css" rel="stylesheet">

Production:

<link href="style.min.css" rel="stylesheet">

You can also use the CDN:

Coming Soon

Usage

Coming Soon

Contributing

Anyone can feel free to make pull requests or fork this repo.

1. Fork it
2. Create your feature branch - git checkout -b my-new-feature-or-fix
3. Commit your changes - git commit -am 'Add some feature-or-fix'
4. Push to the branch - git push origin my-new-feature-or-fix
5. Create new Pull Request

Known issues / not yet implemented

If you find any other issues please report it

• Nav menu is not yet responsive
• BF1 like buttons not styled yet
• IE and Edge does not support object-fit which is used to keep the aspect ration of the card images

Changelog

Coming Soon