Getting Started with Skeleton, the Simple CSS Boilerplate

The row class is just for clearing floats around the columns. Skeleton provides the following code snippet:

.container:after, 
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

That means, if you want, you can structure your HTML without including the row class. However, in this case you should clear the floats around your columns. To do this, you can use the helper u-cf class as a wrapper for your columns.

Great article and demo. You really helped me understand how Skeleton works. I’ve researched and tried out a couple other boilerplates and I feel that Skeleton would work best for me. I especially like that it is not very restrictive and it also has a nice grid system. Thank you for the article.

Hi @Cthulhoo_X
Thank you! I agree with you… I really like it because it is simple but also powerful at the same time!

Thanks a lot for the geat article and demo! There’s only one thing I wonder…

On http://getskeleton.com/, I read that:

“The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly”.

You say that the wrapper can have a max-width value of 960px.

I downloaded Skeleton and tried to set wrapper max-width to 1200px, and, at least in the basic page of the demo included, everything seems to work fine e.g. columns resize accordingly and the page looks good, when tested on different responsive layouts.

Why then that limitation to 960px? Do I have to expect any unwanted surprise when populating the page?

Thank you for your kind attention

960 is a decent size. There’s no reason why you can’t set it to 1200px. Or even 1500px. Perhaps 1000px. Nothing will break from that alone, considering all children will work on percentages based off the parent width.

Thanks so much for the quick reply! :blush:

ok, i have what might be a ridiculously easy question. i’ve been learning and using CSS over the past few years and have a decent handle on it as it relates to wordpress. now im starting to design some homepages that would be perfect for skeleton. the thing is, im not sure what to do with the files i’ve downloaded from the site. where do i put them and/or how do i use the selectors?

Hi @mirable,

First, you have to download those files and ideally put them in a separate folder (e.g. css folder). Then, you should create another css file (e.g. css/custom.css file) that will include your custom styles. Finally, be sure to add these stylesheets to your html files. See an example here.

Hello George,
Thank you for your tutorial on Skeleton, it looks very interesting!
How do you make a div for the navigation with Skeleton that covers the whole width of the browser instead of just 960px, also do we still have to create the media queries or is it done for you. Thanks!

Sir , thanks a ton for the skeleton demo code.
This might seem like a newbie question, but when I right away copy paste the HTML/CSS from the code pen source to my local editor, most of the things work fine but the following section always gets stacked (even though the screen size is on a laptop >=550px):

<div class="row">
    <div class="six columns">
      <a href="#">
        <h4>Graphic Design</h4>
          <span class="fa fa-picture-o"></span>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
      </a>
    </div>
    <div class="six columns">
      <a href="#">
        <h4>Web Design</h4>
        <span class="fa fa-leaf"></span>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
      </a>
    </div>
  </div>
  <!--end of .row-->

Can you please let me know if I am missing something??

Thanks in advance :smile:

Hey; that alone isn’t recreating the problem for me. You mention that section alone recreates the issue for you; can you set up a codepen or a live demo with this? It will help us debug :slight_smile: .

Thanks for the reply sir.
I have copy pasted the codepen from here - The original article to My codepen (Line by line) and the issue seems fairly reproducible. Please let me know if any other inputs are required.

Hi! Thanks for your message! You have to include in your Codepen demo (or in your projects) Skeleton’s required css file. To do this, first read this page. Then, go to the original demo and see the external CSS resources.

Hi @JoannaKts,

By default, if your navigation is wrapped within an element which has the container class, its max-width is 960px. So, you have to place your navigation outside of this element. Moreover, Skeleton provides a few helper classes such as u-full-width.

Thanks 2 ton George. Inclusion of additional files fixed the issue and now it works like a charm.

1 Like

Thanks for this really helpful post. Perhaps you can answer one more question: I used your advice to create two columns, split two-thirds/one-third. Worked great. Added descriptive text in the wider column to the left, and a button in the narrower column to the left. Then went back to unformatted ([raw]) and added a introductory video.

All good, except the text didn’t retain the paragraph breaks. They show up in the text editor, but not in the published page.

Is there a hard carriage return code I can add to create the necessary line breaks?

Many thanks for any advice you may have!

Hi! Is it possible to create a demo (e.g. Codepen)?

George, I figured that one out. But now I have another (newbie) question!

In the left-side (2/3) column, I have a lot of text content. In the right-side (1/3) column, I have a button. I would like the button to appear in the middle of the column both horizontally and vertically. I have the alignment=center, so it’s aligning in the center horizontally. But it hugs the top of the column vertically.

Is there a way to center it vertically, too? Based on the height required for the content of the adjacent (left-side) column?

Here’s the page I’m working on in case it helps: http://niceworkpublicmedia.org/temp/mission/

THANK YOU !!!

Great! If you really want to vertically align the button based on the height of the left column, one option is to use JS or jQuery. So, first get the height of the left column (two_thirds). Then, set the top property of the right column (one_third last) equal to heightOfLeftColumn/2. Next, apply the transform:translateY(-50%) property to the right column. Finally, remember to do those changes only when your columns aren’t stacked.

If you want to avoid using JS though, you could also use flexbox.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.