Skip to content

Latest commit

 

History

History
437 lines (348 loc) · 17.7 KB

README.md

File metadata and controls

437 lines (348 loc) · 17.7 KB
Raw

README

This repo contains a collection of links and some thoughts on a development workflow & stack to build websites - not web applications.

The theme structure should be universal. Either to use jekyll as a static page generator or wordpress as “backends”.

For the jekyll on github-pages usecase the development stack should have only basic requirements. Additional package managers and build tools like npm, bower, grunt or gulp should be optional.

TODO

  • create repository
  • add stuff from multiple projects to this repository
  • invite some nice people to collaborate
  • create first iteration of the toolset

Gesetzt:

  • jekyll

  • wordpress

  • magento

  • npm

  • bower

  • gulp

  • normalize either use the standard normalize or a scss version. the standard sass version of normalize isn’t working without compass. an older bower package for normalize is available and used right now.

  • bourbon

  • neat / susy

  • bitters

  • refills > needs neat for some components

  • pesticide - a super nice dev tool http://pesticide.io - use it and love it!
    • maybe use it in combination with a “dev” parameter > or leave the switch for on/off > true/false in the main scss file.
  • jquery

workflow ? hier festhalten wie eine workflow idealerweise aussieht

iteration 1

  • workshop
  • style tile (sketch)
  • code
  • release

iteration 2

  • workshop
  • style tile (sketch)
  • code
  • release

…

  1. Was soll hier passieren?

Eine kleine Linksammlung mit Interessantem Material zum bau von Webseiten > Achtung nicht Web Applikationen.

  1. Umsetzung als Boilerplate / Workflow

Standards für verschiedene Themen definieren.

  • “Backend”: Jekyll und Wordpress
  • Hosting: Welche Anbieter
  • Deployment:

Jekyll Wordpress

  • Front-End Architektur

Styleguide zum schreiben von HTML / CSS (SASS) / JS Ordnerstruktur die für Jekyll / Wordpress Projekte gleichbleibt.

Tools:

npm bower gulp

SASS:

  • bourbon > nicht compass da jekyll projekte auf github pages das css bauen können sollten. dafür muss bourbon aber auch im sass folder liegen > nicht in bower_components
  • neat

Standardelemente:

  • Navigation (Off Canvas, Fullscreen, Text,…)
  • Text
  • Einzelbild (Inline, Lightbox)
  • Bildergallerie (Inline, Lightbox)
  • Masonry Grid
  • Fullscreen Video (Inline, Lightbox)
  • Fullscreen Image mit Text drauf
  • Slider (Inline, Fullscreen)
  • Google Maps Karte
  • Sound / Audio Player

Use Cases:

  • Landing Page
  • Corporate Page
  • Portfolio
  • Shop

ALS BEISPIEL - Was kann man besser machen?

