skydive-ct-theme

Concrete5 CMS Theme for SkydiveCT

Installation

We are using Docker, Git Flow, and Gulp for local development

To install Docker:

• Download the Docker Engine that is for your system (windows, mac)
• Also download the Docker Toolbox for Mac or Windows.

To install NPM

• Go to the Node Website and download the latest version recommended for most users.

To Install Gulp

• In Terminal, no matter what folder, type npm install --global gulp-cli on windows and sudo npm install --global gulp-cli on mac, entering your password.

Development

• Clone the repository
• Navigate to the project folder
• Run docker-compose up
  • Alternatively, click the start button in Kitematic next to this project's container.
• Open Kitematic to make sure the virtual machine has been created (should be visible on the side)
• Also in the project folder (but in a new terminal window/tab), run gulp
• Navigate to localhost:8000 in your web browser.

Debugging:

• "Help! localhost:8000 returns an error in the browser!" Check to make sure that the docker container is running in kitematic. This is signified by a green circle with a flowing wave within it next to the container name.
• "Help! I'm editing my sass and javascript files, but they're not being updated!" You likely forgot to run gulp in the terminal. This is essential, as your html files are looking in the dist folder but you are editing in the src folder.

Guidelines:

CSS (SCSS)

Components

• All major site components should be saved as their own .scss file in the form of _[Component Name].scss.
  • The file's name should be preceeded by an underscore in order to prevent the sass compiler from producing errors in reference to variables.
• Every component file should open up with a few variables to quickly customize things like colors. Consult with _nav.scss for reference.
• Remember to include the component file in app.scss with the following code: @import 'base/[Component Name]'; with the rest of the components.

Classes

• Use the BEM naming convention for css classes.
• All elements should have a class. Do Not style a bare element (i.e., nothing like this: a { font-size:11px })
• If you feel a bare element style is necessary, contact Tim
• Feel free to create as many utility classes in the form of .u-[Class Name] in _utilities.scss.

Javascript

• We are NOT using jQuery for this project as it will bloat the code unecessarily.
• Some helper functions inspired by the jQuery library have been written in the utilities.js file.
• Like CSS, each component should have its own javascript file.
  • Each file should be wrapped in an IIFE
• Put lots of comments, especially in describing what each function does.