Styling and front-end assets
Romanesco installation - Part 2
IMPORTANT
There is a command line installer available now, so no need to follow these steps manually anymore. Go check out Romanesco Seed and save yourself some trouble.
IMPORTANT
The Romanesco project recently switched to Fomantic UI for providing the frontend elements. This is a community fork of Semantic UI, which started due to lack of development on the original project. It's a drop-in replacement, so everything should still work as described below.
This covers the installation of Semantic UI, including a custom Romanesco theme.
By default, a parsed Semantic UI CSS file is already included. This will ensure that there's some basic styling present when you start a new project.
If you want to change the styling yourself, you could of course just edit the semantic.css file directly or load your own CSS file on top of it. But that would make things cumbersome, bloated and hacky, so I'd strongly advice against that.
Instead, install Semantic UI yourself and edit the site theme there. This gives you the power and flexibility of using variables, plus it keeps things neat and upgradeable. For the steps listed below, you'll need the following tools installed and running on your system:
- Git
- NodeJS
- Node Package Manager (NPM)
- gulp-cli (global)
Ok, here we go:
Install Semantic UI
npm install fomantic-ui --save
Follow the instructions in the installer, choose express or advanced when asked if you want to update the installation paths.
Point Semantic UI to assets/semantic/ instead of semantic/. The rest of the settings are fine by default.
Lots of mumbo jumbo will flash through your terminal, and if all goes well you end up with a fresh Semantic UI install.
Install Romanesco theme
Romanesco comes with a custom Semantic UI theme. This is a separate Git repository, which needs to be added to the theme folder. From inside your project root:
cd assets/semantic/src/themes
mkdir romanesco
git clone https://github.com/hugopeek/romanesco-theme/ romanesco
This theme is excluded from your main Romanesco repository by default. You can update it any time you want with git pull, followed by a gulp build.
See the theming structure section to learn more about how to override the theme or create your own.
Build Semantic UI
To regenerate all Semantic UI assets, go to the assets/semantic/ root folder inside your project and run:
gulp build
This builds all the CSS and JavaScript files in 1 go. If you are only working on 1 of these, you can also build the CSS or JS separately by running either gulp build-css or gulp build-js.
If everything is up-to-date within Romanesco, nothing will change if you run the Semantic UI build command for the first time (since that CSS is already included in /dist/). Nonetheless, it's a good thing to perform this trial run to see if the build process works as expected.
Closing comments
There is a downside to this build process: it takes quite long to run. Mine is currently around 15-20 seconds for the whole thing, meaning you'll have to wait this long every time you want to see a styling update applied. This could be a huge disturbance in your development flow, especially if you're used to working with something like BrowserSync (which provides real-time updates of your stylesheet across a number of connected browsers and devices).
This can be a dealbreaker to some front-enders, but I've learned to live with it. Now I'm adjusting the styles in the inspector first, before applying them to the actual SUI files. It forces you to think of what you're doing more so you'll get it right the first time, thus taking some of the trial and error out of your workflow. It's certainly not ideal, but it works. Besides: because you're using patterns and themes now to structure your styling, you'll find yourself spending much less time writing CSS anyway!