WebgeoDa Scaffolding
More Maps. Fewer Platforms.
1.0.0
1.0.0
  • About Webgeoda Scaffolding
  • Data Concepts
  • Getting Started
  • Libraries and Dependencies
  • File Structure Overview
  • Data
    • Importing Data
    • Accessing Exernal Data
    • Making an API
  • Variables
    • Overview
    • Continuous
    • Categorical
    • LISA
    • Colors
    • Variable Specification
  • Static Pages
    • Adding and Customizing Pages
    • Styling and CSS Modules
  • Map Customization
    • Changing the Background Map Tiles
    • Visualization Modes
    • Change Tooltip and Data Sidebar Information
    • Modifying Layers
  • Widgets
    • Data Exploration Widgets
    • Widget Layouts
  • Deploying
    • Netlify
    • Vercel
    • Github Pages (or elsewhere)
  • Advanced
    • jsGeoDa
    • Next.JS
    • Alternate Map Views
    • Binary Data Formats
Powered by GitBook
On this page
  • Creating and Importing CSS Modules
  • Using CSS Module Styles
  • Using Global Styles
  • Grid Layouts

Was this helpful?

  1. Static Pages

Styling and CSS Modules

PreviousAdding and Customizing PagesNextChanging the Background Map Tiles

Last updated 3 years ago

Was this helpful?

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 .

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

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

WebGeoDa includes , 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.

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 .

mdn docs?
Flexbox Grid
Flexbox Grid