In the context of this discussion, responsive, mobile-first design means a website that looks just as good on a cellphone or a tablet as it does on a laptop screen. It means that a website looks good when you show it to an audience on a projector. It also means that if you’re someone like me who prefers to look at text at 125%, you don’t lose form or function. You can easily see some of those elements of responsiveness by simply resizing your screen.

Good common practices for writing responsive websites include using ems instead of pixels when defining font sizes. ‘Em’ doesn’t really stand for anything anymore, but you can read up on the history of what it once meant here. Now, it commonly refers to the standard size of words in that browser or view. 1em is bigger when viewed at 125% than it is when viewed at 100%, but 1px does not change when you increase or decrease the page. Similarly, it is good practice to use percentages instead of pixels when defining height and width. This text, for example, takes up 80% of its container div instead of having a width of fixed pixels. These are both good strategies for adapting content that you want to keep in the same relative positions and proportions, no matter what the window size is when it is viewed.

Sometimes, however, you want the actual displayed content to change depending on the view. A good example of this is a navigation bar; you might want to show the user all of their options when they are viewing the webpage on a laptop, but collapse the menu into a “hamburger” (a drop-down menu served by an icon that looks like this: ) when it is viewed on a mobile device. Typically, this is handled by writing breakpoints into your CSS. 

A breakpoint is a block of code you add into your CSS stylesheets that only uses that style when the condition in the block is met, such as this:

@media only screen and (min-width: 768px){
background-color: blue;
} 

This code, which makes the background color blue, would only run when the width of the screen is at least 768 pixels. You might use this code for a computer, and write another breakpoint for a tablet, and a third breakpoint for your mobile device.

Then, in your HTML, you write three different nav bars–one with your full navigation for your computer users, one with some sub-navigation for your tablet users with a few descriptive names, and one with the hamburger. You give each of them a descriptive class and then in your CSS breakpoint for the computer you hide the tablet and the mobile nav bars, and in the breakpoint for the tablet you hide the computer and mobile nav bars, and in the breakpoint for the mobile device you hide the computer and the tablet nav bars. It seems like a lot of work, especially when you add in other standard feature changes as you decrease your screen size, like collapsing your columns from five to three to one as the screen shrinks, or displaying a simplified logo instead of a full descriptive banner.

Luckily, Semantic-UI automates a lot of that for you with their grid system. The grid system, described here, is a way to deal with responsive design. Grids are responsive arrangements of elements. You declare a grid by adding the class nameui grid to the parent div. There are a lot of customization options, but the two I use the most are breakpoints and stackable grids.

If you add the class mobile only row to an element inside that grid, it will only appear on a screen the size of a mobile phone. Similarly, you can add computer only row or tablet only row, or even combine them to create a computer tablet only row, which will show up on computers or tablets. This means that instead of writing your HTML to create that div and then create at least three lines of code declaring when that div should appear on the page (showing a mobile nav bar on a mobile device, hiding it on a computer, and hiding it on a tablet), you add three words to your code and Semantic-UI does all of the heavy lifting for you.

The “stackable” grid feature lets you collapse a couple of columns of content into one when the browser is small enough. We utilized this in the Ada Pea Patch program linked above, and Semantic-UI has some really cool examples of it on their website, also linked above. You just add “two column stackable” to that “ui grid” class. Then, make sure that each element that you want to stack has the class column and then presto! Your grids will stack.

This is only scratching the surface of what you can do with Semantic-UI to create a really cool, responsive layout (hard to believe that in such a long post, I know). There are a lot of options to let you resize the margins, for example, or change the positioning of the rows depending on your configuration. I highly recommend that you dig in and explore it yourself.

There will be a short blog intermission on getting Semantic-UI and Heroku to play well with each other, and then I will be done with talking about Semantic-UI. There really is too much there for me to cover in this blog; you just have to go check it out yourself.