Styling and CSS Modules

WebGeoDa scaffolding includes CSS module support for local CSS on each page or component. We recommend creating a new CSS module file for each new page and then importing that to your JavaScript file. For an introduction to CSS, visit mdn docs?.

Creating and Importing CSS Modules

If you had a page data.js, you could create a new CSS module, styles/Data.module.css. This works just like any CSS file, but will be specifically scoped for the JavaScript files where it's imported. You can import styles at the top of your JavaScript file like this:

// pages/data.js
import Head from 'next/head'
import styles from '../styles/Data.module.css'

Now, you can start writing your CSS rules, which might look something like this:

.container {
    min-height: 100vh;
    /** some rules */
}

.main {
    padding: 5rem 0;
    flex: 1;
    display: flex;
    /** some more rules */
}

Using CSS Module Styles

After importing your CSS file and adding rules, you can access your styles right in your JavaScript function. JSX requires CSS classes to be called slightly differently than normal html, using className='myClass' instead of class='myClass'. CSS IDs can still be called normally, and nested selectors, like nav .logo img will work as expected. Here's how to apply a CSS class from your CSS module:

<h1 className={styles.title}>About Webgeoda</h1>
<h2 className={styles.sectionHead}>Data Sources</h2>

Here, we use <h1> and <h2> tags that are given a className property from the imported styles CSS module (styles.title and styles.sectionHead specifically). In JSX, we apply these styles using curly braces {} since they are imported from the CSS module.

Using Global Styles

In addition to calling scoped styles from your CSS modules, you can apply simple CSS classes in a more traditional way from styles/global.css and styles/grid.css:

<div className="row rules horizontally-centered">
    <!-- some content -->
</div>

Grid Layouts

WebGeoDa includes Flexbox Grid, a lightweight CSS column system for defining column widths at multiple responsive breakpoints. This styling allows for 12-column grid layouts with responsive xs, sm, md and lg breakpoints. The xs and sm breakpoints are for mobile and tablet devices, where you might want fewer columns, the md for mid-size displays, and the lg for laptop or desktop size resolutions. Tagging divs, or other html elements with col-breakpoint-number of columns (eg. col-md-6) defines its column layout. The parent element should be tagged with the CSS class row.

Here's a quick example of three columns:

<div className="row rules">
    <div className="col-xs-12 col-md-6 col-lg-4">
        <!-- some content -->
    </div>
    <div className="col-xs-12 col-md-6 col-lg-4">
        <!-- some content -->
    </div>
    <div className="col-xs-12 col-md-6 col-lg-4">
        <!-- some content -->
    </div>
</div> <!-- end row -->

On desktop, this will display three columns side by side, on a mid-size display two columns and then a third on a new row, and on mobile this will display one single collapsed column. More options, like row-reordering, fluid columns, and spacing options are available at Flexbox Grid.