Knowing the file structure
After run of
fronthack init command, the following file structure is found.
- 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.
- 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.
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
- images - image files from the
src/imagesdirectory, compressed by built in imagemin package, which decreases the size up to 56%!
- js - minified JS files from the
- **index.html **- complete HTML file generated by Mustache.
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.