Dash layout the easy way with W3.CSS

Dash Python
1

Hey everyone,

As someone new not only to Dash, but also to Python, HTML and CSS, I’d like to share some of the things I’ve learned over the last couple of months since I first discovered Dash.

I’m sure that if you are a pro at CSS, the style sheet in the Dash tutorial will do everything you need. However, I was mystified by how to get anything to line up the way I wanted in the layout. If you are struggling with the same thing, I recommend trying W3.CSS. If you’re unfamiliar, here is the intro from the w3schools website:

W3.CSS is a modern CSS framework with built-in responsiveness. It supports responsive mobile first design by default, and it is smaller and faster than similar CSS frameworks. W3.CSS can also speed up and simplify web development because it is easier to learn, and easier to use than other CSS frameworks:

I used the tutorial as a style guide for my own apps. There are lots of code examples that demonstrate how each class works. Once you find something you need, you just have to change the syntax so it works with Dash. Note that any dash component that accepts a keyword argument of className can be styled with W3.CSS.

Below are a few examples to get you started with the syntax differences between W3.CSS and Dash. I pulled these directly from the W3.CSS tutorials. I hope you find this helpful. If you would like more examples, please let me know.

import dash
import dash_core_components as dcc
import dash_html_components as html

# Replace the style sheet with W3-CSS
#external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

# New style sheet:
external_stylesheets = ['https://www.w3schools.com/w3css/4/w3.css']


# If you want to jazz up your site with some icons and fancier fonts, include the cloudflare as well:
#external_stylesheets = [
#    'https://www.w3schools.com/w3css/4/w3.css',
#    {
#        'href': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
#        'rel': 'stylesheet',
#    }
#]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

    # W3.CSS sytax from:
    #https://www.w3schools.com/w3css/w3css_containers.asp
    #<div class="w3-container">
    #     <h2>Displaying Colors</h2>
    #     <p>The w3-color classes can be used to add colors to any HTML element.</p>
    #</div>

    #<div class="w3-container w3-red">
    #    <p>London is the capital city of England.</p>
    #</div>

    # Dash Syntax:
    html.Div([
        html.H2('Displaying Colors'),
        html.P('The w3-color classes can be used to add colors to any HTML element.'),        
    ], className='w3-container'),


    html.Div([        
        html.P('London is the capital city of England'),        
    ], className='w3-container w3-red'),


    # W3.CSS sytax from:
    #https://www.w3schools.com/w3css/w3css_borders.asp
    #<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
    #     <p>Thick (invisible) bottom border that turns green on hover.</p>
    #</div>

    # Dash Syntax:
    html.Div([        
        html.P('Thick (invisible) bottom border that turns green on hover.'),        
    ], className='w3-panel w3-bottombar w3-border-white w3-hover-border-green'),

     

    # W3.CSS sytax from:
    #https://www.w3schools.com/w3css/w3css_responsive.asp
    #<div class="w3-container">
    #    <h2>Mobile First Responsiveness</h2>
    #    <h3>Nested Rows (w3-half inside w3-half)</h3>
    #    <p class="w3-large">Try to resize the window!</p>
    #    </div>

    #    <div class="w3-row">
    #      <div class="w3-half w3-container w3-green">
    #        <h2>w3-half</h2>
    #        <div class="w3-row">
    #          <div class="w3-half w3-container w3-red">
    #            <h2>w3-half</h2>  
    #            <p>This is a paragraph.</p>
    #          </div>
    #          <div class="w3-half w3-container w3-yellow">
    #            <h2>w3-half</h2>  
    #            <p>This is a paragraph.</p>
    #          </div>
    #        </div>
    #      </div>
    #      <div class="w3-half w3-container w3-blue">
    #        <h2>w3-half</h2>
    #        <div class="w3-row">
    #          <div class="w3-half w3-container w3-red">
    #            <h2>w3-half</h2>  
    #            <p>This is a paragraph.</p>
    #          </div>
    #          <div class="w3-half w3-container w3-yellow">
    #            <h2>w3-half</h2>  
    #            <p>This is a paragraph.</p>
    #          </div>
    #        </div>
    #      </div>
    #    </div>
       
    # Dash Syntax:
    html.Div([
        html.H2('Moble First Responsiveness'),
        html.P('Try resizing the screen'),
    ], className='w3-container'),
    html.Div([
        html.Div([
            html.H2('w3-half'),            
            html.Div([
                html.Div([
                    html.H5('You can put a different'),                      
                ],className='w3-half w3-container w3-red'),
                html.Div([
                    html.H5('Dash component'),
                ],className='w3-half w3-container w3-yellow'),
            ],className='w3-row'),
        ],className='w3-half w3-container w3-blue'),
        html.Div([
            html.H2('w3-half'),
             html.Div([
                html.Div([
                    html.H5('into each container'),
                ],className='w3-half w3-container w3-red'),
                html.Div([
                    html.H5('and they stay aligned!'),                    
                ],className='w3-half w3-container w3-yellow'),
            ],className='w3-row'),
        ],className='w3-half w3-container w3-green'),
    ],className='w3-row'),  
    
])

if __name__ == '__main__':
    app.run_server(debug=True)
1 Like