# Web Dev Resources



## Frameworks
* [Bootstrap](http://getbootstrap.com/)
* [HTML5 Boilerplate](http://html5boilerplate.com/)
* [Foundation](http://foundation.zurb.com/)
* [Web Starter Kit](https://developers.google.com/web/starter-kit/)
* [UI Kit](http://getuikit.com/)
* [Semantic UI](http://semantic-ui.com/)
* [Sierra](http://sierra-library.github.io/)
* [SuitCSS](https://github.com/suitcss/base)
* [Miligram](http://milligram.github.io/) - A minimalist CSS framework.
* [Skeleton](http://www.getskeleton.com/)
* [Juiced](http://juicedcss.com/) – Flexbox CSS framework.
* [PureCSS](http://purecss.io/)- A set of small, responsive CSS modules that you can use in every web project
* [PrimerCSS](http://primercss.io/) – The CSS toolkit and guidelines that power GitHub.
* [Neutron](http://neutroncss.com/) – Sass framework for creating flexible, clear, and semantic web layouts.
* [Basscss](http://www.basscss.com/) – Lightweight collection of base element styles and immutable utilities.
* [Rin](http://sanographix.github.io/rin/) – Lean, gulp-based HTML and SASS boilerplate for better front-end coding.
* [Wee](https://www.weepower.com/) – Lightweight front-end framework for logically building complex, responsive web projects.
* [Scooter](http://dropbox.github.io/scooter/) – SCSS framework & UI library from Dropbox.
* [SpaceBase](http://spacebase.space150.com/) – Sass-based responsive CSS framework.
* [Decorator](http://decorator.codable.org/) – HTML, CSS, and JavaScript front-end framework.
* [Rebar](http://rebar.io/) – A Sass/Stylus grid framework.
* [Concise CSS](http://concisecss.com/) – Framework written in SASS that’s lightwheight and easy-to-use.
* [Workbench](http://kobeaerts.github.io/workbench/) – Frontend boilerplate build for faster development.
* [Material](https://github.com/daemonite/material) – HTML5 UI framework based on Material Design.
* [Materialize](http://materializecss.com/) - A modern responsive front-end framework based on Material Design
* [LumX](http://ui.lumapps.com/) – Framework based on AngularJS & Material Design specs.
* [MUI](https://www.muicss.com/) – Lightweight Material Design web framework.
* [BlazeCSS](http://blazecss.com/) – Open source modular CSS framework providing great structure for building websites quickly.
* [Vital](http://doximity.github.io/vital/) - A minimally invasive CSS framework for modern web applications
* [MinCSS](http://mincss.com/) - The 995 byte CSS framework
* [Kube](https://imperavi.com/kube/) - a CSS framework for professional designers and developers
* [Furtive](http://furtive.co/) - A forward-thinking, CSS micro-framework
* [Fox CSS](http://fox-css.com/) - A light CSS framework
* [Siimple](http://siimple.juanes.xyz/) - A set of small, responsive CSS modules that you can use in every web project
* [Lotus](http://goatslacker.github.io/lotus.css/) - a small (~1.8k) and powerful css library for the responsive web
* [Picnicss](http://picnicss.com/) - Lightweight and beautiful library
* [Simple Grid](http://simplegrid.io/) - a CSS grid for your website
* [Flexbox grid](http://flexboxgrid.com/) - A grid system based on the flex display property.
* [Wing](http://usewing.ml/) - Minimal CSS Framework
* [HackCSS](http://hackcss.com/) - Dead simple css framework

### Wordpress
* https://github.com/automattic/_s
* https://github.com/CherryFramework/cherryframework4
* https://github.com/milohuang/reverie
* http://runwaywp.com/
* http://gantry.org/
* http://vafpress.com/vafpress-framework/
* https://github.com/justintadlock/hybrid-core
* http://my.studiopress.com/themes/genesis/

## Methodologies & Styleguides
### Methodologies
* [BEM](https://en.bem.info/)
* [Hyphenated BEM ](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
* [SMACSS](https://smacss.com/)
* [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/)
* [OOCSS](http://oocss.org/)
* [KISS](https://es.wikipedia.org/wiki/Principio_KISS)
* [Naming Conventions - SuitCSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)
* [rscss](http://rscss.io/)
* [Modular CSS Naming Conventions - The Sass Way](http://thesassway.com/advanced/modular-css-naming-conventions)

#### Interesting Articles
* http://nicolasgallagher.com/about-html-semantics-front-end-architecture

### Styleguides
* [CSS Guidelines](http://cssguidelin.es) by _Harry Roberts_
* [Idiomatic CSS](https://github.com/necolas/idiomatic-css) by _Necolas_
* [CodeGuide](http://codeguide.co/) by _mdo_
* [Sass Guidelines](http://sass-guidelin.es/es/) by _Hugo Giraudel_
* [Google HTML/CSS StyleGuide](http://google.github.io/styleguide/htmlcssguide.xml)
* [Wordpress Coding Standars](https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/)
* [ThinkUP](https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS)
* [PrimerCSS](http://primercss.io/) - The CSS toolkit and guidelines that power GitHub.
* [CSS Styleguide](https://css-tricks.com/css-style-guides/) by _CSS Tricks_
* [Sass Styleguide](https://css-tricks.com/sass-style-guide/) by _CSS Tricks_
* [MaintainableCSS](http://maintainablecss.com/)

## Online Tools
* [CSS Gradient Animator](http://www.gradient-animator.com/) – Web-based tool for generating animated gradients.
* [Blend](http://colinkeany.com/blend/) – Tool for generating simple and beautiful CSS3 gradients.
* [.resizr](http://resizr.co/) – Simple app for testing your CSS media queries.
* [CSS Ruler](http://katydecorah.com/css-ruler/) – Handy web-based tool for exploring CSS lengths.
* [CSS Stats](http://www.cssstats.com/) - Visualize useful stats about CSS files
* [Purify CSS](https://github.com/purifycss/purifycss) - Remove unused CSS. Also works with single-page apps.
* [SVGOMG](https://jakearchibald.github.io/svgomg/) – Web-based app for optimizing and configuring SVGO.
* [SVG Path Builder App](http://anthonydugois.com/svg-path-builder/) – Build an SVG path quickly using a GUI.
* [css2sass](http://css2sass.herokuapp.com/) – Web-based app for converting CSS snippets to Syntactically Awesome StyleSheets code.

Pagekit.com

## Toolkits
* [CSSGram](http://una.im/CSSgram/) – Tiny library for recreating Instagram filters with CSS.
* [Flickity](http://flickity.metafizzy.co/) – CSS library that makes galleries & sliders feel lively and effortless.
* [Pushy](http://www.christopheryee.ca/pushy/) – Responsive off-canvas navigation menu using CSS transforms & transitions.
* [Rucksack](http://simplaio.github.io/rucksack/) – A little bag of CSS superpowers.
* [Drop](https://github.com/HubSpot/drop) – Library for creating dropdowns and other floating elements.
* [Gradify](http://www.gradifycss.com/) – Module for producing CSS gradients as placeholders for images.
* [SassyFlags](https://github.com/Layerful/sassy-flags) – Simple library for adding flags to your websites.
* [Flag-icon-css](http://flag-icon-css.lip.is/) - A collection of all country flags in SVG
* [Imagehover.css](http://imagehover.io/) - Pure CSS Image Hover Effect Library


### Sites
* [Browser Diet](https://browserdiet.com/) - How to lose weight in the browser
* [UI Iteractions](https://uiinteractions.com/) - The best UI Interactions for your inspiration, every day.
* [UIDB](http://uidb.io/)- Specific examples of UI from around the web

### CSS Reset
* [Eric Meyer’s CSS reset](http://meyerweb.com/eric/tools/css/reset/)
* [HTML5ResetCSS](https://github.com/richclark/HTML5resetCSS)
* [Normalize.css](http://necolas.github.io/normalize.css/)
* [Sanitize.css](http://10up.github.io/sanitize.css/)
* [Marx](http://matthewblode.com/marx/)

### Animation
* [Tuesday](http://shakrmedia.github.io/tuesday/)  – Quirky CSS animation library.
* [MotionUI](http://zurb.com/playground/motion-ui) - A Sass library for creating flexible CSS transitions and animations.
* [Animate Plus](https://github.com/bendc/animateplus) – JavaScript library that helps you animate CSS properties and SVG attributes.
* [Rocket](http://minimamente.com/example/rocket/) – Simple tool for creating web animations.
* [Shift](http://shift.octavector.co.uk/)  – Simple framework to build timed, contained CSS animations.
* [Transformicons](http://www.transformicons.com/) - Animated icons, symbols and buttons using SVG and CSS
* [iconate.js](http://bitshadow.github.io/iconate/) – Tiny performant library for cross-browser icon transformation animations.
* [Dynamics.js](http://dynamicsjs.com/) – Javascript library for creating physics-based CSS animations.
* [mo.js](http://mojs.io/) – The ‘Motion Graphics Toolbelt’ for the web.
* [cta.js](http://kushagragour.in/lab/ctajs/) – Navigation in tile based apps
* [ramjet.jss](http://www.rich-harris.co.uk/ramjet/) – Library that morphs DOM elements from one state to another with smooth transitions.
* [Animsition](http://git.blivesta.com/animsition/) – Simple jQuery plugin for CSS animated page transitions.
* [vivus.js](http://maxwellito.github.io/vivus/) – Lightweight JavaScript class that allows you to animate SVGs.
* [Magic animations](http://minimamente.com/example/magic_animations/)



## CSS Preprocesors
* http://lesscss.org/features/


## CMS
* [WordPress](https://wordpress.org/)
* [Grav](https://getgrav.org/)



## JavaScript

### Charts & Graphs
* [Clusterize.js](http://nexts.github.io/Clusterize.js/) – Tiny vanilla JS plugin to display large data sets easily.
* [Ploty.js](https://plot.ly/javascript/) – High-level, declarative, open-source charting library.
* [Textures.js](http://riccardoscalco.github.io/textures/) – Set of SVG elements for data visualization.
* [Charts JS](http://www.chartjs.org/) - Simple yet flexible JavaScript charting for designers & developers

### Navigation
* [Elevator.js](http://tholman.com/elevator.js/) – "Back to Top" button that behaves like a real elevator.
* [Slideout.js](https://mango.github.io/slideout/) – Touch slideout navigation menu for your mobile web apps.
* [Hammer.js](http://hammerjs.github.io/) – Javascript library for multi-touch gestures.
* [Responsible.js](http://davidwells.io/code/responsible/) – Give mobile visitors the option of viewing either the desktop or mobile layout.
* [FullPage.js](http://alvarotrigo.com/fullPage/#firstPage) - Create Beautiful Fullscreen Scrolling Websites

### Carousels, Sliders & Galleries
* [IntemSlide.js](http://itemslide.github.io/) – Simple JavaScript touch carousel with support for touch swiping & mousewheel scrolling.
* [Lory.js](http://meandmax.github.io/lory/) – Touch-enabled minimalistic slider written in vanilla JavaScript.
* [Simple Lightbox](http://andreknieriem.de/simple-lightbox/) – Touch-friendly image lightbox for mobile and desktop with jQuery.
* [Chocolat.js](http://chocolat.insipi.de/) – Responsive jQuery lightbox plugin.
* [jQuery lightgallery](http://sachinchoolur.github.io/lightGallery/) – Lightweight, customizable, modular, responsive, lightbox gallery plugin.

### layout
* [Bricklayer.js](http://bricklayer.js.org/) - Build Pinterest-like cascading grids
* [Bideo](https://rishabhp.github.io/bideo.js/) - A JS library that makes it super easy to add fullscreen background videos.
* [Tringalify](http://qrohlf.com/trianglify/) - algorithmically generated triangle art
* [Particles.js](http://vincentgarreau.com/particles.js/) A lightweight JavaScript library for creating particles
* [Adaptative Backgrounds](https://briangonzalez.github.io/jquery.adaptive-backgrounds.js/) - A jQuery plugin for extracting dominant colors from images and applying it to its parent.


### Responsive Image Solutions
* [Rimg](http://joeyvandijk.github.io/rimg/) – Pure JS responsive image solution for browsers that support mediaqueries.
* [Responsify.js](http://responsifyjs.space/) – jQuery plugin that makes images truly responsive.


### Image Editing
* [PixelFLow](http://devnimlos.com/professional/pixelflow) – An image pixelating filter jQuery plugin using canvas.
* [Smartcrop.js](https://github.com/jwagner/smartcrop.js) – Content aware image cropping.
* [Image Blur Plugin](http://msurguy.github.io/background-blur/) – Ultra-light cross browser image blurring plugin for jQuery.


### Lazy Loading
* [Layzr.js](http://callmecavs.github.io/layzr.js/) – Small, fast, modern, and dependency-free library for lazy loading.
* [AntiModerate](https://github.com/whackashoe/antimoderate) – Progressive image loading library.


### Form Plugins
* [Awesomeplete](http://leaverou.github.io/awesomplete/) – Ultra-lightweight, highly customizable and simple autocomplete jQuery plugin.
* [Instantsearch.js](https://community.algolia.com/instantsearch.js/) – Library of widgets designed for high-performance instant search.
* [Notie.js](https://jaredreich.com/projects/notie.js/) – Clean and simple notification plugin.
* [Flatpickr](https://chmln.github.io/flatpickr/) - A lightweight & powerful datetimepicker


### Accessibility Tools
* [tota11y](http://khan.github.io/tota11y/) – An accessibility visualization toolkit.
* [ally.js](http://allyjs.io/) – JavaScript library to help make accessibility simpler.
* [emojify.js](http://hassankhan.me/emojify.js/) – Javascript module to convert Emoji keywords to images.


### Utilities
* [gridstack.js](http://troolee.github.io/gridstack.js/) – jQuery plugin for widget layouts.
* [Roll](https://github.com/williamngan/roll) – JS library to help you keep track of position, scrolling, and pagination.
* [Rune.js](http://runemadsen.github.io/rune.js/) – JS library for programming graphic design systems with SVG in the browser.
* [Clipboard.js](http://zenorocha.github.io/clipboard.js/) – Modern approach to copy text to clipboard.
* [html5tooltips.js](http://ytiurin.github.io/html5tooltipsjs/) – Light and clean tooltip library with CSS3 animation.
* [Challenger.js](http://rileyjshaw.com/challenger/) – Drop-in JS library that adds interactive programming pop-up challenges to any page.
* [egg.js](https://github.com/mikeflynn/egg.js) – Simple javascript library to add easter eggs to web pages.
* [Annotator.js](https://github.com/dvnc/annotator) – Plugin for highlighting, sharing, adding notes and tags to any selected text on a page.
* [Select2](https://select2.github.io/) - The jQuery replacement for select boxes
* [Tribute.js](http://zurb.com/playground/tribute) - Native ES6 JavaScript @mention Plugin
* [Styleguide](http://livingstyleguide.devbridge.com/) - Living Styleguide Made Easys
* [Embed.js](http://riteshkr.com/embed.js/) - A pure JavaScript plugin to insert or embed
* [ZingTouch](http://zingchart.github.io/zingtouch/) - A JavaScript gesture detection library for the modern web

### Dialogs
* [Modaal](http://humaan.com/modaal/) - An accessible dialog window plugin for all humans.
* [Vex](http://github.hubspot.com/vex/docs/welcome/) - Dialogs for the 21st century.

### Maps
* [D3](https://github.com/d3/d3) - Bring data to life with SVG, Canvas and HTML.
* [GeoJSON](http://geojson.org/) - GeoJSON is a format for encoding a variety of geographic data structures.
* [TopoJSON](https://github.com/mbostock/topojson) - an extension of GeoJSON that encodes topology.
* [GeoJSON.io](http://geojson.io/) - a quick, simple tool for creating, viewing, and sharing maps
* [MapSVG](http://mapsvg.com) - The ultimate WordPress mapping solution
* [Spam](https://github.com/newsappsio/spam) - A D3 library to create maps with Canvas

### Other
* [Push.js](http://nickersoft.github.io/push.js/) - A compact, cross-browser solution for using the JavaScript Notifications API

### Artigos
* https://robots.thoughtbot.com/you-don-t-need-javascript-for-that

### Repos
* [Vanilla List](http://www.vanillalist.com/) - The Vanilla Javascript Repository

## Software

### Markets
* [FlatMarket](https://christophercliff.com/flatmarket/) - Flatmarket is a free, open source e-commerce platform for static websites.




## Icons
* https://dribbble.com/shots/2715392-40-Gesture-Icons
* http://speckyboy.com/2015/12/21/top-50-free-icon-sets-2015/
* https://speckyboy.com/2016/05/18/free-barista-coffee-lover-flat-line-icon-set/

## Other

### Links
* [FlexBugs](https://github.com/philipwalton/flexbugs) - A community-curated list of flexbox issues and cross-browser workarounds for them
* [ThinkWithGoogle](https://testmysite.thinkwithgoogle.com/) - Test how mobile-friendly your site is
* [The A11Y Project](http://a11yproject.com/) - A community-driven effort to make web accessibility easier.

### Lists
* https://github.com/dypsilon/frontend-dev-bookmarks
* https://github.com/codylindley/frontend-tools
* https://github.com/diegocard/awesome-html5
* https://github.com/lvwzhen/tools
* https://github.com/miripiruni/frontdesk

* https://speckyboy.com/2016/07/13/css-libraries-frameworks-tools-2016/
* http://www.hongkiat.com/blog/css-libraries-image-hover-effect/