Conf Boilerplate

A simple boilerplate to help those people who wants to organize conferences/events and don't have too much time to create the website of it.

Table of Contents

• How it works?
• Using
• Contributing
• License
• Credits

How it works?

For more details about the stack, see this.

This boilerplate uses some of the coolest technologies we have today, like: the Jade Engine, SASS, Gulp and many others.

Using

Getting Started

Make sure you have the main dependencies:

• Git
• NodeJS
• GulpJS

Clone this repository:

$ git clone https://github.com/mabrasil/conf-boilerplate.git my_event

Install all dependencies:

$ cd my_project
$ npm install

Run the default gulp task:

$ gulp

Structure

For more details about the Folders and Files structure, see this.

If everything from the Getting Started section goes well, you should have this:

|-- docs/
|-- gulp/
|-- src/
|   |-- images/
|   |-- scripts/
|   |-- styles/
|   |-- templates/
|   |-- config.json
|-- www/
|   |-- css/
|       |-- main.css
|   |-- img/
|   |-- js/
|       |-- main.js
|   |-- index.html
|-- .editorconfig
|-- gulpfile.js
|-- nightwatch.json
|-- package.json

Customization

For more details about customizing your project, see this.

The project already comes with a visual template, feel free to use it, but we recommend you create your own in order to put your own identity in the event.

Anyway, we have prepared something highly customizable for you, so for most of the changes just go to the config.json file and change the value of variables.

Basic information about the conference

Do you want to change the name, date, address or city of the conference? Go ahead! Here you also put site details and conference contact info.

"about":{

  "name":"Conference name",
  "shortDescription":"Conference description",
  "longDescription":"So you want to organize a conference? That's pretty awesome! But we know that you don't have time to create the website, since you have to worry about contacting sponsors, chossing the right place, buying airplane tickets for speakers and many other things. That's why we created this project!",
  "date":"November 15",
  "logo":"img/logo.png",
  "register":{
    "message":"Register now!",
    "link":"https://www.eventick.com.br"
  },
  "location":{
    "place":"Coco Bongo",
    "address":"Boulevard Kukulcan, 30",
    "city":"Cancún",
    "state":"Quintana",
    "mapsKey":"AIzaSyBA8zmp_Mwlz19cazVlsox7QF-apmKtOQY"
  },
  "site":{
    "url":"Conference Example",
    "googleAnalytics": "UA-33656081-1"
  },
  "contact":{
    "email":"[email protected]",
    "twitter":"@example",
    "facebook":"example.conf",
    "github":"example.conf"
  }

}

Labels (i18n)

If you want to use different words than default or different language just change labels for corresponding elements:

"labels": {

  "sections":[
    {
      "name": "about",
      "label": "About"
    },
    {
      "name": "location",
      "label": "Location"
    },
    {
      "name": "speakers",
      "label": "Speakers"
    },
    {
      "name": "schedule",
      "label": "Schedule"
    },
    {
      "name": "sponsors",
      "label": "Sponsors"
    },
    {
      "name": "partners",
      "label": "Partners"
    },
    {
      "name": "organizers",
      "label": "Organizers"
    }
  ],

  "messages":{

    "getTickets": "Get Tickets",
    "moreInformation": "More Information",
    "sponsors":{
      "description": "A very special thanks to our sponsors who believe and are fundamental to the event.",
      "invitation": "Sponsor us to be part of this event, and benefit from this unique environment.",
      "moreInformation": "More Information",
      "mediakit": "#"
    },
    "partners":{
      "description": "A very special thanks to our partners who believe and are fundamental to the event.",
      "invitation": "Help us and be part of this event, and benefit from this unique environment.",
      "moreInformation": "More Information",
      "mediakit": "#"
    },
    "organizers": "This event is brought to you by they:",
    "contact": "Get in Touch",
    "footer":"Made with ♥ by Conf Boilerplate :)"

  }

}