Theme Root
    │    ├── assets
    │    │   ├── bower_components
    │    │   |   ├── bi-app-sass
    │    │   |   ├── bourbon
    │    │   |   └── neat
    │    │   ├── css
    |    |   |    ├── rtl-min.css
    |    |   |    ├── rtl.css
    |    |   |    ├── style-min.css
    |    |   |    └── style.css
    │    |   └──  js
    │    │   |    ├── app
    │    │   |    └── vendor
    │    |   |    |   ├── flexnav
    │    |   |    |   ├── hoverintent
    │    |   |    |   ├── modernizr
    │    |   |    |   └── selectivizr
    │    │   |    ├── production-min.js
    │    │   |    └── development.js
    │    ├── sass
    │    |   └── base (Bitters)
    │    |   └── components
    |    |    |   ├── _buttons.scss
    |    |    |   ├── _dashicons.scss
    |    |    |   ├── _flexnav.scss
    |    |    |   ├── _navigation.scss
    |    |    |   ├── _ui-bourbon.scss
    |    |    |   └── _variables.scss
    │    |    └── layouts
    |    |    |   ├── _content.scss
    |    |    |   ├── _footer.scss
    |    |    |   ├── _header.scss
    |    |    |   ├── _navigation.scss
    |    |    |   ├── _normalize.scss
    |    |    |   ├── _sidebar.scss
    |    |    |   ├── _structure.scss
    |    |    |   └── _typography.scss
    |    ├── _app.scss
    |    ├── _grid-settings.scss
    |    ├── _rtl.scss
    |    └── style.scss
    ├── library
    │   └── languages
    │   │   ├── some_like_it_neat.pot
    │   └── vendors
    │   │   ├── js
    │   │   ├── tgm-plugin-activation
    │   │   ├── tha-theme-hooks
    │   │   └── customizer
    │   ├── custom-header.php
    │   ├── extras.php
    │   ├── jetpack.php
    │   └── template-tags.php
    ├── page-templates
    │     └── partials
    |     |   ├── content-aside.php
    |     |   ├── content-audio.php
    |     |   ├── content-chat.php
    |     |   ├── content-gallery.php
    |     |   ├── content-image.php
    |     |   ├── content-link.php
    |     |   ├── content-none.php
    |     |   ├── content-page.php
    |     |   ├── content-quote.php
    |     |   ├── content-single.php
    |     |   ├── content-status.php
    |     |   ├── content-video.php
    |     |   └── content.php
    |     ├── template-full-width.php
    |     ├── template-left-col.php
    |     └── template-right-col.php
    ├── .bowerrc
    ├── 404.php
    ├── archive.php
    ├── comments.php
    ├── footer.php
    ├── functions.php
    ├── gulpfile.js
    ├── header.php
    ├── index.php
    ├── license.txt
    ├── package.json
    ├── page.php
    ├── README.md
    ├── rtl.css
    ├── search.png
    ├── searchform.php
    ├── sidebar.php
    ├── single.php
    └── style.css

ansehen>

Hosting

  • Jekyll

    • Github Pages
    • Google App Engine
    • FTP

  • Wordpress

    • Uberspace

Dependencies

  • sass
  • bourbon
  • jekyll should be optional > used for first iteration
  • bitters (optional) > is in gemfile right now
  • neat (optional) > is in gemfile right now
  • refills (optional) > is in gemfile right now
  • wordpress + woocommerce

To use install optional stuff > bitters / neat / refills please go into _sass and use the following commands:

For bourbon

cd _sass
bourbon install

For bitters

cd _sass
bitters install

For neat

cd _sass
neat install

JEKYLL

Für jekyll sollte folgendes gelten. Der User kann das Repo forken und sofort loslegen. Falls er das Repo auscheckt > “git clone” sollten nur minimale Abhängigkeiten vorhanden sein.

Gute Beispiele hierfür:

JEKYLL RESOURCES

WORDPRESS BOILERPLATES

WORDPRESS KNOWLEGE / READING LIST

WORDPRESS CHEAT SHEETS

WORDPRESS WOOCOMMERCE

WORDPRESS CHILD THEME

WORDPRESS - DEPLOYMENT STUFF

WORDPRESS knowlege for local development

  • Better Permalinks with MAMP on OSX Change following config in /Applications/MAMP/conf/apache/

Changed for Permalinks in Wordpress

AllowOverride is normaly set to none

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride All
</Directory>

This allows to have proper urls for WPML in local development

WORDPRESS - PLUGINS

hier noch definiren was standard und was optional ist

STANDARD

MULTILINGUAL

STORE

  • WooCommerce

STORE MULTILINGUAL

http://wpml.org/de/documentation-3/ahnliche-projekte/woocommerce-multilingual-betreiben-sie-e-commerce-seiten-in-mehreren-sprachen/

STORE PLUGINS

OPTIONAL

DOCUMENTATION

Will happen in this repository. A good guide about using markdown on github:

DEV WORKFLOW FOR SASS

use gulp with livereload, browsersync, sass sourcemaps to work in chrome dev tools

UNCSS

Meta Tags