https://sayskez.github.io/dev-bones/
A HTML & CSS boilerplate skeleton ready for you to put some flesh on these bones. Mix and match depending on your needs and unleash your own zombie on the web without the hassle of all the setup.
- Skeleton - The basic bones of a website with all the metadata and setup you need to get started. Get the bones →
- Zombie - The skeleton with extras for those bigger builds. SCSS, a task runner, and other conveniences preconfigured for you to get your zombie up and running with automatic image and script minification. Peek inside →
- Flesh & Bones - Semantic HTML bones and frequently used CSS flesh ready to graft on to any skeleton. Copy and paste the bits you need, bury the rest. Raid the grave →
- Resources & Brain Matters (this document) - Top off your skeleton of choice with a grave full of resources & links for frequently referenced topics from initial styling and layout guides to tools for testing. Feast on brains →
Download the ZIP file above or copy this command into your terminal to get your own set of Dev Bones:
git clone https://github.com/SaysKez/dev-bones.git
Grab the bits you need, bury the rest:
- Download a Skeleton or Zombie, give it a name, pour in your content, and put some flesh on those bones.
- Grab what you need from the Flesh & Bones collection and ditch the rest.
- Dive into the Resources & Brain Matter (below) to guide you from styling and layout to version control and testing.
Dev Bones is based on my frequently used project elements and grew out of a customised skeleton of the awesome HTML5 Boilerplate and mrmrs HTML Blocks. Begun as a #12in12 Side Project and bashed together in under a month. If you have any suggestions, submit a pull request or gives me a shout @SaysKez
Performance & SEO- SVGO - Node.js SVG Optimser
- SVGOMG - SVGO's missing GUI
- SVG coordinate system interactive demo + cheatsheet
- Understanding SVGs 1: SVG coordinate system, viewport, and viewBox
- Understanding SVGs 2: transforms
- Understanding SVGs 3: new viewports, symbols, and nesting SVGs
- SVG Filters: The Crash Course
- SVG Filters 101
- Accessible SVGs
- CSS Reference
- Marksheet HTML & CSS Tutorial
- Can I Use?
- CSS Cheatsheet - Selectors, Fonts, Backgrounds, and Animation
- CSS selectors reference
- CSS Stats
- Box shadow generator
- Media queries for standard devices
- CSS-Trick's Complete Guide to Grid
- Grid by Example
- Grid Garden - Learn CSS Grid
- Grid Visual Cheatsheet
- CSS-Trick's Complete Guide to Flexbox
- Visual Guide to Flexbox Properties
- Flexbox Visual Cheatsheet
- Flexbox Froggy - Learn Flexbox
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent