How to organize the Theme Directory

Navigation
1

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

I got the theme METRONIC , the theme directory has a folder where all css and js files are called " 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 -->

JS Example: 

<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 everyone is in the same folder. Should I put each css file in CONTENT and JS folder in SCRIPTS ?

Or can I just put the folder ASSENT inside content and point everything to it?

NOTE: Doubt is basic but did not want to start the project wrongly

    
asked by anonymous 03.08.2017 / 20:46

1 answer

1

The location of your scripts / styles is quite personal, you can put these files in the Script / Content folder or in some folder reserved for frameworks and blibiotecas .

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

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

In other words, I generally organize the libraries I use in ~/lib/{nome_da_blibioteca}/{arquivos_da_blibioteca}/... , already the folder Content and Scrypt , I would only reserve for scripts and styles of my authorship. p>

Another point, try to use some tool for minificar and unificar your scripts and styles , you can start using Microsoft Optimization Framework because it is simpler, to learn more see the following guide: Bundling and Minification .

In my case, I use Gulp for minificar , unificar and transpilar (in case you use TypeScript and SCSS ).

    
03.08.2017 / 21:20
Add Favicon to my website URL is with Location as open in Webview Android