Skip to content

Instantly share code, notes, and snippets.

@Pandahisham

Pandahisham/README.md

Created December 17, 2016 08:55
Show Gist options
  • Save Pandahisham/bf4c5ab37ffca254f2470e7d91ee62dc to your computer and use it in GitHub Desktop.
Save Pandahisham/bf4c5ab37ffca254f2470e7d91ee62dc to your computer and use it in GitHub Desktop.
Download ZIP
Lists
Raw
README.md

Web Dev Resources

Frameworks

  • Bootstrap
  • HTML5 Boilerplate
  • Foundation
  • Web Starter Kit
  • UI Kit
  • Semantic UI
  • Sierra
  • SuitCSS
  • Miligram - A minimalist CSS framework.
  • Skeleton
  • Juiced – Flexbox CSS framework.
  • PureCSS- A set of small, responsive CSS modules that you can use in every web project
  • PrimerCSS – The CSS toolkit and guidelines that power GitHub.
  • Neutron – Sass framework for creating flexible, clear, and semantic web layouts.
  • Basscss – Lightweight collection of base element styles and immutable utilities.
  • Rin – Lean, gulp-based HTML and SASS boilerplate for better front-end coding.
  • Wee – Lightweight front-end framework for logically building complex, responsive web projects.
  • Scooter – SCSS framework & UI library from Dropbox.
  • SpaceBase – Sass-based responsive CSS framework.
  • Decorator – HTML, CSS, and JavaScript front-end framework.
  • Rebar – A Sass/Stylus grid framework.
  • Concise CSS – Framework written in SASS that’s lightwheight and easy-to-use.
  • Workbench – Frontend boilerplate build for faster development.
  • Material – HTML5 UI framework based on Material Design.
  • Materialize - A modern responsive front-end framework based on Material Design
  • LumX – Framework based on AngularJS & Material Design specs.
  • MUI – Lightweight Material Design web framework.
  • BlazeCSS – Open source modular CSS framework providing great structure for building websites quickly.
  • Vital - A minimally invasive CSS framework for modern web applications
  • MinCSS - The 995 byte CSS framework
  • Kube - a CSS framework for professional designers and developers
  • Furtive - A forward-thinking, CSS micro-framework
  • Fox CSS - A light CSS framework
  • Siimple - A set of small, responsive CSS modules that you can use in every web project
  • Lotus - a small (~1.8k) and powerful css library for the responsive web
  • Picnicss - Lightweight and beautiful library
  • Simple Grid - a CSS grid for your website
  • Flexbox grid - A grid system based on the flex display property.
  • Wing - Minimal CSS Framework
  • HackCSS - Dead simple css framework

Wordpress

Methodologies & Styleguides

Methodologies

Interesting Articles

Styleguides

Online Tools

  • CSS Gradient Animator – Web-based tool for generating animated gradients.
  • Blend – Tool for generating simple and beautiful CSS3 gradients.
  • .resizr – Simple app for testing your CSS media queries.
  • CSS Ruler – Handy web-based tool for exploring CSS lengths.
  • CSS Stats - Visualize useful stats about CSS files
  • Purify CSS - Remove unused CSS. Also works with single-page apps.
  • SVGOMG – Web-based app for optimizing and configuring SVGO.
  • SVG Path Builder App – Build an SVG path quickly using a GUI.
  • css2sass – Web-based app for converting CSS snippets to Syntactically Awesome StyleSheets code.

Pagekit.com

Toolkits

  • CSSGram – Tiny library for recreating Instagram filters with CSS.
  • Flickity – CSS library that makes galleries & sliders feel lively and effortless.
  • Pushy – Responsive off-canvas navigation menu using CSS transforms & transitions.
  • Rucksack – A little bag of CSS superpowers.
  • Drop – Library for creating dropdowns and other floating elements.
  • Gradify – Module for producing CSS gradients as placeholders for images.
  • SassyFlags – Simple library for adding flags to your websites.
  • Flag-icon-css - A collection of all country flags in SVG
  • Imagehover.css - Pure CSS Image Hover Effect Library

Sites

  • Browser Diet - How to lose weight in the browser
  • UI Iteractions - The best UI Interactions for your inspiration, every day.
  • UIDB- Specific examples of UI from around the web

CSS Reset

Animation

  • Tuesday – Quirky CSS animation library.
  • MotionUI - A Sass library for creating flexible CSS transitions and animations.
  • Animate Plus – JavaScript library that helps you animate CSS properties and SVG attributes.
  • Rocket – Simple tool for creating web animations.
  • Shift – Simple framework to build timed, contained CSS animations.
  • Transformicons - Animated icons, symbols and buttons using SVG and CSS
  • iconate.js – Tiny performant library for cross-browser icon transformation animations.
  • Dynamics.js – Javascript library for creating physics-based CSS animations.
  • mo.js – The ‘Motion Graphics Toolbelt’ for the web.
  • cta.js – Navigation in tile based apps
  • ramjet.jss – Library that morphs DOM elements from one state to another with smooth transitions.
  • Animsition – Simple jQuery plugin for CSS animated page transitions.
  • vivus.js – Lightweight JavaScript class that allows you to animate SVGs.
  • Magic animations

