CSS and HTML Stylesheet Resources

[chriddyp]

Hey @TomFarrand – Welcome to Dash!

@TomFarrand

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.)

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

@TomFarrand

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.

@TomFarrand

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

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