A Kickstarter/Guide to Semantic Styling
Because my original goal was to decide between Material and Semantic, I decided to simply Google them comparatively. After going down rabbit holes in Quora, Reddit and Stackshare.io, I landed at Slant.co and my (crowdsourced) decision was made: “When comparing Semantic UI vs Material UI, the Slant community recommends Semantic UI for most people. In the question“What is the best CSS framework?” Semantic UI is ranked 6th while Material UI is ranked 13th.” Semantic received 232 upvotes and Material received 19. The public had spoken. Sort of. 😉 Plus in all honesty, Semantic seems quite easy to learn. As per their docs, “Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.” This does seem to be so!
The layout of their docs are a breeze to peruse and get up to speed quickly. On the left side of the page, they break out all of the various component elements so you can select one and browse through various options.
There are a couple of ways to get started, this one is the simplest: go to https://react.semantic-ui.com/. Install the following package into a recently created React app:
npm install semantic-ui-react semantic-ui-css (The second set of code
semantic-ui-css installs a default theme for you. Some tutorial videos show this as a separate step but they seem to have quite recently changed their install process to make the steps even more streamlined.)
Then import the following CSS file at the top of your index.js:
Alternatively you can drop a few lines of the below code into your public/index.html file but you can’t work offline if you do so. I went with the index.js import as listed above.
That is it for install! I was able to pretty quickly put together a Header with a couple of fun/silly options.
The Header component code looks like this, pretty much everything inside of Header is Semantic components and related properties:
There is an exhaustive list of options/properties available for every Semantic component. Note that the Semantic properties look like this:
inverted while the JSX ones look like this:
As with other React-related libraries, you will need to import any component that you use, or the code will break:
Modals are notoriously tricky but the code is easily available to experiment and cut/paste via their Code Sandbox.
As with any new library, work slowly and test as you go. Before you know it you’ll have a beautiful app that stylistically you didn’t have to build from scratch. Why re-invent the wheel, right??
I want to thank Semy Colon for his video tutorials to help me get cute components on the page. (Has there ever been a Youtuber with a better name? I think not.) Also the Atypical Engineer for his helpful video tutorials.
The Semantic docs can be found here:
Semantic empowers designers and developers by creating a shared vocabulary for UI.
Introduction - Semantic UI React
Semantic UI React is the official React integration for Semantic UI . Installation instructions are provided in the…
Enjoy your Semantic Styling!!!