I want to collect some interessting links to extract course materials from. As KHB (Berlin Academy of the Arts) really needs somebody teaching designers the basics of CSS / HTML.
- http://tech.pro/blog/1557/7-useful-mobile-html-css-and-javascript-snippets
- http://www.html5rocks.com/en/mobile/fullscreen/
- http://davidwalsh.name/hide-address-bar
- https://github.com/h5bp/mobile-boilerplate/blob/master/js/helper.js
- http://24ways.org/2011/raising-the-bar-on-mobile/
- https://github.com/scottjehl/Hide-Address-Bar
- http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
Geht im Grunde nur auf iOS6 mit JS (dort orientationchange beachten) > Interessant für iPhone 4 User. Auf Android Chrome gibt es wohl keine Lösung. Windows Mobile? Kerstin meinte da gibts was. iOS7 mit minimal UI Tag.
- http://blog.nknj.me/token-authentication-django-and-angular
- http://netengine.com.au/blog/gulp-and-angularjs-a-love-story-or-the-old-wheel-was-terrible-check-out-my-new-wheel/
- http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html
- http://www.sitepoint.com/architecture-sass-project/
- http://www.sitepoint.com/look-different-sass-architectures/
- https://github.com/evernote/sass-build-structure
- https://news.layervault.com/stories/32730-ask-dn-how-do-you-structure-your-sass-files-in-a-large-project
- http://www.infobahndesign.com/how-i-structure-my-sass-projects/
- https://medium.com/@wanderingmatt/a-little-structure-for-your-large-sass-project-7fe19ab647fa
- http://thesassway.com/beginner/how-to-structure-a-sass-project
- @extend
- @include
- %placeholder
- $variable
- @mixin
- http://onsenui.io/ > sieht sehr fein aus - angular + topcoat (leider kein SASS)
- http://goratchet.com
- http://ionicframework.com/
- http://code.kik.com/app/2/index.html
- http://codeguide.co/
- http://cssguidelin.es/
- https://gist.github.com/bobbygrace/9e961e8982f42eb91b80 - trello css guide
- http://origami.ft.com/
- http://sass-guidelin.es/
- http://isobar-idev.github.io/code-standards/
- https://github.com/necolas/idiomatic-css
- http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
- https://github.com/styleguide/css
- http://css-tricks.com/strategies-keeping-css-specificity-low/
- http://caniuse.com/css-fixed
- http://bradfrostweb.com/blog/mobile/fixed-position/
- http://code.tutsplus.com/tutorials/ios-5-fixed-positioning-and-content-scrolling--mobile-8332
Um das Chat Input Feld am Seitenende zu halten brauchen wir wohl ein Element mit Position > Fixed und müssen dann inline scrollen? Dafür gibt es verschiedene JS Lösungen.
-
http://matthewjamestaylor.com/blog/floating-boxes-css-layout
-
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
-
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths
-
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
-
https://mmistakes.github.io/skinny-bones-jekyll/getting-started/
-
https://speakerdeck.com/csswizardry/ten-principles-for-effective-front-end-development
- http://susy.oddbird.net
- https://github.com/ericam/susy/
- http://jeet.gs/
- https://github.com/mojotech/jeet
- http://gridle.org/
- https://github.com/olivierbossel/gridle
- http://neat.bourbon.io/
- https://github.com/thoughtbot/neat
- http://singularity.gs/
- https://github.com/at-import/Singularity
- https://github.com/at-import/Singularity-extras
- http://css-tricks.com/snippets/css/complete-guide-grid/
- http://philipwalton.github.io/solved-by-flexbox/
- http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
- http://heydesigner.com/flexbox/
- http://bennettfeely.com/flexplorer/
- http://flexboxgrid.com/
- http://livingstyleguide.org/
- https://github.com/hagenburger/livingstyleguide
- http://trulia.github.io/hologram/
- https://github.com/kneath/kss
- http://jacobrask.github.io/styledocco/
- https://github.com/pivotalexperimental/style-guide
- https://github.com/oreillymedia/atlas_assets
- https://github.com/thomasdavis/kaleistyleguide
- http://styleguide.sc5.io/ - another styleguide tool
- https://github.com/SC5/sc5-styleguide - nice tool which also works with angular projects
Note to myself. Make the Styleguide based on jekyll would improve the workflow as prototyping can happen based on the same workflow.
- SASS Documentation
- Reading
- http://www.edenspiekermann.com/blog/typesetting-your-css-objects
- http://www.edenspiekermann.com/blog/oocss-and-the-pagification-of-modules
Found this lately: http://typeplate.com/
Then following this articles from this [discussion] 1 :
- http://informationarchitects.net/blog/responsive-typography-the-basics
- http://trentwalton.com/2012/06/19/fluid-type/
-
http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
-
http://gregrickaby.com/2013/02/golden-ratio-typography-for-sass.html
-
http://jasonsantamaria.com/articles/baseline-grids-on-the-web
- http://alistapart.com/article/more-meaningful-typography
- http://hellohappy.org/beautiful-web-type/
- http://trentwalton.com/2013/01/07/flexible-foundations/
- http://www.abookapart.com/products/on-web-typography
- http://ia.net/blog/responsive-typography-the-basics/
- http://opentypography.org/
- http://ia.net/blog/the-web-is-all-about-typography-period
- http://ia.net/blog/responsive-typography/
- http://retinart.net/graphic-design/secret-law-of-page-harmony/
- http://read.shapeofdesignbook.com/index.html
- http://www.fivesimplesteps.com/products/a-practical-guide-to-designing-for-the-web
- http://practicaltypography.com/
- http://designmodo.com/web-typography/
- http://www.elliotjaystocks.com/blog/responsive-web-typography/
TOOLS
- http://type-scale.com/
- https://typecast.com
- http://www.modularscale.com/
- http://www.gridlover.net/app/
- https://github.com/fmal/sass-baseline-rhythm
- http://typesettings.io/
- https://github.com/ianrose/typesettings
- https://github.com/hagenburger/livingstyleguide
- http://www.macaw.co/
- https://webflow.com/
- http://froont.com/
- https://creative.adobe.com/de/products/reflow
- http://alistapart.com/article/responsive-images-in-practice
- https://github.com/robwierzbowski/jekyll-picture-tag nice - wird aber nicht mehr weiter gepflegt
- Form Submit mit Enter
- Time Ago etc in JS
- https://designcode.io/learn
- https://dash.generalassemb.ly
- http://teamtreehouse.com/
- http://opentechschool.github.io/html-css-beginners/
- http://opentechschool.github.io/js-beginners-4h-workshop-1/
- http://opentechschool.github.io/js-beginners-day2/
- http://www.codecademy.com/
- https://github.com/pazguille/offline-first
- http://www.sitepoint.com/offline-first-next-progressive-enhancement-technique/
- http://alistapart.com/article/offline-first
- http://5by5.tv/webahead/78
- https://github.com/jakearchibald/tweetdeck-prototype
- http://blog.hood.ie/2013/11/say-hello-to-offline-first/
- http://www.lukew.com/ff/entry.asp?1902