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 +61,17 @@ Open the project [http://localhost:4000](http://localhost:4000).
61
61
└── package.json # npm configuration file
62
62
```
63
63
64
-
```src/``` folder
64
+
#### ```src/``` folder
65
+
66
+
In this folder are our application source files located.
67
+
The folder structure represents app component structure.
68
+
69
+
Each non-underscored folder represents a single component module. Modules can be nested inside each other.
70
+
71
+
There are also special folders which start with underscore.
72
+
For example ```_common/``` folder contains common components that are used by other components at the same lavel.
73
+
74
+
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
75
66
76
```
67
77
├── _assets/ # application assets
@@ -71,8 +81,10 @@ Open the project [http://localhost:4000](http://localhost:4000).
@@ -89,15 +101,49 @@ Open the project [http://localhost:4000](http://localhost:4000).
89
101
90
102
```
91
103
92
-
```build/``` folder
104
+
#### ```build/``` folder
105
+
106
+
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.
93
107
94
-
@ToDo
108
+
```
109
+
├── paths/ # application file paths
110
+
| ├── app.js # application file paths
111
+
| └── vendor.js # 3-rd party plugins paths
112
+
├── tasks/ # tasks folder
113
+
| └── {different tasks} # each file represents a single build task
114
+
├── utils/ # some utils
115
+
├── config.js # build configs
116
+
└── gulpfile.js # main build file for gulp build system
117
+
118
+
```
119
+
120
+
#### ```public/``` folder
121
+
122
+
Compiled state of our app with processed styles, templates, scripts and assets.
123
+
124
+
**Warning! Never work inside this folder, because your changes would be overwritten on every build**
95
125
96
126
97
127
## File Types
98
128
129
+
Our app consists of different file types.
130
+
99
131
#### Styles (*.scss)
100
132
133
+
We use [SASS](http://sass-lang.com/) as CSS preprocessor language.
134
+
Main variables are defined in ```src/_variables.scss``` folder.
135
+
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
136
+
137
+
```
138
+
{variables.scss}
139
+
{bootstrap variables}
140
+
{bootstrap mixins}
141
+
{rest style files}
142
+
```
143
+
The rest style files are merged in alphabetical order depending on their deepth level.
144
+
145
+
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