Web design development tips using HTML 5

In this section you will find useful scripts, snippets and downloads, which every web developer and designer should know. Snippets and downloads with the Lingulo sign and bold font are created by Lingulo.

Polyfills

• Modernizr.js – feature detection library
• html5shiv.js – enables HTML5 sectioning elements in old browsers
• srcset polyfill – enables support for the srcset attribute for responsive images
• Respond.js – enables media query and max-/min-width support for old browsers
• Selectivizr – enables CSS3 pseudo-classes (like :first-child) for IE 6-8
• CSS3 Pie – enables CSS3 decoration features like border-radius for IE 6-9

Frontend-Frameworks

• Bootstrap – most popular HTML, CSS, JS framework
• Foundation – advanced frontend framework for rather large projects
• Skel.js – lightweight JS based responsive framework
• 960gs – framework based on a width of 960px and 12 columns
• Skeleton – tiny framework for rather small projects
• Kube – simple framework with little default styling
• Kube – CSS framework with React components based on Google´s Material design
• MUI – CSS framework based on Google´s Material design
• Less framework – grid system for creating adaptive websites
• Pure.css – a module based CSS framework made by Yahoo!
• YAML – another popular CSS framework build on SASS
• Fireshell – very useful HTML5, SASS, Grunt.js frontend boilerplate
• Gumby – simple flexible CSS framework with SASS
• GroundworkCSS – another responsive HTML, CSS, JS framework with SASS

Online-Tools

• SpritePad – easily combine your images into a CSS sprite
• SVG Generation – download free SVG backgrounds
• HTML5 Please – find out whether you can use a specific HTML5 element
• txt2re – regular expression generator
• PHP Live Regex – live regular expression tester for PHP
• CSS Button Generator – simple button generator

Useful resources

• Web Fundamentals – Google´s guide for multi-device web experiences
• HTML5 UP – free beautiful website templates for download
• Web Fundamentals – Google´s guide for multi-device web experiences
• Codrops Playground – playground to find some inspirations
• Google Guide – how to make smartphone sites load fast
• Flat UI – free flat user interface kit
• Onsen UI – easily build your own UI
• DPI guide – designer´s guide to dpi
• Bootswatch – free themes for Bootstrap
• Mobile Devices – free phone / tablet vector graphics

Frontend plugins / scripts

• Super Simple Lingulo Accordion
• Custom CSS3 Select Boxes
• Fitter Happier Text – create responsive fluid headings
• Three.js – awesome JS library for creating WebGL projects
• prefix-free – automatically converts unprefixed CSS rules into prefixed ones
• textillate – create CSS3 text animations
• heyoffline.js – warns your users when their network goes down
• Responsive Nav – simple responsive navigation plugin

Icons & Fonts

• Font Awesome – scalable vector icons (519 free icons)
• Glyphicons – scalable vector icons (610 free icons)
• Simple Line Icons – plain, simple icons for elegant projects (160 free icons)
• SVG icons – simple ready to use SVG icons
• Google Fonts – lots of open-source fonts for your web project
• Font Squirrel – free for commercial use fonts
• 1001freefonts – lots of free fonts for your design projects
• dafont – another resource for free fonts
• Open-Image – royalty-free photos for your project

SHARE

Onlinecodegeek