Skip to content

Latest commit

 

History

History
77 lines (45 loc) · 3.54 KB

README.md

File metadata and controls

77 lines (45 loc) · 3.54 KB
Raw

Animated BrazilJS Logo

BrazilJS's logo

This is the new BrazilJS brand, announced in June 2018.
Use this tool to customize it, to play with it, hack it, and to submit new themes.

Check the live tool to see all the themes: BrazilJS Logo customization tool

Creating a new theme

Clone this project and serve it in your own HTTP Server, like an Apache or npm's http-server.
To create a new theme, follow these steps:

1) Add it in the list-of-themes.js:

Add a new object to the list. In this object:

  • name: The name for the theme
  • description: A description for the theme
  • className: This is the CSS class added to the .logo-container element.
  • background: A string added to the CSS background of the body element.
  • author: Add here a reference for your github-username or @twitterAccount

2) Create the files

Create a directory with the name of your theme (the same name you used as the key of your object, in the list-of-themes.js).
Create a file called index.css in your theme's directory.

3) Customize the elements

Customize the elements prefixing their classes with the className you defined in your theme configuration in the list-of-themes.js.

4) Submit your theme

Open a pull request submiting your theme to the main project.

Structure

Some important notes about the HTML structure:

  • Both brazil and S are SVGs, the letter J and its dash effect are in plain HTML Div Elements.
  • You can add the animation spin to your theme to see it spining in 3D.
  • Have in mind that some 3D Effects will behave differently in SVGs (some browsers are still buggy about it).
  • The default font family used is "Roboto Mono",monospace, in case you are using content in pseudo elements.
  • When you define a gradient or image as one of the three main CSS variabled, we lock the color so users can't change them in your theme.

Colours

You can customize the colors by changing the CSS variables used. They are:

  • --color-primary
  • --color-secondary
  • --color-third

You can also customize them (as well as the body's background from your theme config).

IMPORTANT WHen using colors (not image URLs or gradients) in the variables, always use colors in valid formats as #000000 or rgba(0, 0, 0, 0). Do not use a short version of hex colors (like #f90 instead of #ff9900). We use those formats to validate and keep the controllers up to date, and the HTML Color Input do not allow the short version of hexadecimal colors.

Transitions

All elements will animate any change using CSS Transitions. Feel free to customize transitions or create animations, but be careful to always apply them under your theme's className.

Contributions

When submiting a new theme, you are giving us permission to use it and show it in different places. Whenever possible, we will attribute cradits to your theme.
Your reference will stay in this repository as the author's reference for the theme.

Send us your pull requests and we will approve them as we identify they are not braking any rules.

Before you submit, please be sure you follow the rules described in the CODE_OF_CONDUCT.md file.

Logos/themes that are offensive, promote hate or prejudice or brake any rule or law will not be accepted.