Semantic UI and Sage on WordPress

Following on from Semantic UI and Roots lets follow-up and get the SASS port of Semantic UI working with and customized into something like a theme.

Baseline with Bootstrap

Since I am new to Sage and Roots and Trellis, and also Facebook’s new npm client called yarn lets get a baseline theme working with the default Bootstrap 4.


➜ themes composer create-project roots/sage openplanetculture.com dev-master
Installing roots/sage (dev-master 35edef6ae75280d060f3ef022feaf77b6d1cdb54)
- Installing roots/sage (dev-master master) Cloning master from cache
Created project in openplanetculture.com
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 14 installs, 0 updates, 0 removals
- Installing composer/installers (v1.2.0) Loading from cache
- Installing doctrine/inflector (v1.1.0) Loading from cache
- Installing paragonie/random_compat (v2.0.7) Loading from cache
- Installing illuminate/contracts (v5.4.13) Loading from cache
- Installing illuminate/support (v5.4.13) Loading from cache
- Installing illuminate/config (v5.4.13) Loading from cache
- Installing psr/log (1.0.2) Loading from cache
- Installing symfony/debug (v3.2.4) Loading from cache
- Installing symfony/finder (v3.2.4) Loading from cache
- Installing illuminate/filesystem (v5.4.13) Loading from cache
- Installing illuminate/container (v5.4.13) Loading from cache
- Installing illuminate/events (v5.4.13) Loading from cache
- Installing illuminate/view (v5.4.13) Loading from cache
- Installing squizlabs/php_codesniffer (2.8.0) Loading from cache
paragonie/random_compat suggests installing ext-libsodium (Provides a modern crypto API that can be used to generate random bytes.)
illuminate/support suggests installing symfony/process (Required to use the composer class (~3.2).)
illuminate/support suggests installing symfony/var-dumper (Required to use the dd function (~3.2).)
illuminate/filesystem suggests installing league/flysystem (Required to use the Flysystem local and FTP drivers (~1.0).)
illuminate/filesystem suggests installing league/flysystem-aws-s3-v3 (Required to use the Flysystem S3 driver (~1.0).)
illuminate/filesystem suggests installing league/flysystem-rackspace (Required to use the Flysystem Rackspace driver (~1.0).)
Generating autoload files
Do you want to remove the existing VCS (.git, .svn..) history? [Y,n]? y

