You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -61,7 +86,17 @@ Open the project [http://localhost:4000](http://localhost:4000).
61
86
└── package.json # npm configuration file
62
87
```
63
88
64
-
```src/``` folder
89
+
#### ```src/``` folder
90
+
91
+
In this folder are our application source files located.
92
+
The folder structure represents app component structure.
93
+
94
+
Each non-underscored folder represents a single component module. Modules can be nested inside each other.
95
+
96
+
There are also special folders which start with underscore.
97
+
For example ```_common/``` folder contains common components that are used by other components at the same lavel.
98
+
99
+
This file structuring makes our app file organization very semantic and scalable. Also It's very easy to work on separate components even if we're developing large-scale application.
65
100
66
101
```
67
102
├── _assets/ # application assets
@@ -71,8 +106,10 @@ Open the project [http://localhost:4000](http://localhost:4000).
@@ -89,15 +126,49 @@ Open the project [http://localhost:4000](http://localhost:4000).
89
126
90
127
```
91
128
92
-
```build/``` folder
129
+
#### ```build/``` folder
93
130
94
-
@ToDo
131
+
In this folder are located files related to our application building. That can be stype preprocessors and template engine compilation, script files concatenation and minification and other related tasks.
132
+
133
+
```
134
+
├── paths/ # application file paths
135
+
| ├── app.js # application file paths
136
+
| └── vendor.js # 3-rd party plugins paths
137
+
├── tasks/ # tasks folder
138
+
| └── {different tasks} # each file represents a single build task
139
+
├── utils/ # some utils
140
+
├── config.js # build configs
141
+
└── gulpfile.js # main build file for gulp build system
142
+
143
+
```
144
+
145
+
#### ```public/``` folder
146
+
147
+
Compiled state of our app with processed styles, templates, scripts and assets.
148
+
149
+
**Warning! Never work inside this folder, because your changes would be overwritten on every build**
95
150
96
151
97
152
## File Types
98
153
154
+
Our app consists of different file types.
155
+
99
156
#### Styles (*.scss)
100
157
158
+
We use [SASS](http://sass-lang.com/) as CSS preprocessor language.
159
+
Main variables are defined in ```src/_variables.scss``` folder.
160
+
For making life easier we broke down styles into components, and on build we're just merging all ```.scss``` files together and processing it to ```pubilc/css/app.css``` file. Style files are merged in following order
161
+
162
+
```
163
+
{variables.scss}
164
+
{bootstrap variables}
165
+
{bootstrap mixins}
166
+
{rest style files}
167
+
```
168
+
The rest style files are merged in alphabetical order depending on their deepth level.
169
+
170
+
There are also different theme variations located in ```src/_themes/``` folder, where you can overwrite main variables and get different themes. There are few predefined themes built in. You can add new theme by adding new file in ```src/_themes/``` folder. The file name should end with ```-theme.scss```.
0 commit comments