CSS and HTML Stylesheet Resources

Dash Python
1

Hi all,

I have not done any front end design or html work before, and thus am struggling to implement a nice looking design for my application.

I have had a look at the source code for the html_core_components module which provides a list of the available components but there is no explanation of how to implement them, and what they do (what methods I can call on them etc.)

Are there any good resources which will give me an overview of this?

Thanks in advance, appreciate your help!

Tom

2

Hey @TomFarrand – Welcome to Dash!

In short, you won’t call any methods on them. You will always just call them once to declaratively describe the UI.

Since the dash_html_components library is 1-1 with HTML components, any HTML tutorials on the web will do. Here are some recommendations:

  • MDN is a really good resource. They have a great overall HTML tutorial: Introduction to HTML - Learn web development | MDN
  • CodePen.io is a great web tool for playing around with HTML and CSS. Their feed is also very inspiring!
  • I recommend starting with a simple CSS stylesheet that provides some nice defaults. Here is the one that I have been creating for Dash: https://codepen.io/chriddyp/pen/dZVMbK.css. You can view how all of these different elements render in the CodePen version: https://codepen.io/chriddyp/pen/dZVMbK, and even fork it and edit the CSS and HTML in CodePen itself
  • I find that I only use a small subset of the available HTML tags: Div (generic “container”), Img (for images), H1, …, H6 (headers), Hr (horizontal line), Table (simple html tables). For formatting text and components in different sizes or positions, I use the Divwith different CSS styles (html.Div('Red right aligned text', style={'color': 'red', 'textAlign': 'right'}).
  • MDN also has some nice CSS references: CSS first steps overview - Learn web development | MDN
4 Likes
3

That’s brilliant Chris, thank you for getting back to me so quickly!

I will be sure to have a look through those resources.

Hope you have a merry Christmas and a happy New Year!

1 Like
4

And for the record, here is a nice list of CSS libraries: https://github.com/troxler/awesome-css-frameworks.

1 Like
5

Another great resource on CSS “Explained”: https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525

2 Likes