Semantic UI comes with the ability to add themes, but this must be done at build time. Semantic UI is built using LESS, a CSS pre-processing system. LESS adds variables and other useful features to CSS.

Unfortunately, the gatsbyjs starter that I was using imported the Semantic UI as a pre-built CSS file, so there was no easy way to change the theming. This blog post is about how to fix that. Unfortunately, it's harder than it should be!

1. The first step is to add LESS support to gatsbyjs.

   First, install the module: npm install --save gatsby-plugin-less less

   Then add the module into gatsby-config.js:

   module.exports = {
     ...
     plugins: [
       ...,
       `gatsby-plugin-less`,
       ...
     ]
     ...
   }

2. The next step is to add the Semantic UI LESS files to your gatsbyjs app. You can actually do this by installing the semantic-ui-less npm package: npm install --save semantic-ui-less

3. Next you actually need to add the theming configuration files to your project. You can copy these from node-modules/semantic-ui-less, specifically the theme.config.example file and the _site directory. Copy these files to src/semantic and rename theme.config.example to theme.config and _site to site. Since we're using the semantic-ui-less NPM package, we can change the line that imports theme.less to @import (multiple) "~semantic-ui-less/theme.less";. We also need to change the @siteFolder line to @siteFolder: '../../src/semantic/site'; so it uses our version of the site directory. Also, because of an annoying bug, you should add @fontPath : '../assets/fonts'; to the end of theme.config. Having fun yet?

4. Gatsbyjs will use webpack to load semantic-ui-less. If we don't do anything,semantic-ui-less will use its own theme config files. Since we want to use our own, we add the following to gatsby-node.js to make it use our version instead:

   const path = require('path');
   
   exports.onCreateWebpackConfig = ({ actions }) => {
     actions.setWebpackConfig({
       resolve: {
         alias: {
           '../../theme.config$': path.join(__dirname, 'src/semantic/theme.config'),
         },
       },
     });
   };

5. Find references to the precompiled version of semantic, and change them to reference the semantic-ui-less version. For me, this required changing import "../css/semantic.min.css"; in my Layout component to import "semantic-ui-less/semantic.less";.

6. Now we can finally start to theme! Take a look at node_modules/semantic-ui-less/themes/default/site.variables, and pick something to modify. Let's change the font to Comic Sans. We can do that by writing @fontName: 'Comic Sans MS'; in src/semantic/site/globals/site.variables.

7. Behold the splendor of your new font!

Hi there. This is my first blog entry on my new website.

This Christmas break, my wife and I decided to update our websites. Her website was using Concrete5, and mine was a manually edited, single page, static site.

We decided to use this as an opportunity to learn some new Web technologies. As someone who doesn't work in web development, I find it fairly hard to keep up with the latest Web technologies.

This time around, we decided to use the Gatsby static site generator. So launched an exciting delve into many other new (to us, anyway!) web technologies. Since I didn't really know what many of these were, here are my descriptions on a few of them:

• Gatsby

  Gatsby is a static site generator. It builds single page applications using ReactJS. As you'd expect, you can define sites programatically. There is a plugin system that allows you to pull in content from a variety of sources. On this site, I pull in my content from Markdown files.

• ReactJS

  ReactJS is a framework for defining User Interface components in Javascript. They are UI because they provide an interface for the user. They are components in that each component performs a limited function. Components can be used in different pages and applications, and components can be built on top of each other. The reason that React is in the name is that components can share data with each other, and they can automatically react to changes.

• Styled JSX

  ReactJS components are defined in JSX files. Styled JSX is a library that lets you programatically write CSS in the same file to format the component. There are a couple advantages to this. For example, Styled JSX can enforce a local scoping so that CSS rules only apply to elements created by the component the style is being defined in.

  Here's an example from my publications page:

  <style jsx>{`
    span.me {
      text-decoration: underline;
    }
  `}</style>

  There are a lot of other CSS-in-Javascript libraries too.

• PostCSS

  PostCSS is a modular post-processor for CSS. I'm using postcss-nested to allow nesting of CSS rules that is not normally allowed. There are a lot of other interesting plugins available too.

• Semantic UI

  I think of Semantic UI as an abstraction layer for CSS. They define a number of semantic elements or components, and provide nice looking implementations of those semantic elements. Here's an example of some of the components you can easily build using Semantic UI.

• Semantic UI React

  Semantic UI React encapsulates the components of Semantic UI into ReactJS components. In "regular" Semantic UI, you specify components using CSS:

  <div class="card">
    <div class="image">
      <img src="/images/avatar2/large/matthew.png">
    </div>
    <div class="content">
      <div class="header">Matt Giampietro</div>
      <div class="meta">
        <a>Friends</a>
      </div>
      <div class="description">
        Matthew is an interior designer living in New York.
      </div>
    </div>
    <div class="extra content">
      <span class="right floated">
        Joined in 2013
      </span>
      <span>
        <i class="user icon"></i>
        75 Friends
      </span>
    </div>
  </div>

  In React, though, you can refer to them like ReactJS components (which are basically just specialized HTML tags):

  <Card>
   <Image src='/images/avatar/large/matthew.png' />
   <Card.Content>
     <Card.Header>Matthew</Card.Header>
     <Card.Meta>
       <span className='date'>Joined in 2015</span>
     </Card.Meta>
     <Card.Description>
       Matthew is a musician living in Nashville.
     </Card.Description>
   </Card.Content>
   <Card.Content extra>
     <a>
       <Icon name='user' />
       22 Friends
     </a>
   </Card.Content>
  </Card>

  Almost all of this site is built using Semantic UI React. I started from fabien0102's Semantic UI Gatsby Starter, which I really liked because the components are built mostly with Semantic UI React, and so you can just "read" them to understand what's going on.

  I really liked the appearance of greglobinski's Hero Blog Starter, however, so I implemented some of that in Semantic UI. I like the result!