Previously on my Arvixe blog posts for Textpattern CMS, I explained how to get up and running with Bootstrap 3 and Foundation 5. Today it’s the turn of Semantic UI 2, a front-end framework that I’ve used for a couple of Textpattern projects and really enjoyed working with. This how-to works in a similar way to before, with what I consider to be an easy, straightforward way to get started with Semantic UI on Textpattern if you want to test drive it. The recommended method of using Semantic UI is with Node and Gulp, but that puts it out of the reach of many Arvixe customers on shared hosting, so the next best thing to get up and running quickly is to use the pre-compiled stylesheets from a CDN such as cdnjs. If your experience with Semantic UI is positive, you can investigate custom builds to fine-tune the code to your requirements.
Start with a standards-compliant HTML5 shell, like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- your content goes here --> </body> </html>
In the current era of mobile-first design, it’s important that websites are responsive to various screen sizes and resolutions. Semantic UI includes a bunch of components to make this happen, so let’s load some extra components and set up some directives:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.min.js"></script> </head> <body> <!-- your content goes here --> </body> </html>
The file `semantic.min.css` is a minified style sheet for all the Semantic UI components. It’s very likely you won’t use all the components, but in the spirit of getting up and running, it’s a good way to explore. The benefit of using a CDN for the Semantic UI files, or any other CDN-hosted framework, is that if other websites have used the same components and the user’s browser has cached it, the time involved in downloading/rendering a page is much smaller. On the same tack, a reduced amount of data transferred from your web server will make it more responsive overall.
Once the page scaffolding is in place, you can start to slot components into place between the `<body>` tags, making sure to use the Semantic UI components where you want them. For example, if you want buttons, you could set up a row of three:
<div class="ui three buttons"> <button class="ui active button">Button #1 of 3</button> <button class="ui button">Button #2 of 3</button> <button class="ui button">Button #3 of 3</button> </div>
Note the class names: they all start with `ui` and have specifics that describe what each should look like. You can find out more about all 50+ components of Semantic UI here.