You can also use this object to define other labels, which you would like to access in your templates.

Speakers List

To add/change/exclude a speaker is equally simple, just see speakers variable.

"speakers":[
  {
    "name":"Chuck Norris",
    "bio":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo",
    "photo":"img/speakers/speaker.jpg",
    "company":"Delta Command",
    "twitter":"littlechuck"
  }
]

Schedule

To add/change/exclude any event in the agenda (check-in, lunch, coffee-break, talks etc.) just see schedule variable.

"schedule":[

  {
    "name":"Check-in / Breakfast",
    "time":"9:00"
  },
  {
    "name":"Digging into a Linux Kernel",
    "time": "10h00",
    "speaker": "Linus Torvalds",
    "description":"Lorem ipsum dolor sit amet."
  },
  {
    "name":"Introducing Windows 12",
    "time": "11h00",
    "speaker": "Bill Gates",
    "description":"Lorem ipsum dolor sit amet."
  },
  {
    "name": "Lunch",
    "time": "12h00"
  },
  {
    "name":"How to kill a elephant with one finger",
    "time": "13h00",
    "speaker": "Chuck Norris",
    "description":"Lorem ipsum dolor sit amet.",
    "room":"Auditorium 1"
  }
]

Partners List

To add/change/exclude a partner, just see partners variable.

"partners":[
  {
    "name":"Sponsor 1",
    "logo":"img/sponsors/your-logo.jpg",
    "website":"#"
  }
]

Sponsors List

To add/change/exclude a sponsor, just see sponosors variable.

"sponsors":[
  {
    "name":"Sponsor 1",
    "logo":"img/sponsors/your-logo.jpg",
    "website":"#"
  }
]

Organizers List

To add/change/exclude a partner, just see partners variable.

"organizers":[
  {
    "name":"Organizer 1",
    "photo":"img/organizers/organizer.jpg",
    "website":"#"
  }
]

Workflow

For more details about the automation process, see this.

All the Gulp tasks are in the tasks/ folder. Each one consists of a module with a function which is required into tasks defined in the gulpfile.

• gulp: Initialize watch for changes and a server
• gulp js: Minify and concat files
• gulp jade: Compile Jade files
• gulp sass: Compile SASS files
• gulp img-clean: Clean images
• gulp img-min: Clean images folder and compress image files
• gulp watch: Call to watch files
• gulp deploy-gh: Deploy to Github Pages
• gulp deploy-rsync: Deploy via rsync
• gulp build-gh: Minify files and deploy to Github Pages
• gulp build-rsync: Minify files and deploy via rsync
• gulp tests: Run nightwatch.js - see testing

Deploy

To GitHub Pages

1. Create a GitHub repo for you event.

2. Do the steps from Getting Started section.

3. Point the cloned repo to the repo you created:

$ git remote set-url origin [email protected]:username/projectname.git

1. Run gulp deploy-gh.

Via Rsync

1. Go to the config.json file and fill the deploy.rsync object:

• username:

  • Type: string

  • Description: Your username at the remote server.

• hostname:

  • Type: string

  • Description: Your server domain (URL).

• dest:

  • Type: string

  • Description: Path on the server that will receive the files.

1. Run gulp deploy-rsync.

Showcase

Have you created a website using ConfBoilerplate? Let's us know :)

See the conferences that already used this project as a kickstart:

• JS4Girls Fortaleza

Contributing

Contributions are very welcome! If you'd like to contribute, these guidelines may help you.

##License

Conf Boilerplate is distributed under the MIT License, available in this repository. All contributions are assumed to be also licensed under the MIT License.

Credits

• All markup, scripts and styles were originally written by the Front in Amsterdam organizers. Copyright 2015, Front in Amsterdam. The original repo can be found here.

• The documentation, mocking images & data, themes, purpose, and everything related to the idea/philosophy of the project is brought from the original Conf Boilerplate which is MIT Licensed © BrazilJS Foundation.