Knowing the file structure

After run of fronthack init command, the following file structure is found.

src/

Input directory. Contains source files like Sass, HTML partials and not minified JavaScript. This is where your code is created.

  • designs - the place where you should upload the files with designs to display them under the code in the browser. More in chapter Coding the first page.
  • fonts - the directory that stores custom fonts. By default, You can spot there WAAT icon font package, which is required by .icon component.
  • images - the place to store graphics and images.
  • js - the place to store Javascript code.
  • partials - contains Mustache files called partials - a small reusable blocks of HTML, which are used on various subpages, like header or footer. They becomes rendered in adequate places by Mustache templating language.
  • sass - the core of SMACSS and BEM methodologies. Sass files becomes compiled too output CSS and are divided into following subdirectories:
    • base - styles of basic HTML tags, so typography tables, global styles etc. Additionally, a nice Fronthack form framework is located there.
    • components - library of components used on a project.
    • layout - styles of elements on layout level. Backgrounds, paddings, flex properties of various sections, which are too general to be a components.
  • index.html - example starting file of HTML. You can check here how to use Mustache partials correctly.

dist/

Fully self-sufficient output directory, ready to be hosted on production server. It contains rendered CSS, HTML and all other necessary files like JS, images and fonts. Editing of these files is pointless, because they will become overwritten on next run of npm run build command.

  • css - contains minified, complete CSS file rendered from Sass.
  • fonts - fonts copied from src/fonts.
  • images - image files from the src/images directory, compressed by built in imagemin package, which decreases the size up to 56%!
  • js - minified JS files from the src/js directory.
  • **index.html **- complete HTML file generated by Mustache.

.dev/

Output directory to live preview of the results, which is hosted on http://localhost:8000 after running npm run dev command. Unlike dist directory, code there is not minified which makes it easier to debug. Instead of that it loads various helpful JS scripts.

./

Another elements in the root directory:

  • node_modules - contains dependent Npm packages, required by Fronthack.
  • htmlhintrc - HTMLHint configuration file. Read more at linters.
  • sass-lint.yml - Sass Lint configuration file. Read more at linters.
  • gulpfile.js - configuration file of the automation scripts.
  • package.json - Npm configuration file.


Improve this page