Skip to content

Commit 42fd625

Browse files
committed
Update README.md
1 parent f154ede commit 42fd625

File tree

1 file changed

+28
-27
lines changed

1 file changed

+28
-27
lines changed

README.md

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
<a href="http://modularcode.github.io/modular-admin-html/" target="_blank">View Demo</a> | <a href="https://github.com/modularcode/modular-admin-html/archive/master.zip" target="_blank">Download ZIP</a>
1414
</strong>
1515
</p>
16-
[ModularAdmin](http://modularcode.github.io/modular-admin-html/) is an open source dashboard theme
17-
built in modular way. That makes it awesomely easy to scale, modify and maintain.
16+
[ModularAdmin](http://modularcode.github.io/modular-admin-html/) is an open source dashboard theme built in a modular way. That makes it extremely easy to scale, modify and maintain.
17+
1818
### Main features
1919

2020
* HTML5 + CSS3 with FlexBox
@@ -48,8 +48,8 @@ AngularJS, Angular2, React and Meteor versions are coming soon.
4848
* Android 4.4+, Chrome for Android 44+
4949
* iOS Safari 7+
5050

51-
Some of the components use new Flexbox Layout module which is available in modern browsers. Bootstrap4 is used as main fraimwork.
52-
Please make sure if that's suitable for you [Flexbox browser support](http://caniuse.com/#feat=flexbox).
51+
Some of the components use the new Flexbox Layout module which is available in most modern browsers. Bootstrap4 is used as main framework. Please make sure that it's suitable for you: [Flexbox browser support](http://caniuse.com/#feat=flexbox).
52+
5353
<br>
5454
## Getting Started
5555

@@ -59,12 +59,12 @@ For assembling the application, you need to have [NodeJs](https://nodejs.org/en/
5959
npm install -g bower
6060
```
6161

62-
Clone repository to local `modular-admin-html` folder
62+
Clone repository to the local `modular-admin-html` folder
6363
```
6464
git clone https://github.com/modularcode/modular-admin-html.git
6565
```
6666

67-
Change to new folder
67+
Change to the new folder
6868
```
6969
cd modular-admin-html
7070
```
@@ -103,22 +103,23 @@ Open the project [http://localhost:4000](http://localhost:4000).
103103

104104
#### ```src/``` folder
105105

106-
In this folder are our application source files located.
107-
The folder structure represents app component structure.
106+
This folder contains our application source files.
107+
The folder structure reflects the app component structure.
108+
108109

109110
Each non-underscored folder represents a single component module. Modules can be nested inside each other.
110111

111-
There are also special folders which start with underscore.
112-
For example ```_common/``` folder contains common components that are used by other components at the same lavel.
112+
There are also special folders which start with an underscore.
113+
For example ```_common/``` folder contains common components that are used by other components at the same level.
113114

114-
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.
115+
This file structuring makes our app file organization very semantic and scalable. Also It's very easy to work on separate components even if you're developing large-scale applications.
115116

116117
```
117118
├── _assets/ # application assets
118119
├── _common/ # common components
119120
| ├── helpers/ # handlebars helpers
120121
| └── styles/ # application common styles
121-
├── _themes/ # different theming versions
122+
├── _themes/ # different theme versions
122123
├── app/ # app module (dashboard view)
123124
│ ├── _common/ # app common components
124125
│ | ├── editor/ # wysiwyg editor files
@@ -143,7 +144,7 @@ This file structuring makes our app file organization very semantic and scalable
143144

144145
#### ```build/``` folder
145146

146-
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.
147+
This folder contains files related to our application compilation. That can be styles preprocessing (LESS,SASS,PostCSS) and template engine compilation, script file concatenation and minification and other related tasks.
147148

148149
```
149150
├── paths/ # application file paths
@@ -172,21 +173,21 @@ Our app consists of different file types.
172173

173174
We use [SASS](http://sass-lang.com/) as CSS preprocessor language.
174175
Main variables are defined in ```src/_variables.scss``` folder.
175-
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 ```dist/css/app.css``` file. Style files are merged in following order
176+
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 ```dist/css/app.css``` file. Style files are merged in the following order
176177

177178
```
178179
{variables.scss}
179180
{bootstrap variables}
180181
{bootstrap mixins}
181182
{rest style files}
182183
```
183-
The rest style files are merged in alphabetical order depending on their deepth level.
184+
The remaining style files are merged in the alphabetical order.
184185

185-
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```.
186+
There are also different theme variations located in ```src/_themes/ folder```, where you can change the main variables to get different themes. There are a few predefined themes built in. You can add new themes by adding a new file in ```src/_themes/``` folder. The file name must end with ```-theme.scss```.
186187

187188
#### Scripts (*.js)
188189

189-
We separate application's scripts across it's components. For simplicity we use ES5 in this version and just wrap each component's script in jQuery ```$(function() { })```. JS configurations are defined in ```src/config.js``` file. On build application script files are merged together and copied to ```dist/js/app.js``` fole. Script files are merged in following order
190+
We separate application's scripts across its components. For simplicity we use ES5 in this version, and just wrap each component's script in jQuery ```$(function() { })```. JS configurations are defined in ```src/config.js``` file. On build, application script files are merged together and copied to ```dist/js/app.js``` folder. The script files are merged in the following order.
190191

191192
```
192193
{config.js}
@@ -196,13 +197,13 @@ We separate application's scripts across it's components. For simplicity we use
196197

197198
#### Templates (*.hbs)
198199

199-
Templates are pieces of HTML files written in template engine language. We use [Handlebars](http://handlebarsjs.com/), which allows to have conditions in HTML, reuse partials in different pages (e.g. sidebars, footers), use loops, layouts etc.
200+
Templates are pieces of HTML files written in template engine language. We use [Handlebars](http://handlebarsjs.com/), which allows to have conditions in HTML, reuse partials in different pages (e.g. sidebars, footers), use loops, layouts etc.
200201

201202
#### Pages (*-page.hbs)
202203

203-
Templates themselves are just parts of markup, and aren't compiled as separate files. What we really want in final output is ```.html``` page in ```dist/``` folder. For that reason there are special handlebar templates which filenames end with ```-page.hbs```. Each ```{pagename}-page.hbs``` file would be compiled to ```dist/{pagename}.html``` page with flatened file structure.
204+
Templates themselves are just parts of the markup, and aren't compiled as separate files. What we really want in the final output is a ```.html``` page in the ```dist/``` folder. There are special handlebar templates for it, their filenames ending with ```-page.hbs```. Each ```{pagename}-page.hbs``` file would be compiled to ```dist/{pagename}.html``` page with a flatened file structure.
204205

205-
Pages can consist of different templates (partials) which can be included thanks to handlebars partial including. Also each page have it's context which is data passed into template on rendering. That data is used in template expressions and variables. page contexts can be defined in two ways:
206+
Pages can consist of different templates (partials) which can be included thanks to handlebars partial including feature. Also each page has its context, which is a data passed into the template on rendering. That data is used in template expressions and variables. page contexts can be defined in two ways:
206207

207208
**YAML** headers ([example](https://github.com/modularcode/modular-admin-html/blob/master/src/app/dashboard/index-page.hbs))
208209

@@ -228,15 +229,15 @@ module.exports = {
228229
}
229230
```
230231

231-
The final result of page context is compination of both ways. Moreover, different depth level _context.js files are extending each other and then are extended with YAML headers data. For simplicity we use only **YAML** headers.
232+
The final result of page context is a combination of both ways. Moreover, different depth level _context.js files are extending each other and then are extended with YAML headers data. For simplicity we use only **YAML** headers.
232233

233234
#### Layouts (*-layout.hbs)
234235

235-
If different pages have lot of common components like sidebar, header, footer, It's a good idea to define a layout for those common pages and define in page files only the content which is unique.
236+
If different pages have a lot of common components like sidebars, headers, footers, then it's a good idea to define a layout for those common pages, and define in page files only the content which is unique.
236237

237-
Layout is a page content wrapper. If the page has layout in output we'll get page's content inserted into layout. Layouts should have ```{{{body}}}``` handlebars tag, which is entry point for page content. ([example](https://github.com/modularcode/modular-admin-html/blob/master/src/app/app-layout.hbs))
238+
Layout is a page content wrapper. If the page has a layout in output we'll get page's content inserted into the layout. Layouts should have ```{{{body}}}``` handlebars tag, which is entry point for the page content. ([example](https://github.com/modularcode/modular-admin-html/blob/master/src/app/app-layout.hbs))
238239

239-
To define a page layout you need to specify page file context's ```layout``` variable. It can be done both by YAML header or _context.js file. ([example](https://github.com/modularcode/modular-admin-html/blob/master/src/app/forms/forms-page.hbs)).
240+
To define a page layout you need to specify page file context's ```layout``` variable. It can be done both with a YAML header or a _context.js file. ([example](https://github.com/modularcode/modular-admin-html/blob/master/src/app/forms/forms-page.hbs)).
240241

241242
Layouts can also have contexts and parent layouts.
242243

@@ -251,16 +252,16 @@ If you need more advanced layouting with multiple content blocks at the same tim
251252

252253
#### Vendor files
253254

254-
Except application files there are also third party plugin files (e.g. Bootstrap). They are managed by using [Bower](http://bower.io/). Usually vendor libraries consist from scripts, styles and assets (images, fonts). The build system will concatenate and copy all script and style files correspondingally to ```dist/js/vendor.js```and ```dist/css/vendor.css``` also will copy all assets to ```dist/assets/``` folder.
255+
In addition to application files, there are also third party plugin files (e.g. Bootstrap). They are managed by using [Bower](http://bower.io/). Usually vendor libraries consist from scripts, styles and assets (images, fonts). The build system will concatenate and copy all the script and style files accordingly to ```dist/js/vendor.js``` and ```dist/css/vendor.css```. It also will copy all assets to the ```dist/assets/``` folder.
255256

256257
<br>
257258
## Build Tasks
258259

259260
<br>
260261
## Get in touch
261262

262-
Usually we're discussing stuff in [ModularCode Facebook Group](https://www.facebook.com/groups/710770032358423/).
263-
Feel free to reach us for any questions, sugestions, remarks and potential feature requests.
263+
Usually we're discussing stuff in the [ModularCode Facebook Group](https://www.facebook.com/groups/710770032358423/).
264+
Feel free to contact us with any questions, sugestions, remarks and potential feature requests that you might have.
264265

265266
* Gevorg Harutyunyan | [LinkedIn](https://www.linkedin.com/profile/view?id=AAMAAA7ne4gBF-IVNsoiBaeOeDTd5YGSTVN2eBs) | [Facebook](https://www.facebook.com/madextreme) | [Twitter](https://twitter.com/mad4extreme) | [gevharut@gmail.com](mailto:gevharut@gmail.com)
266267
* Aram Manukyan | [LinkedIn](https://www.linkedin.com/profile/view?id=AAkAABCehqwBm7aTR7IohpOidW1sVIHMo33U46o)

0 commit comments

Comments
 (0)