Skip to content

Commit

Permalink
Migrated to sass
Browse files Browse the repository at this point in the history
  • Loading branch information
ozasadnyy committed Aug 9, 2014
1 parent 968e707 commit 248afb3
Show file tree
Hide file tree
Showing 232 changed files with 14,090 additions and 2,905 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
_site
_site
_sass/.sass-cache
157 changes: 76 additions & 81 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,122 +1,117 @@
# GDG DevFest 2014 site template
# Project Zeppelin / GDG DevFest 2014 site template

### Demo
You can always check current dev version at http://gdg-ukraine.github.io/devfest-2014/
### About
Project Zeppelin allows you to setup awesome GDG DevFest site in 5 minutes.

### Local development
Generate site:
Project is builded on top of [Jekyll](http://jekyllrb.com/) - simple, blog-aware, static site generator. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your website from GitHub’s servers for free. [Learn more about Jekyll](http://jekyllrb.com/).

```
jekyll build -w --config _config.yml
```
Template is brought by [GDG Lviv](http://lviv.gdg.org.ua/) team.

Start server:

```
jekyll serve --config _config.yml
```
### Live demo http://gdg-ukraine.github.io/devfest-2014/

### Benefits
* Simple and beautiful design
* Responsive
### Features
* Easy to setup
* Simple and responsive design
* Inegrated speakers and sessions management
* SVG icons
* Easily to configure
* Easily to deploy
* SEO friendly

### Contributors
* Design and markup: [ozasadnyy](https://github.com/ozasadnyy)
* Jekyll integration: [zasadnyy](https://github.com/zasadnyy)



## Documentation
### Quick-start guide
1. [Fork](https://github.com/gdg-x/zeppelin/fork) this repo
2. Clone locally
3. Update ```_config.yml```
4. Select what content blocks do you need
5. Push changes to ```gh-pages``` branch
6. Enjoy your awesome DevFest site at ```http://[your github name].github.io/zeppelin/```

### Automation (only Windows)

## Local development

#### Images
You can optimize images by running **all_image_optimization.bat** from `..\automation\images` folder
Check if you have [all requirments for local environment](http://jekyllrb.com/docs/installation/), install [Jekyll server](http://jekyllrb.com/docs/quickstart/) gem and run this command from project root folder:

```bash
jekyll serve -w
```
all_image_optimization.bat -d -jtran -pout -pquant -optip -gsicle -svgo
```

Parameters:
* **-d** - default path to images' folder (you can pass your own path: `all_image_optimization.bat D:\development\web\devfest-14\images -jtran`) **Required!**
* [**-jtran**](http://jpegclub.org/jpegtran) - optimize JPEG images (suggested by [Web Fundamentals](https://developers.google.com/web/fundamentals))
* [**-pout**](http://advsys.net/ken/utils.htm) - lossless PNG optimization
* [**-optip**](http://optipng.sourceforge.net) - lossless PNG optimization (suggested by [Web Fundamentals](https://developers.google.com/web/fundamentals))
* [**-pquant**](http://pngquant.org) - lossy PNG optimization (suggested by [Web Fundamentals](https://developers.google.com/web/fundamentals))
* [**-gsicle**](http://www.lcdf.org/gifsicle) - create and optimize GIF images (suggested by [Web Fundamentals](https://developers.google.com/web/fundamentals))
* [**-svgo**](https://github.com/svg/svgo) - Nodejs-based tool for optimizing SVG vector graphics files (suggested by [Web Fundamentals](https://developers.google.com/web/fundamentals)) (**Nodejs required**)
Site will be available at http://127.0.0.1:4000/zeppelin/

For `-svgo` intall [Nodejs](http://nodejs.org/) and then run command
**NOTE:** in this mode all changes to html and data files will be automatically regenerated, but after changing ```_config.yml``` you have to restart server.

### Sass support
Install Sass. Ruby uses Gems to manage its various packages of code like Sass. In your open terminal window type:
```bash
gem install sass
```
[sudo] npm install -g svgo
```

You can use some of parameters. For example

Also you need to install the latest version of [Compass](http://compass-style.org/) with command
```bash
gem install compass --pre
```
all_image_optimization.bat -d -jtran -optip
```

Moreover, you can run the files separately **jpegtran.bat**, **pngout.bat**, **optipng.bat**, **pngquant.bat**, **gifsicle.bat** or **svgo.bat** which by default will optimize all images in `../img/` folder and subfolder or pass a path to the folder.

Then for combining media queries you can use [Sass::MediaQueryCombiner](https://github.com/aaronjensen/sass-media_query_combiner) plugin. Install with command
```bash
gem install sass-media_query_combiner
```
jpegtran.bat
```
Or

And for prefixing css3 properties use [Autoprefixer](https://github.com/ai/autoprefixer)
```bash
gem install autoprefixer-rails
```
jpegtran.bat D:\development\web\devfest-14\images
```

#### Minify CSS and JS
You can optimize all `.css` and `.js` files in `../css/` and `../js/` folders by running **minify_all.bat** from `..\automation\minifying` folder

```
minify_all.bat
To watch changes in `.sass` files and compile it to the `.css` on a fly, run this command from `\_sass\` folder
```bash
compass watch -c config.rb -e production
```

Specify pathes to `.css` and `.js` folders through parameters
Learn more about Sass development from [documentation](https://github.com/gdg-x/zeppelin/wiki/Sass-development).

```
minify_all.bat path_to_css_folder path_to_js_folder
```

For example
### Resource optimizations (optional)

You can optimize images and minify css and javascript automaticaly (for now only on Windows).
Optimize all images by running this script from `/automation/images/` folder:
```bash
all_image_optimization.bat -d -jtran -pout -pquant -optip -gsicle -svgo
```
minify_all.bat D:\development\web\devfest-14\styles D:\development\web\devfest-14\scripts

To minify CSS and JS run `minify_all.bat` from `/automation/minifying/` folder:
```bash
minify_all.bat
```

**Note!** path to css folder should be first
For sure, you can run the files separately **minify_css.bat** or **minify_js.bat**
You can use some of them. For example
Learn more about available optimization options from [documentation](https://github.com/gdg-x/zeppelin/wiki/Resources-optimizations).

```
minify_css.bat
```
### Documentation
Quick-start guide is not enough? Checkout [full documentation](https://github.com/gdg-x/zeppelin/wiki).

Or

```
minify_css.bat D:\development\web\devfest-14\styles
```
### TODO List
* Schedule page template
* Optimization scripts for mac and linux

Also you can generate `.min` files only of **style.css** and **scripts.js**
### Known issues
* Scrolling on open navbar

```
minify_style_css_js
```
### Used libraries
* [Bootstrap](https://github.com/twbs/bootstrap)
* [Animate.css](https://github.com/daneden/animate.css)
* [Waves](https://github.com/publicis-indonesia/Waves)
* [jquery.appear](https://github.com/bas2k/jquery.appear)
* [jQuery countTo Plugin](https://github.com/mhuggins/jquery-countTo)
* [Typed.js](https://github.com/mattboldt/typed.js)

```
minify_scripts_js
```
### Who is using template?
Going to use template? Go on! The only thing we ask - let us know at [*[email protected]*](mailto:[email protected]) so we can include you to this list, or make a pull request.

* [GDG DevFest Ukraine 2014](http://devfest.gdg.org.ua/)
* [GDG DevFest Instanbul 2014](http://devfesttr.com/)
* [GDG DevFest Omsk 2014](http://gdg-devfest-omsk.org/)
* [GDG Bangalore Site](http://gdgbangalore.github.io/)
* [2014 南阳 GDG Devfest 大会](http://devfest.gdgny.org)

### Contributors
* Design and markup: [Oleh Zasadnyy](https://github.com/ozasadnyy)
* Idea and Jekyll integration: [Vitaliy Zasadnyy](https://github.com/zasadnyy)

#### _More information comming soon... Stay tuned!_
### Licence
Project is published under the [MIT licence](https://github.com/gdg-x/zeppelin/blob/master/LICENSE.txt). Feel free to clone and modify repo as you want, but don'y forget to add reference to authors :)
15 changes: 15 additions & 0 deletions _data/partners.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
-
group: 'General sponsor'
elements:
- {name: 'Google', description: 'Google', link: 'https://www.google.com.ua/intl/en/about/', imageUrl: 'google.svg'}
-
group: 'With support of'
elements:
- {name: 'Lviv Convention Bureau', description: 'Lviv Convention Bureau - Business tourism in Lviv, Ukraine', link: 'http://lvivconvention.com.ua/', imageUrl: 'lvivconventionbureau.svg'}
- {name: 'IT-BPO', description: 'IT-BPO Lviv Cluster', link: 'http://it-bpo.lviv.ua/', imageUrl: 'it-bpo.png'}
-
group: 'Information partners'
elements:
- {name: 'career4it', description: 'career4it - employment fair for it talents', link: 'http://career4it.com/en/', imageUrl: 'career4it.png'}
- {name: 'IT Arena', description: 'IT Arena - the biggest IT conference in western Ukraine', link: 'http://itarena.lviv.ua/', imageUrl: 'it-arena.svg'}
- {name: 'Startup Depot', description: 'Startup Depot - Lviv Business Incubator', link: 'http://innovateinlviv.com/', imageUrl: 'startup-depot.svg'}
36 changes: 0 additions & 36 deletions _data/sponsors.yml

This file was deleted.

2 changes: 1 addition & 1 deletion _data/team.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
name: "Oleh"
surname: "Zasadnyy"
company: "GDG Lviv"
title: "Designer"
title: "Designer and Web developer"
bio: "Finalist of Google I/O 2013, GDG DevFest 2013, Google I/O 2014 T-Shirt design contest. Web developer."
thumbnailUrl: OlehZasadnyy.jpg
team: true
Expand Down
4 changes: 2 additions & 2 deletions _includes/about.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- About Section -->
<section id="about">
<section id="about" class="about">
<div class="content-wrapper">
<div class="col-lg-10 col-lg-offset-1">
<h3>About {{site.eventName}}</h3>
Expand All @@ -8,7 +8,7 @@ <h3>About {{site.eventName}}</h3>
<div class="animated hiding" data-animation="fadeInDown" data-delay="0">
<h5>Conference</h5>
<img class="img-circle" src="{{ site.baseurl }}/img/conference.jpg" height="128" width="128" alt="Conference">
<p>The biggest Google related event in Ukraine carefully crafted for you by GDG community! Awesome speakers and lot's of fun! This time, right in the heart of Lviv!</p>
<p>The biggest Google related event in the country carefully crafted for you by GDG community! Awesome speakers and lot's of fun!</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6">
Expand Down
2 changes: 1 addition & 1 deletion _includes/blog.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- Begin Blog-->
<section id="blog">
<section id="blog" class="blog">
<div class="content-wrapper text-left">
<div class="col-md-10 col-sm-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1">
<h3>Latest news</h3>
Expand Down
2 changes: 1 addition & 1 deletion _includes/buy-tickets.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- Begin Buy Tickets Section -->
<section id="buy-tickets">
<section id="buy-tickets" class="buy-tickets">
<div class="content-wrapper">
<div class="col-lg-8 col-md-10 col-lg-offset-2 col-md-offset-1">
<h3>Pricetable</h3>
Expand Down
4 changes: 2 additions & 2 deletions _includes/direction-details.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!-- Begin Direction Details-->
<section id="direction-details">
<section id="direction-details" class="direction-details">
<div class="content-wrapper">
<section class="image-section" style="background-image: url('{{ site.baseurl }}/img/direction-details.jpg');">
<section class="image-section standart-height" style="background-image: url('{{ site.baseurl }}/img/direction-details.jpg');">
<h3>Get around Lviv</h3>
</section>
<div class="row">
Expand Down
11 changes: 5 additions & 6 deletions _includes/find-way.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<!-- Begin Find Way-->
<a id="findyourway"/>
<section id="find-way">
<div id="canvas-map"></div>
<section id="find-way" class="find-way">
<div id="canvas-map" class="canvas-map"></div>
<div class="content-wrapper text-left">
<h3 class="animated hiding" data-animation="fadeInUp" data-delay="0">Find your way here</h3>
<div class="map-card col-lg-3 col-md-4 col-sm-6 col-xs-12">
Expand All @@ -12,7 +11,7 @@ <h3 class="animated hiding" data-animation="fadeInUp" data-delay="0">Find your w
</svg>
</div>
<div class="location-result">
<span id="result-name"></span>
<span id="result-name" class="result-name"></span>
<span>to DevFest</span>
<svg id="direction-cancel" class="icon icon-cross" viewBox="0 0 30 32">
<use xlink:href="{{ site.baseurl }}/img/sprites/sprites.svg#icon-cross"></use>
Expand All @@ -26,7 +25,7 @@ <h3 class="animated hiding" data-animation="fadeInUp" data-delay="0">Find your w
<use xlink:href="{{ site.baseurl }}/img/sprites/sprites.svg#icon-flag"></use>
</svg>
<span>Distance</span>
<span id="distance" class="details-result pull-right"></span>
<span id="distance" class="detailed-result pull-right"></span>
</li>
<li>
<div id="mode">
Expand All @@ -39,7 +38,7 @@ <h3 class="animated hiding" data-animation="fadeInUp" data-delay="0">Find your w
<option value="BICYCLING">BICYCLING</option>
<option value="TRANSIT">TRANSIT</option>
</select>
<span id="estimateTime" class="details-result pull-right"></span>
<span id="estimateTime" class="detailed-result pull-right"></span>
</div>
<a id="find-flight" href="https://google.com/flights" class="pull-right hidden" target="_blank">Find Flight</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion _includes/footer.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- Begin Footer -->
<footer id="footer">
<footer id="footer" class="footer">
<div class="row">
<div class="pull-left col-md-6 col-xs-6">
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" data-href="{{site.url}}"></div>
Expand Down
10 changes: 2 additions & 8 deletions _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,12 @@
<meta name="msapplication-TileImage" content="{{ "/img/favicons/mstile-144x144.png" | prepend: site.baseurl }}">
<meta name="msapplication-config" content="{{ "/img/favicons/browserconfig.xml" | prepend: site.baseurl }}">

<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,500&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

<!-- Bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="{{ "/css/animate.min.css" | prepend: site.baseurl }}" rel="stylesheet">
<link href="{{ "/css/waves.min.css" | prepend: site.baseurl }}" rel="stylesheet">
<link href="{{ "/css/style.min.css" | prepend: site.baseurl }}" rel="stylesheet">
<link href="{{ "/css/main.min.css" | prepend: site.baseurl }}" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<![endif]-->
</head>
13 changes: 5 additions & 8 deletions _includes/hero.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
<!-- Begin Top Section -->
<section id="top-section-hero" style="background-image: url('{{ site.baseurl }}/img/hero.jpg');">
<section id="top-section-hero" class="top-section-hero image-section" style="background-image: url('{{ site.baseurl }}/img/hero.jpg');">

{% include navigation.html %}

<div class="jumbotron">
<div class="animated hiding" data-animation="fadeInDown" data-delay="500">
<h1>GDG DevFest <span id="typeout-text"></span> 2014</h1>
<p>{{site.eventDate}}</p>
<a href="{{ site.c4pUrl }}" target="_blank">
<span class="btn btn-primary waves-element waves-button waves-light waves-will-raise">
Become a speaker
</span>
</a>
<span class="btn btn-primary waves-element waves-button waves-light waves-will-raise">
<a href="{{ site.c4pUrl }}" target="_blank">Become a speaker</a>
</span>
</div>
</div>
<a href="#about" class="explore">
<a href="#about" class="explore animated hidden fadeInDown">
<svg class="icon icon-arrow-down" viewBox="0 0 32 32">
<use xlink:href="{{ site.baseurl }}/img/sprites/sprites.svg#icon-arrow-down"></use>
</svg>
Expand Down
Loading

0 comments on commit 248afb3

Please sign in to comment.