GithubHelp home page GithubHelp logo

wct2015 / wct2015 Goto Github PK

View Code? Open in Web Editor NEW
1.0 3.0 0.0 4.53 MB

WordCamp Tokyo 2015 Theme using WordCamp Base Redux

Home Page: https://2015.tokyo.wordcamp.org

License: GNU General Public License v2.0

PHP 52.96% JavaScript 2.52% CSS 38.38% HTML 6.11% Shell 0.03%
wordpress wordcamp wordpress-theme

wct2015's Introduction

Development of wct2015

Deployment status from dploy.io

WordCamp Tokyo 2015 Screenshot

WordPress development for WordCamp Tokyo 2015 using:

  • gulp
  • BrowserSync
  • Foundation

For Contribute

To begin with, check our Wiki.

Requires

  • gulp
  • Bower
  • Node.js
  • npm
  • Sass >= 3.4

Getting Started

  1. Setup your local environment. Recommend vccw.

  2. On your WordPress themes/ directory,

     $ git clone [email protected]:featherplain/wct2015.git wct2015
    
  3. Copy files in src/plugins/ directory to your WordPress plugins/ directory.

  4. Install some dependencies.

     $ npm install
    
  5. Run gulp.

     // proxy mode
     $ gulp
    
     // server mode for static websites
     $ npm run gulp-server
    

BrowserSync

Default is proxy mode.

gulp.task('browser-sync', function() {
  var args = {};
  if (argv.mode == 'server' ) {
    args.server =  { baseDir: paths.root };
    args.startPath = paths.htmlDest;
  } else {
    args.proxy =  paths.vhost;
    args.open = 'external';
  };
  browserSync.init(args);
})

gulp.task('bs-reload', function() {
  browserSync.reload()
});

foundation

src/scss/core/foundation/
src/scss/core/_settings.scss
src/scss/core/_foundation.scss

wct2015's People

Contributors

featherplain avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

wct2015's Issues

配布用バナー4種

  • 依頼者: @featherplain
  • 期日: 8/10
  • 目的: 配布用のバナーを作成して Camp サイトに掲載します。

サイズ

スプレッドシートの [画像] シートに作成するバナーのリストがあります。

参考

素材

Google Drive に一通り素材を src/ フォルダの中に入れているので好きに使ってください!

CSS の読み込み改善

  • foundation の余計な components の読み込みを解除
    • それに伴いスタイルの微調整
  • gulp で CSS の圧縮をする

配布用 FB カバー4種

  • 依頼者: @featherplain
  • 期日: 8/16
  • 目的: 参加者、登壇者、スポンサー、スタッフに配布用の FB カバーを作成します。

印刷班にお願いして公式アカウント用のカバーは制作してもらったので、それを基に制作するといいと思います。
Google Drive の src/ フォルダの sns-cover.zip にあります。

2014.zip は昨年度のものなので良かったら参考にしてください。

サイズ

851*315

要素

基本要素

  • WordCamp Tokyo 2015
  • 10/31 Sat - 11/1 Sun
  • More Publishing
  • ベルサール神田

対象者別要素

  • 参加者: WordCamp Tokyo 2015 に参加します!
  • 登壇者: 〜に登壇します!
  • スポンサー: 〜を応援しています!
  • スタッフ: 〜を運営しています!

必須のものは WordCamp Tokyo 2015 と対象者別の文言です。

素材

Google Drive に一通り素材を src/ フォルダの中に入れているので好きに使ってください!

テーマの切り替え作業

  • 画像のアップロード
  • テーマの適用
  • Jetpack のカスタム CSS の設定
  • サイドバーウィジェットの設定
  • メニューの設定
  • ボタンの設置

バグ_ヘッダー

600px 以下の時、 menu を toggle したときにヘッダーの背景とわぷーがずれる

Central 用バナー

基本要素

  • WordCamp Tokyo 2015

わぷーはあってもなくても OK

デザインについて

公式ドキュメントより

いい例:

WordCamp の地域に紐ついた写真
シンプルで、明るいカラーのイラスト

悪い例:

テキストやロゴ、シンボルなどを含むバナー
複雑なイラスト

とありますが、素材はそろっているので、ロゴと背景にするといいと思います。
印刷班作成の背景を使っても OK ですし、何か和柄の背景を当て込んでも OK です。

和柄素材: http://japanese-pattern.info/

サイズ

926*160

注意事項

提出できるサイズは1サイズだけですが、トリミングして使いまわされるので、小さいサイズでもテキストがなるべく途切れないようにするとよりいいと思います!

トリミングして使われるサイズの例は以下の2つ

参考

素材

Google Drive に一通り素材を src/ フォルダの中に入れているので好きに使ってください!

Slack & GitHub の運用ルールを書く

  • issue
    • labels
  • commit
    • コミットメッセージ
  • Pull request
    • WIP つける時
    • 概要と連絡事項
  • Slack
    • チャンネル
    • GitHub からの通知設定

上記を Wiki に書く

第一弾フッターロゴ掲載

メモ:

  • ゴールドが初回掲載時点でひとつなので、スタイルを微調整する
  • タブレットサイズの時、リンクの文字数が多いと改行されるのを防ぐため、#{$medium-up} のときにカラム数を2、#{$large-up} のときに3にする

タイムテーブル

対象者別アイコン候補

要確認

タグになりそうなもの

kansai っぽい感じで、欄外に脚注とともに付与
https://kansai.wordcamp.org/2015/timetable/

要確認

注意書きの有無

確認事項あれば随時こちらにメモ

  • kansai のように定員も入れたほうがいいか?

ページ作成_バナー配布

@luckyusapyon :

  • 依頼者: @featherplain
  • 期限: 8/12
  • 目的: 配布バナーページを作成して、サイトの認知・拡散に使用します。

昨年度のページを参考にバナー配布のページ作成をお願いします。
Camp サイトで直接作業してもらって、完了したら [下書きで保存] してお知らせください!
https://tokyo.wordcamp.org/2014/about/banners/

  • 固定ページで作成
  • ページタイトル: 「配布バナー」
  • 掲載バナー: 250x250, 468x60, 234x60 の三種類(300x300 はサイドバー掲載用なので必要なし)
  • スラッグ: banners

バナーは Google Drive の banner/01_配布用 にあります。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.