# 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?](https://docs.webgeoda.org/pages/styling-and-css-modules).

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

```javascript
// 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:

```css
.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:

```jsx
<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`:

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

## Grid Layouts

WebGeoDa includes [Flexbox Grid](http://flexboxgrid.com/), 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 `div`s, 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:

```markup
<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](http://flexboxgrid.com/).