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

Related tags

CSS Skeleton
Overview

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.

Comments
  • Un-jQuerified tabs.

    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

    opened by pinktrink 19
  • Creates LESS Version of Skeleton

    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.
    feature 
    opened by WhatsNewSaes 16
  • Remove maximum-scale=1 for better usability

    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 :)

    opened by jordanlev 16
  • getskeleton site shows 12 columns - confusing

    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

    opened by mraaroncruz 16
  • Add styles for tables

    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.

    opened by RobertAudi 13
  • More Documentation

    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!

    docs 
    opened by ziyaddin 12
  • Is there a more active fork of Skeleton?

    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?

    opened by sdrib 10
  • Sticky Footer

    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!

    opened by margagn 10
  • Different height of buttons

    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.

    opened by thesealion 10
  • Missing http in the Font link

    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">
    
    opened by Leo-G 9
  • cant access select menu content

    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?

    opened by diegolaz 9
  • Why have the button a fixed height?

    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

    opened by janstieler 0
  • SSL cert for getskeleton.com

    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.

    opened by coldcity 0
  • Need Help with Rows and columns

    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?

    opened by jqueryhacker 3
Releases(2.0.4)
  • 2.0.4(Dec 29, 2014)

  • 2.0.3(Dec 29, 2014)

    Really small point release just cleaning up a few odds and ends:

    • https://github.com/dhg/Skeleton/pull/224: Removing a duplicated rule
    • https://github.com/dhg/Skeleton/pull/215: Removing a redundant selector
    • https://github.com/dhg/Skeleton/pull/212: Cleaning up favicon tag
    • https://github.com/dhg/Skeleton/pull/209: Fixing a minor typo in a comment
    • https://github.com/dhg/Skeleton/commit/08b0f50159a51de5b1c456988f227ea10cce6a7c: Removing trailing whitespaces
    Source code(tar.gz)
    Source code(zip)
    Skeleton-2.0.3.zip(8.11 KB)
  • v2.0.2(Dec 16, 2014)

    The following issues were addressed in this release:

    • #173: Remove maximum scale for accessibility
    • #184: Changed Google Fonts link
    • #205: Added input types for "tel" and "url". Also cleaned a few other small form styles
    • #196: Cleaned up property order to match the general principles outlined here: http://markdotto.com/2011/11/29/css-property-order/
    • #186: Addressed smaller viewports being limited to 80%. Now .container uses 20px padding for any viewport sub-400px, 85% width for 400-550px viewport, and 80% for 550px and larger viewports (with the same default max-width of 960px)
    • Made small grid improvements in decreasing specificities drastically and removing default bottom margin on .row
    Source code(tar.gz)
    Source code(zip)
    Skeleton-2.0.2.zip(8.14 KB)
  • v2.0.1(Dec 11, 2014)

  • v2.0(Dec 9, 2014)

    A whole new version of Skeleton! In short, here's what's been changed:

    • A new truly responsive grid based on percentages
    • Mobile first media queries
    • New typeface Raleway as default
    • Generally simpler style
    • More robust forms (especially in relation to grid)
    • Inclusion of basic table styling
    • Inclusion of super basic code styling
    • Using Normalize.css as the "reset"
    • Removing Apple touch icons
    Source code(tar.gz)
    Source code(zip)
    Skeleton.2.0.zip(9.00 KB)
  • v1.2(Dec 8, 2014)

    The stable build of Skeleton that's been basically unchanged for the past couple years.

    Versions prior to this release didn't take advantage of Github's "releases" feature. Informally, the history of those releases were:

    • V1.0.0 (5/15/2011): Initial release of Skeleton.
    • V1.0.1 (5/19/2011): Made some quick changes based on input from Github and fellow designers.
      • Refined the app.js to make faster and cleaner
      • Added Apple touch icons
      • Removed some bloated CSS lines from the base.css
      • Added an :active button class
      • Changed Skeleton favicon
      • Added MIT licensing
    • V1.0.2 (5/20/2011): Added more input declarations to the .button styles and included legend in CSS
    • V1.0.3 (7/17/2011): Fixed the issue of failed "zooming" on browsers.
    • V1.1 (8/17/2011): A lot of cleanup changes. I finally feel comfortable throwing a 1.1 on this bad boy.
      • App.js is now just tabs.js
      • Tab CSS now works perfectly on IE7+
      • Rewrote layout.css media-query spaces to be easier to understand
      • Stripping some rogue whitespace and reformatting a bit
      • Fixing broken doctype declaration
    • V1.2 (6/20/2012): Pruning Skeleton down to some more bare bones :)
      • Remove tabs and all JS
    Source code(tar.gz)
    Source code(zip)
    Skeleton.zip(28.35 KB)
