Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

  • By Dave Gamache
  • Last update: Jan 8, 2023
  • Comments: 14

Skeleton

Skeleton is a simple, responsive boilerplate to kickstart any responsive project.

Check out http://getskeleton.com for documentation and details.

Getting started

There are a couple ways to download Skeleton:

  • Download the zip
  • Clone the repo: git clone https://github.com/dhg/Skeleton.git (Note: this is under active development, so if you're looking for stable and safe, use the zipped download)

What's in the download?

The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point.

Skeleton/
├── index.html
├── css/
│   ├── normalize.min.css
│   └── skeleton.css
└── images/
    └── favicon.ico

Why it's awesome

Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more.

  • Around 400 lines of CSS unminified and with comments
  • It's a starting point, not a UI framework
  • No compiling or installing...just vanilla CSS

Browser support

  • Chrome latest
  • Firefox latest
  • Opera latest
  • Safari latest
  • IE latest

The above list is non-exhaustive. Skeleton works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE9.

License

All parts of Skeleton are free to use and abuse under the open-source MIT license.

Extensions

The following are extensions to Skeleton built by the community. They are not officially supported, but all have been tested and are compatible with v2.0 (exact release noted):

  • Skeleton on LESS: Skeleton built with LESS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1)
  • Skeleton on Sass: Skeleton built with Sass for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1)

Have an extension you want to see here? Just shoot an email to [email protected] with your extension!

Colophon

Skeleton was built using Sublime Text 3 and designed with Sketch. The typeface Raleway was created by Matt McInerney and Pablo Impallari. Code highlighting by Google's Prettify library. Icons in the header of the documentation are all derivative work of icons from The Noun Project. Feather by Zach VanDeHey, Pen (with cap) by Ed Harrison, Pen (with clicker) by Matthew Hall, and Watch by Julien Deveaux.

Acknowledgement

Skeleton was created by Dave Gamache for a better web.

Github

https://github.com/dhg/Skeleton

Comments(14)

  • 1

    Un-jQuerified tabs.

    Tabs are now in pure JS, tested in IE7, IE8, IE9, Chrome, Firefox 4, Opera, and Safari. I don't have the the tools at the moment to test it in any mobile browsers, but seriously if it works in IE7 AND Chrome, it pretty much has to work in mobile browsers. =P

  • 2

    Creates LESS Version of Skeleton

    GRID:

    • Added LESS logic so that grid columns are calculated from the total width of the container

    VARIABLES:

    • Hooked up color variables to fonts, buttons, border, backgrounds

    BREAKPOINTS:

    • defined breakpoints by variables.

    GRUNT:

    • Grunt will watch the less file and any time there is a change saved it will compile to the css/skeleton.css file.
  • 3

    Remove maximum-scale=1 for better usability

    I'm not sure if any of the styles actually rely on this, but I think it would be good to remove maximum-scale=1 from the "viewport" meta tag because that makes it very hard for people with poor vision to read on phones (because they can't zoom in on the text). At the very least, it would be good to put a comment in the html or somewhere in the docs explaining the benefits that leaving it in provides versus the drawbacks of making the site hard to read for people over the age of 40 :)

  • 4

    getskeleton site shows 12 columns - confusing

    Hi, I was just introduced to skeleton through Spree. I really like it. I was very confused that on the site you give a 12 column example though there are 16 columns in your grid. The only mention to 16 columns is if you view the source for the example and there is this

    <!-- Give column value in word form (one, two..., twelve) -->
<div class="sixteen columns">
    <h1>Full Width Column</h1>
</div>

    which seems super vague to me and almost misleading. I looked at the source to see that indeed there are 16 columns. I don't know if a less experienced dev would do the same. I will be using this project often. Thanks for the time you put into it! aaron

  • 5

    Add styles for tables

    I think that as a boilerplate/framework, Skeleton should style tables as well, possibly the same way blueprint does it, with different colors for each rows.

  • 6

    More Documentation

    Thank you for this project, it is awesome but user needs more documentation to work better with this stuff. Could you, please, improve Documentation of this project? Thank you!

  • 7

    Is there a more active fork of Skeleton?

    There are a load of Pull Requests that look promising but have been sitting there form months. There almost 500 forks, anyone any ideas of which one is most up to date?

  • 8

    Sticky Footer

    I am trying to add a "sticky footer" to my web site based on skeleton but I can't get it to work correctly. I am doing this based on the instruction on this website: http://www.cssstickyfooter.com/using-sticky-footer-code.html. In Chrome I get an extra pixel or two in the height of the page which result in a vertical scrollbar and in IE the main container becomes left-aligned.

    Any idea how I should implement this properly based on Skeleton? Thank you Dave for the great work!

  • 9

    Different height of buttons

    If you place together a normal button and an anchor with class="button", you'll notice that they have different height. And it looks really ugly.

  • 10

    Missing http in the Font link

    I got version 2.0.4 from the website and found this

      <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

    It needs to chang to

      <link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  • 11

    cant access select menu content

    ON small screens, when select is created based on a regular menu, the select "onchange" event, cant access the selected value. Is there a way to control the id of the select and the name/value of the options generated?

  • 12

    Why have the button a fixed height?

    Hi, Why have the button a fixed height? This fixed value is not really a good decision for a framework. I run in a problem because I have a multiline button and more than one line is cut off.

    Cheers

  • 13

    SSL cert for getskeleton.com

    Is there any chance of getting a Let's Encrypt (etc) cert on getskeleton.com? I see it's using the GH cert at the moment. I mostly ask because I'm often recommending this boilerplater (it's my go-to, thank you for your great work), and people often come back to me moaning about the cert error their browser spits out.

    A simple solution would be to use a free CloudFlare plan for DNS, which would get you a free SSL cert.

    I don't work for them :D

    Let me know if I can help.

  • 14

    Need Help with Rows and columns

    Hello, I'm trying to set up a simple page with three divs. Unresponsive would look like this Div A Div B Div C where Div B spans 2 rows A and C

    When collapsed, I want them all 100% but in the vertica sequence Div A Div B Div C Can anyone help me with that?

Popular Tag

Related