Making a site weel looking in Brython

[Jérémie Lefrancois]

Hello,

This is probably not a standard question.

I have discovered brython recentlyand made up a whole website with it.

Wonderful experienc .

A site to play the game Diplomacy in French.

https://diplomania-gen.fr/

No, this is not an advertisement for you to play on the game.

Just that being not very familiar with the Web (but a pure Python dev fanatic) I deployed the full power of brython  to make that site with close to zero knowledge of Javascript.

However, my customer complain the site is ugly.

Any ideas how to make the site well looking ?

Any brython aware graphist I could contact ?

Any easy to do change ?

This is a field of thinking I am uneasy with...

Regards

[Kiko]

2021-05-05 19:56 GMT+02:00, Jérémie Lefrancois <jeremie.l...@gmail.com>:
>
> Hello,
> This is probably not a standard question.
> I have discovered brython recentlyand made up a whole website with it.
> Wonderful experienc .
> A site to play the game Diplomacy in French.
>
> https://diplomania-gen.fr/
>
> No, this is not an advertisement for you to play on the game.
>
> Just that being not very familiar with the Web (but a pure Python dev
> fanatic) I deployed the full power of brython to make that site with close
>
> to zero knowledge of Javascript.
>
> However, my customer complain the site is ugly.

It is not ugly, it is old-fashioned. Since a while ago there is
something called CSS to apply style to html elements.

>
> Any ideas how to make the site well looking ?

Bootstrap would be the easy way [1]. You have trillions of resources
if you search for it.

> Any brython aware graphist I could contact ?

It is not brython specific. It is webdesign and not related with Brython itself.

> Any easy to do change ?

It is pretty easy to start with bootstrap. You can even use a free or
paid theme and adjust it to your taste. [2], [3]
>

[1] https://getbootstrap.com/
[2] https://bootswatch.com/
[3] https://themes.getbootstrap.com/

> This is a field of thinking I am uneasy with...
>
> Regards
>
>

> --
> You received this message because you are subscribed to the Google Groups
> "brython" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to brython+u...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/brython/3e8a32ce-bcf0-4cd3-b4c1-62cf519837b1n%40googlegroups.com.
>

[dgront]

Well, this just needs time, effort and skill. I'd advise to hire a graphics design company. This however is a bit problematic because they want to sell you a simple website based on WordPress or Drupal rather than hand-craft your site.

Best,

Dominik

[Ian Sparks]

This is what CSS frameworks like boostrap are for - to give non-designers a chance to create websites that are "modern looking" (sites using these frameworks tend to look the same but that is another story)

There are a lot of choices. Bootstrap (https://getbootstrap.com/) is generally a good choice (and already suggested) but it has some extra components (modal dialogs, tooltips etc) which require their javascript library and that might be harder to integrate with your brython code. You don't have to use these javascript components but if you decide you like the bootstrap modal then you will have to integrate their javascript.

So you probably want a CSS framework without any javascript - just for the visual styling. Bulma might be a good choice for this situation:  https://bulma.io/documentation/form/general/  (to look at examples of Bulma forms). 

In general these CSS toolkits provide you with 2 things:

1. A "responsive grid" - this just means splitting your web page into columns and rows - something you already solved for yourself but these grids are designed to work nicely on mobile phones and tablets as well as desktop.

2. A set of styling classes for lists, tables, forms, alert boxes etc. 

It should not be too much work to make your site look more modern. That said, I like the design you have - it is pretty clean-looking and unique.

[dgront]

Hi,

So you probably want a CSS framework without any javascript - just for the visual styling. Bulma might be a good choice for this situation:  https://bulma.io/documentation/form/general/  (to look at examples of Bulma forms).

Bulma looks really great! Do you know other such nice libraries to recommend?  I'd like to choose something for my project.

Best,

Dominik

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/2d5e5d97-0730-4e41-8915-e3187a8e3411n%40googlegroups.com.

[Ian Sparks]

There are lots of comparisons out there between frameworks. Bootstrap / Foundation / Bulma are all well known and it shouldn't be too hard to find support on sites like stackoverflow. For bootstrap in particular there are a lot of themes you can choose from which get you away from the default styling (see https://bootswatch.com/ for some free examples)

If you like the Material theme then https://materializecss.com/ might be a good choice but I have no experience and again, comes with its own javascript for more advanced components.

The Tailwind css system is getting a lot of interest. It's a different way of thinking about how to use CSS, so might be worth looking at to see if it fits with your mindset. https://tailwindcss.com/

This website has a pretty good writeup of a bunch of css frameworks: https://athemes.com/collections/best-css-frameworks/

You will come across discussion of things like LESS and SASS. These are like template systems for CSS (so you can switch primary color everywhere in the CSS with one variable change) but like javascript frameworks have become it means you need more tooling to process your CSS before you can use it. Many of the CSS frameworks have customization based on these pre-processors which makes it harder to get started with them in my opinion.