# dhg/skeleton

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/dhg-skeleton).**

19,410 stars · 3,076 forks · CSS · MIT

## Links

- GitHub: https://github.com/dhg/Skeleton
- Homepage: http://www.getskeleton.com
- awesome-repositories: https://awesome-repositories.com/repository/dhg-skeleton.md

## Description

Skeleton is a lightweight responsive CSS boilerplate and mobile-first framework. It provides a foundation for building mobile-friendly websites through a fluid 12-column grid system, a minimal CSS reset library to normalize browser defaults, and default styling for raw HTML elements.

The project emphasizes a mobile-first development approach, using percentage-based widths and predefined media queries to progressively enhance layouts for larger screens. It includes a utility-first library of single-purpose classes to manage common layout tasks such as floating elements, clearing, and width constraints.

The framework covers broad capability areas including responsive breakpoint management, base typography and form element normalization, and fluid grid layouts. It ensures consistent visual formatting for buttons, lists, and tables across different web browsers.

## Tags

### User Interface & Experience

- [Fluid Percentage Grids](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/windowed-grids/fluid-percentage-grids.md) — Ships a fluid 12-column grid system using percentage-based widths that adapt to any viewport size.
- [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Provides a fluid 12-column grid system that adaptively resizes based on browser window and maximum width. ([source](http://www.getskeleton.com))
- [Base Content Styling](https://awesome-repositories.com/f/user-interface-experience/base-content-styling.md) — Provides standardized styling for lists, code blocks, and tables to ensure a professional appearance. ([source](http://www.getskeleton.com))
- [CSS Utility Classes](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes.md) — Includes a library of single-purpose CSS utility classes for managing floats, clears, and width constraints. ([source](http://www.getskeleton.com))
- [Form Element Normalization](https://awesome-repositories.com/f/user-interface-experience/form-element-normalization.md) — Normalizes the height and appearance of inputs and buttons for consistent cross-browser alignment. ([source](http://www.getskeleton.com))
- [Screen Percentage Layouts](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/windowed-grids/fluid-percentage-grids/screen-percentage-layouts.md) — Implements a layout system using percentage-based widths and media queries to ensure proportional sizing across different devices.
- [Boilerplates](https://awesome-repositories.com/f/user-interface-experience/lightweight-css-frameworks/boilerplates.md) — Serves as a lightweight CSS boilerplate providing a foundation of resets and base styles for new projects.
- [Raw HTML Element Styling](https://awesome-repositories.com/f/user-interface-experience/raw-html-element-styling.md) — Applies consistent typography and form styles directly to standard HTML tags for a clean baseline.
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Implements responsive breakpoints at common device widths to facilitate fluid layout adaptation.
- [Responsive Column Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-column-layouts.md) — Creates fluid column layouts that shrink for smaller screens and adhere to a maximum width. ([source](http://www.getskeleton.com))
- [Mobile-First Breakpoints](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/document-media-queries/mobile-first-breakpoints.md) — Uses a mobile-first approach with minimum-width media queries to progressively enhance layouts for larger screens.
- [Grid Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems.md) — Ships a fluid 12-column grid layout system using percentage-based widths.
- [Tag-Based Style Mappings](https://awesome-repositories.com/f/user-interface-experience/buttons/custom-html-elements/style-to-element-mappings/tag-based-style-mappings.md) — Applies CSS styles directly to native HTML tags for consistent formatting without requiring custom classes. ([source](http://www.getskeleton.com))
- [Layout Positioning Utilities](https://awesome-repositories.com/f/user-interface-experience/element-positioning/layout-positioning-utilities.md) — Controls layout behavior through specialized utility classes for floating and clearing elements. ([source](http://getskeleton.com/))
- [Form Styling](https://awesome-repositories.com/f/user-interface-experience/form-styling.md) — Normalizes input and button heights to ensure cross-browser consistent styling of native form elements. ([source](http://getskeleton.com/))
- [Prose Typography Styling](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/html-content-processing/prose-typography-styling.md) — Establishes typographic defaults for vanilla HTML content using relative units for scalable text. ([source](http://www.getskeleton.com))
- [Layout Utility Classes](https://awesome-repositories.com/f/user-interface-experience/layout-utility-classes.md) — Prevent element overflow and manage floats using helper classes to simplify common page structure tasks. ([source](http://www.getskeleton.com))
- [Raw HTML Rendering](https://awesome-repositories.com/f/user-interface-experience/raw-html-rendering.md) — Provides base styling for raw HTML elements to ensure consistent rendering of standard tags.
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Applies consistent visual formatting to basic components such as buttons, lists, and tables. ([source](http://getskeleton.com/))
- [Tag-Based Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/tag-based-styling-systems.md) — Provides CSS rules applied directly to HTML tag names to ensure consistent basic typography and appearance. ([source](https://cdn.jsdelivr.net/gh/dhg/skeleton@master/README.md))

### Web Development

- [Responsive CSS Frameworks](https://awesome-repositories.com/f/web-development/web-standards/responsive-css-frameworks.md) — Provides a lightweight, mobile-first framework for responsive interface development with a built-in fluid grid and CSS reset.
- [Normalize-Based Browser Resets](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-infrastructure/normalize-based-browser-resets.md) — Includes a minimal CSS reset to override browser defaults for a consistent cross-device baseline.
- [CSS Normalization](https://awesome-repositories.com/f/web-development/css-normalization.md) — Provides a lightweight CSS normalization layer to ensure consistent rendering across different web browsers.
- [Mobile-First Development Strategies](https://awesome-repositories.com/f/web-development/mobile-first-development-strategies.md) — Employs a mobile-first approach, building for small screens first and using media queries for progressive enhancement.
- [Responsive Typography](https://awesome-repositories.com/f/web-development/web-standards/typography-systems/responsive-typography.md) — Implements responsive typography using relative units to scale font sizes and spacing across devices. ([source](http://getskeleton.com/))

### Development Tools & Productivity

- [Responsive CSS Boilerplates](https://awesome-repositories.com/f/development-tools-productivity/project-boilerplates/responsive-css-boilerplates.md) — Acts as a mobile-responsive boilerplate with a lightweight foundation for adaptable layouts.

### Mobile Development

- [Mobile-Compatible Web Apps](https://awesome-repositories.com/f/mobile-development/mobile-compatible-web-apps.md) — Provides a responsive interface that automatically adapts layout and typography to fit any screen size.