Semantic UI
A Kickstarter/Guide to Semantic Styling
While in Mod 4 at Flatiron, the topic of Material UI vs Semantic UI came up. It was a fleeting reference and I was left writing a Note To Self: “Google Semantic & Material UIs”. (I am continually surprised at the number of terms/tools that come up that I’ve never heard of! #StudentLife) What I’ve since come to understand is that Semantic and Material are both front-end libraries, specifically made for JavaScript frameworks. Semantic can be used with other JS frameworks while Material’s components seems to have been created directly for React apps. There are other front end framework libraries: Tailwind CSS is quite new (it was first released in May 2019) and trending these days, and honestly from their website looks very cool; Bootstrap, which can be installed/used with JavaScript- or Ruby-based frameworks, claims to be “the world’s most popular front-end open source toolkit”. And these are not the only ones!
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:
import 'semantic-ui-css/semantic.min.css'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: position=“right” or inverted while the JSX ones look like this: style={{fontSize: 24}}
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:
and here:
Enjoy your Semantic Styling!!!