CSS Preprocesors

CMS

JavaScript

Charts & Graphs

  • Clusterize.js – Tiny vanilla JS plugin to display large data sets easily.
  • Ploty.js – High-level, declarative, open-source charting library.
  • Textures.js – Set of SVG elements for data visualization.
  • Charts JS - Simple yet flexible JavaScript charting for designers & developers

Navigation

  • Elevator.js – "Back to Top" button that behaves like a real elevator.
  • Slideout.js – Touch slideout navigation menu for your mobile web apps.
  • Hammer.js – Javascript library for multi-touch gestures.
  • Responsible.js – Give mobile visitors the option of viewing either the desktop or mobile layout.
  • FullPage.js - Create Beautiful Fullscreen Scrolling Websites

Carousels, Sliders & Galleries

  • IntemSlide.js – Simple JavaScript touch carousel with support for touch swiping & mousewheel scrolling.
  • Lory.js – Touch-enabled minimalistic slider written in vanilla JavaScript.
  • Simple Lightbox – Touch-friendly image lightbox for mobile and desktop with jQuery.
  • Chocolat.js – Responsive jQuery lightbox plugin.
  • jQuery lightgallery – Lightweight, customizable, modular, responsive, lightbox gallery plugin.

layout

  • Bricklayer.js - Build Pinterest-like cascading grids
  • Bideo - A JS library that makes it super easy to add fullscreen background videos.
  • Tringalify - algorithmically generated triangle art
  • Particles.js A lightweight JavaScript library for creating particles
  • Adaptative Backgrounds - A jQuery plugin for extracting dominant colors from images and applying it to its parent.

Responsive Image Solutions

  • Rimg – Pure JS responsive image solution for browsers that support mediaqueries.
  • Responsify.js – jQuery plugin that makes images truly responsive.

Image Editing

  • PixelFLow – An image pixelating filter jQuery plugin using canvas.
  • Smartcrop.js – Content aware image cropping.
  • Image Blur Plugin – Ultra-light cross browser image blurring plugin for jQuery.

Lazy Loading

  • Layzr.js – Small, fast, modern, and dependency-free library for lazy loading.
  • AntiModerate – Progressive image loading library.

Form Plugins

  • Awesomeplete – Ultra-lightweight, highly customizable and simple autocomplete jQuery plugin.
  • Instantsearch.js – Library of widgets designed for high-performance instant search.
  • Notie.js – Clean and simple notification plugin.
  • Flatpickr - A lightweight & powerful datetimepicker

Accessibility Tools

  • tota11y – An accessibility visualization toolkit.
  • ally.js – JavaScript library to help make accessibility simpler.
  • emojify.js – Javascript module to convert Emoji keywords to images.

Utilities

  • gridstack.js – jQuery plugin for widget layouts.
  • Roll – JS library to help you keep track of position, scrolling, and pagination.
  • Rune.js – JS library for programming graphic design systems with SVG in the browser.
  • Clipboard.js – Modern approach to copy text to clipboard.
  • html5tooltips.js – Light and clean tooltip library with CSS3 animation.
  • Challenger.js – Drop-in JS library that adds interactive programming pop-up challenges to any page.
  • egg.js – Simple javascript library to add easter eggs to web pages.
  • Annotator.js – Plugin for highlighting, sharing, adding notes and tags to any selected text on a page.
  • Select2 - The jQuery replacement for select boxes
  • Tribute.js - Native ES6 JavaScript @mention Plugin
  • Styleguide - Living Styleguide Made Easys
  • Embed.js - A pure JavaScript plugin to insert or embed
  • ZingTouch - A JavaScript gesture detection library for the modern web

Dialogs

  • Modaal - An accessible dialog window plugin for all humans.
  • Vex - Dialogs for the 21st century.

Maps

  • D3 - Bring data to life with SVG, Canvas and HTML.
  • GeoJSON - GeoJSON is a format for encoding a variety of geographic data structures.
  • TopoJSON - an extension of GeoJSON that encodes topology.
  • GeoJSON.io - a quick, simple tool for creating, viewing, and sharing maps
  • MapSVG - The ultimate WordPress mapping solution
  • Spam - A D3 library to create maps with Canvas

Other

  • Push.js - A compact, cross-browser solution for using the JavaScript Notifications API

Artigos

Repos

Software

Markets

  • FlatMarket - Flatmarket is a free, open source e-commerce platform for static websites.

Icons

Other

Links

  • FlexBugs - A community-curated list of flexbox issues and cross-browser workarounds for them
  • ThinkWithGoogle - Test how mobile-friendly your site is
  • The A11Y Project - A community-driven effort to make web accessibility easier.

Lists

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment