teclogica v1.0.0

Configurations | Development

Configurations:

Install Node:

https://nodejs.org/en/

Install Gulp:

npm install --global gulp-cli

Install Hugo:

1. brew update && brew install hugo

OR

1. Open Windows Explorer.
2. Create a new folder: C:\Hugo (assuming you want Hugo on your C drive – it can go anywhere.)
3. Create a subfolder in the Hugo folder: C:\Hugo\bin.
4. Create another subfolder in Hugo: C:\Hugo\Sites.
5. Download latest version from https://github.com/spf13/hugo/releases
6. Extract all contents to your ..\Hugo\bin folder.
7. Add Hugo to windows path
8. Right click on the Start button.
9. Click on System.
10. Click on Advanced System Settings on the left.
11. Click on the Environment Variables… button on the bottom.
12. In the User variables section, find the row that starts with PATH (PATH will be all caps).
13. Double-click on PATH.
14. Click the New… button.
15. Type in the folder where hugo.exe was extracted, which is C:\Hugo\bin if you went by the instructions above. The PATH entry should be the folder where Hugo lives, not the binary. Press Enter when you’re done typing.
16. Click OK at every window to exit.

Sublime:

Install package: EditorConfig

Configurations:

npm install

Run:

npm run gulp

Development

Code Guidelines | Pages | Custom post types | Data | Assets

Code Guidelines

Use the guidelines repository as a guide.

Pages

Your home page is located at hugo/layouts/index.html

To create a new page you must create two files.

The first file should be created in hugo/content/page-slug/index.html

The index.html file must contain the front matter:

+++
title = "Title of the page"
description = "Description of the page"
menu = "main"
weight = 1
type = "page"
layout = "sobre"
+++

Obs:

• Do not include anything else in this file besides the front matter
• You should set the title and description of the page.
• Menu: indicates which menu the page goes in, remove it if the page will not be placed in the menu.
• Weight: is used for the order the items appear in the menu
• Type: must be left as it is
• Layout: should specify the name of the layout file you will create. This is the file that will contain your pages html.

The second file must be created in hugo/layouts/page/layout.html

The file name must be the same as the layout saved in your hugo/content/page-slug/index.html file.

Ex: hugo/layouts/page/sobre.html

* It is a good idea to use the same value for the content directory (page-slug) and your layout in order to avoid confusion.

Custom post types

Custom post types, like "Cases" or "Services" work similar to data but they contain an actual internal page.

Creating new custom post types:

Step 1

Create a new file in hugo/archetypes and name it post-type-slug.html

Inside this file you must specify its attributes using front matter. Example:

+++
name = ""
description = ""
logo = ""
main_image = ""
weight = ""
+++

You should only fill out the values you'd like to be default, otherwise, leave them empty. This is because archetypes can be created form the command line. See Hugo - Archetypes for more information.

Step 2

Now Create a new directory inside hugo/content and name it, for example, "cases".

Inside this directory you will create a new .html file for each of your custom post type pages.

This file must contain the front matter created on step one. All necessary values must be filled.

Under the front matter you will include this pages content.

The templates for the custom post types can be created in hugo/layouts/post-type-slug.

Inside this directory you can create as many layouts as needed. Examples of layouts:

• li.html: can be used if you list the custom post types in you site.
• single.html: can be used the the internal page of you custom post type.
• slider.html: can be used if you have a slider that shows your custom post types.

Looping though custom post types:

{{ range (where .Data.Pages "Section" "cases") }}
  {{ .Render "summary" }}
{{ end }}

Explanation:

• "cases" is your custom post type.
• "summary" is the layout you'd like to render.

Data

Data like e-books, clients (for galleries), team members can be stored in data directories. Theses directories can be found at hugo/data.

Looping though data:

<ul>
{{ range $.Site.Data.materiais }}
  <li>{{ .Title }} - {{ .Link }}</li>
{{ end }}
</ul>

Assets

Images, .js, and .scss files must be place in the /src directory.

The directories inside of it are watched by gulp compiled and copied to the public directory when changes are made.

Background images

Large background images (sections/pages) must be saved in four (4) different sizes and configured on the div using foundation's data-interchange attribute.

The sizes (widths) are:

• xlarge: 1920px
• large: 1440px
• medium: 1024px
• small: 640px

CSS files

• _fonts.scss contains custom fonts, not all projects will need this. In case you don't, remove the import from the _imports.scss file.
• _helpers.scss contains helpers you will need, like background position and size classes, classes for add default margin and paddings, etc. If you create new css that can be considered a helper, this is where you will save it.
• _imports.scss contains all the imports you will need. Here you can also comment out certain modules of foundation you know you will not use. Foundation is compiled from here.
• _settings.scss contains all basic configurations for foundation. This is where you can change default font sizes, default font-family, basic color palette, base colors, etc. Here is where you can customize foundations basic scss variables.
• custom.scss is where you will write all your custom css. Create variables and mixins as needed.

To include breakpoints, use scss @include breakpoint. Ex:

.time .column {
  padding: {
    left: 0;
    right: 0;
  }
  background: $black;

  img {
    position: relative;
  }

  @include breakpoint(medium only) {
    &:nth-child(3n+1) img {
      top: -1rem;
    }
    &:nth-child(3n) img {
      top: -4rem;
    }
  }
  @include breakpoint(large) {
    &:nth-child(4n+1) img {
      top: -1rem;
    }
    &:nth-child(4n+3) img {
      top: -4rem;
    }
  }
}