How to organize the Theme Directory

Question

I have a question about how to split the files CSS and Javascript in my project directory ASP.NET

I got the theme METRONIC, the theme directory has a folder where all the files are css and js call for "Assets".

Css example:

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
<link href="../assets/global/plugins/gritter/css/jquery.gritter.css" rel="stylesheet" type="text/css"/>
<link href="../assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css"/>
<link href="../assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
<link href="../assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE LEVEL PLUGIN STYLES -->

Example JS:

<script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="../assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>

So how should I separate them? because they are all in the same folder. I should put each file css in the briefcase CONTENT and the JS in the briefcase SCRIPTS?

Or I could just put the briefcase ASSENT within the content and point out everything to her?

NOTE: the doubt is basic but I didn’t want to start the project the wrong way

Answer 1

The location of your scripts/styles is something very personal, you can put these files in the folder Script/Content or in a folder reserved for frameworks and blibiotecas third-party.

I would particularly put the folder assets inside ~/lib/metronic/assets/..., as I would with other blibiotecas and frameworks, such as Bootstrap, jQuery, etc... as in the example below.:

• bootstrap -> ~/lib/bootstrap-sass/assets/...
• jQuery -> ~/lib/jquery/src/...

That is, in general, I organize the blibiotecas I use in ~/lib/{nome_da_blibioteca}/{arquivos_da_blibioteca}/..., already to the folder Content and Scrypt, I would reserve just for the scripts and styles of my own making.

Another point, try to use some tool to minificar and unificar your scripts and styles, you can start using the Microsoft Optimization Framework for being simpler, to know more see the following Guide.: Bundling and Minification.

In my case, I use the Gulp for minificar, unificar and transpilar (if using the TypeScript and SCSS).