A responsive HTML template for coding projects with a clean, user friendly design. Crafted with the latest web technologies, the template is suitable for landing pages and documentations.

Scribbler - a responsive HTML template for coding projects and documentations Scribbler is a responsive HTML/CSS/Javascript template designed for deve

Amie Chen 394 Jan 1, 2023
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
A modern, responsive CSS boilerplate library to kickstart any web-based project.

Peacock CSS Peacock is a modern, responsive CSS boilerplate library to kickstart any web-based project. It is simple, lightweight and it contains all

Binary Birds 8 Jan 23, 2022
A simple, performance-first, SEO-friendly Hugo theme

Hugo Theme Luna A simple, performance-first, SEO-friendly Hugo theme ?? Example | 中文文档 Introduction Using Tailwindcss Custom Themes Many shortcodes Da

Ice-Hazymoon 184 Jan 5, 2023
The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

Install | Documentation | Releases | Contributing Foundation is the most advanced responsive front-end framework in the world. Quickly go from prototy

Foundation 29.4k Jan 4, 2023
A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

Pure CSS 22.7k Jan 3, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
A responsive, Bootstrap landing page template created by Start Bootstrap

Start Bootstrap - Landing Page Landing Page is a multipurpose landing page template for Bootstrap created by Start Bootstrap. Preview View Live Previe

Start Bootstrap 1.4k Jan 3, 2023
Free responsive one page portfolio template

Portfolio one page template - ARCHIVED Flat and responsive website template, designed and coded by Maxim Orlov. Demo: http://website-templates.github.

Website templates 164 Jan 2, 2023
📱 Free to use static generated website template for your mobile app

Mobile App Landing Page Template ?? Free to use static generated landing page template for your mobile app ?? Features Mobile App Landing Page Templat

Sandoche ADITTANE 467 Dec 30, 2022
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
⚙️ Static site boilerplate. Using Gulp, PugJS, and Sass.

?? Alaska | Static-site Boilerplate ⚡ Fastest way to build HTML and CSS static sites. You don't have to learn complicated tools to build simple websit

Alaska Labs 8 Sep 10, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Jan 1, 2023
A bare-bones CSS reset for modern web development.

A modern CSS reset A tiny little reset that you can use as the basis of your CSS projects. You can read a breakdown of it here. Installation NPM: npm

Andy Bell 2.7k Jan 1, 2023
Playground for GNOME development

Workbench Playground for GNOME development Workbench aims to provide a great developer experience for the following use cases An application to learn

Sonny Piers 344 Jan 5, 2023
Simplify gnome-extensions development

GISP GISP Is a Starter Pack About GISP is a project to simplify ?? gnome-extensions development. There're hundrends (maybe thousands?) of javascript d

Leandro Simões 3 Jul 18, 2022
Simple CSS library for semantic HTML markup

awsm.css awsm.css is a simple CSS library for semantic HTML, which doesn't require classes, ids, attributes, etc. Just start to create page with HTML5

Igor Adamenko 1.4k Dec 30, 2022
React styling. Plain and simple.

Table of Contents Install Getting Started Usage API Install npm install react-classy Getting Started Classy makes styling React components composable,

Inturn 25 Jan 1, 2023