Roots\Sage\PostCreateProject::updateHeaders
Define theme headers. Press enter key for default.
Theme Name [Sage Starter Theme]: Open Planet Cuture
Theme URI [https://roots.io/sage/]: http://openplanetculture.com
Theme Description [Sage is a WordPress starter theme.]: Open Planet Culture WordPress theme
Theme Version [9.0.0-beta.2]:
Theme Author [Roots]: Devekko
Theme Author URI [https://roots.io/]: http://devekko.com
Roots\Sage\PostCreateProject::selectFramework
Select a CSS framework (Default: Bootstrap)
[0] Bootstrap
[1] Foundation
[2] None
0
Roots\Sage\PostCreateProject::addFontAwesome
Add Font Awesome? [y,N]? y
Roots\Sage\PostCreateProject::buildOptions
Configure build settings. Press enter key for default.
Path to theme directory (eg. /wp-content/themes/sage) [/app/themes/openplanetculture.com]:
Local development URL of WP site [http://example.dev]: http://openplanetculture.dev

now we run yarn

yarn, Facebook’s new npm client

we run yarn in our theme folder


➜ themes cd openplanetculture.com
➜ openplanetculture.com yarn
yarn install v0.21.3
[1/4] πŸ” Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] πŸ”— Linking dependencies...
[4/4] πŸ“ƒ Building fresh packages...
success Saved lockfile.
✨ Done in 23.83s.
➜ openplanetculture.com

yarn and package.json

We can see package.json what commands will do what in openplanetculture.com/site/web/app/themes/openplanetculture.com/package.json

web.config.js


....
"scripts": {
"build": "webpack --progress --config assets/build/webpack.config.js",
"build:production": "webpack --progress -p --config assets/build/webpack.config.js",
"build:profile": "webpack --progress --profile --json --config assets/build/webpack.config.js",
"start": "webpack --hide-modules --watch --config assets/build/webpack.config.js",
"rmdist": "rimraf dist",
"lint": "eslint assets/scripts assets/build",
"test": "yarn run lint"
},
"engines": {
"node": ">= 6.9.4"
},
....

we want to run yarn and get it to watch for changes

➜ openplanetculture.com yarn run start
yarn run v0.21.3
$ webpack --hide-modules --watch --config assets/build/webpack.config.js

Webpack is watching the files…

[BS] [HTML Injector] Running...
[BS] Proxying: http://openplanetculture.dev
[BS] Access URLs:


   Local: http://localhost:3000
External: http://10.1.10.51:3000

      UI: http://localhost:3001

UI External: http://10.1.10.51:3001


[BS] Watching files...

checking Chrome developer tools we see 404’s for css and the dist folder is empty

Stop yarn

we stop yarn with CTRL+c

and run yarn build which seems to generate the CSS

yarn build
yarn build v0.21.3
$ webpack --progress --config assets/build/webpack.config.js
Hash: 8736dc5e9e2233db1dc9
Version: webpack 2.2.0
Time: 5979ms
Asset Size Chunks Chunk Names
scripts/main.js 165 kB 0 [emitted] main
vendor/fontawesome-webfont_674f50d2.eot 166 kB [emitted]
vendor/fontawesome-webfont_b06871f2.ttf 166 kB [emitted]
vendor/fontawesome-webfont_af7ae505.woff2 77.2 kB [emitted]
vendor/fontawesome-webfont_fee66e71.woff 98 kB [emitted]
vendor/fontawesome-webfont_912ec66d.svg 444 kB [emitted] [big]
scripts/customizer.js 3.41 kB 1 [emitted] customizer
styles/main.css 247 kB 0 [emitted] main
scripts/main.js.map 274 kB 0 [emitted] main
styles/main.css.map 516 kB 0 [emitted] main
scripts/customizer.js.map 3.24 kB 1 [emitted] customizer
[1] ./scripts/customizer.js 135 bytes {1} [built]
[2] ./scripts/main.js 634 bytes {0} [built]
[3] ./styles/main.scss 41 bytes {0} [built]
[4] ../~/bootstrap/dist/js/bootstrap.js 99.9 kB {0} [built]
[5] ./scripts/routes/about.js 102 bytes {0} [built]
[6] ./scripts/routes/common.js 209 bytes {0} [built]
[7] ./scripts/routes/home.js 203 bytes {0} [built]
[8] ./scripts/util/Router.js 1.39 kB {0} [built]
[9] ./scripts/util/camelCase.js 298 bytes {0} [built]
[10] ../~/tether/dist/js/tether.js 56.4 kB {0} [built]
[11] multi ./scripts/customizer.js 28 bytes {1} [built]
[12] multi ./scripts/main.js ./styles/main.scss 40 bytes {0} [built]
+ 1 hidden modules
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
vendor/fontawesome-webfont_674f50d2.eot 166 kB [emitted]
vendor/fontawesome-webfont_912ec66d.svg 444 kB [emitted] [big]
vendor/fontawesome-webfont_b06871f2.ttf 166 kB [emitted]
vendor/fontawesome-webfont_af7ae505.woff2 77.2 kB [emitted]
vendor/fontawesome-webfont_fee66e71.woff 98 kB [emitted]
[0] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[1] ../~/font-awesome/fonts/fontawesome-webfont.eot 85 bytes {0} [built]
[2] ../~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 85 bytes {0} [built]
[3] ../~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 85 bytes {0} [built]
[4] ../~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 85 bytes {0} [built]
[5] ../~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 87 bytes {0} [built]
[6] ../~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 86 bytes {0} [built]
[7] ../~/css-loader?+sourceMap!../~/postcss-loader!../~/resolve-url-loader?+sourceMap!../~/sass-loader?+sourceMap!./styles/main.scss 800 kB {0} [built]
✨ Done in 7.35s.

Sage 9 dev docs

main.css is not working, so we need to dig into the Sage 9 docs

  1. Theme installation
  2. Theme set-up

ok, to get styles.css rendering properly into into dist folder we need to update sage/main.css to openplanetculture.com/main.css in src/setup.php


add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('openplanetculture.com/main.css', asset_path('styles/main.css'), false, null);
wp_enqueue_script('openplanetculture.com/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
}, 100);

browsersync and sage 9 dev

now when we update variables such and brand color in openplanetculture.com/site/web/app/themes/openplanetculture.com/assets/styles/common/_variables.scss

we get a change in color instantly !

that’s our baseline with Bootstrap 4

Sage 9 dev Bootstrap 4
Sage 9 dev Bootstrap 4

Part 3

Finally, Semantic UI SASS, working on this now