Update the design for this website?

[maciejsaw]

Hi, I'm a strong supporter of BEM methodology and I'd like to contribute to spreading the word about this approach.

I'm a UX Designer with front-end skills and I'd be really do a small lifting for the website, so that it communicates the BEM idea even better.

Here are some suggestions that I'd like to implement

• rebuild the site in static html so that it can be hosted directly on GitHub pages, so that it's more easy to update and maintain
• redesign the frontpage so that it immediately feels like code-related site -- more screenshots -- more to-the-point examples of classic CSS vs. Bem, provide real-life cases when bem is better -- show visually how to use it with SASS -- advertise how good it is for RWD
• expose the logo better
• use BEM correctly on the website code itself, as I noticed there are some small non-BEM styles in the current website CSS

I'm a strong supporter of BEM methodology in practice, so I'm sure I can contribute and provide small tweaks to the methodology itself.

@floatdrop @iamstarkov let me know if you're open to such contributions.

[maciejsaw]

Or maybe we should just redirect the page to https://en.bem.info/ ?

[floatdrop]

Hi!

rebuild the site in static html so that it can be hosted directly on GitHub pages, so that it's more easy to update and maintain

This site is already static, but hosted on different CDN provider – http://surge.sh/

redesign the frontpage so that it immediately feels like code-related site

👍 Could you show some examples of this?

expose the logo better

Maybe we can change background image for that.

use BEM correctly on the website code itself, as I noticed there are some small non-BEM styles in the current website CSS

Yeah, they should be Bemified as well.

P.s. We don't want to close this site and place a redirect on another site for sure.

[maciejsaw]

Perfect, thanks for the answer.

For the immediate code-related feeling I was thinking of showing side by side two screenshots of CSS code, on the left side the classic problematic with lots of nested classes, "important!", "p" items etc. vs. a clean BEM code on the right side.

Changing the background could also help.

Here's a quick sketch that I put together in 5 minutes in Photoshop to show my idea (note that it's not super polished design, just a general idea)

[maciejsaw]

On other pages we should also show HTML structure in such comparison, because BEM also has beneficial impact on HTML readability

[magicznyleszek]

I would like this update too. When I google for BEM to show someone quickly what is it and I land on http://getbem.com/ - there is zero useful information there plus it's really not obvious that I've landed on a proper page. What I would prefer to see this piece of code example on top of the page:

.parent-block__child-element--fancy-modifier

Because it is pretty easy to display most of the BEM features with just a single selector.