I'm a newbie who's trying to build a meteor app, and I was looking to cut some time by using a commercial theme. Let's take this as an example:
http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?WT.ac=category_item&WT.seg_1=category_item&WT.z_author=keenthemes
I have two options:
1) Use the html to create meteor templates, using spacebars tags, etc.
But how would I implement the theme javascript? doesnt it comes in conflict with meteor?
2) Use angular.js, as the theme is provided in angular.js format other than plain html. But wouldnt this create conflicts? is this a better approach?
In general, what is the easiest and best way to use commercial themes with meteor?
I bought similar themes on wrapbootstrap. I think it is the same problem here. (for Angular theme I do not know, as it would be trickier I think to integrate it with bootstrap)
Generally with such themes, you have a lot of 3rd-part JS libraries. You have to get them.
First option, you find a similar packages on atmosphere and you can add it. (A lot of jQuery library are simply wrapped as packages).
Second option, there is no such package (you can make and add them, and it would help the community :)). You can import them on the page you need with a package like wait-on-lib
You can import the libraries where you need them only. But I think the first option is cleaner.
And you will probably have some custom.js for each different page you have in your template, you have to transfer this logic when you render a template. For example the custom.js for the index file in your template will be transformed in :
A template name index where you can put the HTML and
Template.index.rendered = function(){
/* your custom js */
}
For the CSS you can simply copy past the files in client/css (for example) the files will be loaded.
I do not know if I have been very clear, but I managed to integrate such themes in meteor project. And do not forget to remove unnecessary files, for example when you add the bootstrap package, you can remove the bootstrap css and js files integreted to your template.
P.S : You may have to search/remplace path in the css and js files from the templates to load some images for example. Put all such files (as images) in your public folder, where you want, but do not forget to rewrite the path in your css and js files.
For example if you bougth a template where they have folder like :
folder_css
folder_image
...
the path are written this way :
/* css files */
background-image: url(../folder_image/myimage.png);
But in a meteor project, all files in public folder are at the root of the project, so you can rewrite your path, with for example something like this :
/* css files */
background-image: url(img/myimage.png);
Rewrite path in JS files also and I think it should work.
Related
I have been working with angular for the last few weeks, and now I have a requirement to dynamically style a public site. The site admin set various color codes as well as a logo image from admin in a database. These will be reflected when the Public Site opens.
As I am from an asp.net background, previously what I would do is on master page load, take values from the DB and write them into a .less file, and let java-script library take care of it. It's simple there.
But for my current situation, I am using sass, and I am not able find a way to write variables into a .scss file.
I just learn a new thing APP_INITIALIZER from here ,but ultimately this post not showing how to write in the .scss file.
I am actually thinking this with my asp.net knowledge,but may be I am wrong ,or there are another way of implementation.
I want a simple solution ,what we do in asp.net I want to achieve this in same way.
Take variable value from DB via api,when application loading for first time.
Write values in SASS variable file .
After that SASS will take care of this and we get result as expected .
Please give some suggestion or example ,to start with .
Thanks.
As other answers explained, it is not possible to set SASS variables and process that on the client, as SASS is converted to plain CSS at build time and when app is running or in APP_INITIALIZER browser can process only CSS.
I see two options to achieve what you want.
Generally, you would have some base css for the app, and then you need to load the additional css based on admin settings. What needs to be considered from css point of view is that all css specificity in additional css should be greater than base css, because otherwise it won't override the base. That requires basic css knowledge so I won't go into details.
Method 1
Generate your additional css on server request. Load it when app is started from server URL. Reload it by js when admin change any settings.
Define backend endpoint at address /additional.css (or it could be similar to /api/theme/custom-css) which will generate css out of database. For example you have background=red in db, then the endpoint should return
body {background-color: red;}
Add <link id="additionalCss" rel="stylesheet" type="text/css" href="additional.css" /> in <head> of index.html. And that will be enough to make it work.
To reload you can use different methods, but I believe this should work
document.getElementById('additionalCss').href = document.getElementById('additionalCss').href;
This will make new request to the server, server will execute DB -> css and return the updated css, which will be applied to the browser.
And if you want to be cool (or need to support big and complex themes) scss can be used. Backend should generate scss variable definitions out of database, then should use some server-side app to compile scss -> css, and then serve compiled css back to the client. But this will be overkill if additional css is simple enough.
One important consideration of this method is browser caching, because content behind additional.css is dynamic, but browser may cache it, not call the backend and serve outdated version.
Method 2
If you don't want or can't mess with the backend. Load settings from DB by some API endpoint in json, then generate css code on the client and apply it.
Use HttpClient to get settings JSON and generate css as string out of it. For example server returns
{
"background": "red"
}
then you convert this to string as
cssCode = 'body {background-color: red}';
Use
let additionalCssStyle = document.getElementById('additionalCss');
if (! additionalCssStyle) {
additionalCssStyle = document.createElement("style");
additionalCssStyle.id = 'additionalCss';
document.head.appendChild(additionalCssStyle);
}
additionalCssStyle.innerText = cssCode;
To reload - save changed to backend, then repeat 1. and 2.
While #Cold Cerberus has suggested a good approach and is right about maintaining style related things at front-end, i am suggesting some ways for this.
As you said you want various colour combination,you can use Conditional CSS of SASS.
body[theme="theme1"] {
// theme 1 css
}
body[them="theme2"] {
// theme 2 css
}
You can use sass theme map along with conditional css.
Just update your attribute and theme will be applied automatically.
themeChange() {
const dom = document.querySelector('body');
dom.theme = theme1; // change theme here
}
If you are very particular about some element style which should be updated from back-end (like colour code) you can use ng-style along with theme approach.
<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
You have to use smart combination of above in order to fulfill your requirement.
First of all, in ASP .NET, it might be not bad to have a db hold CSS rules and other static assets. This is because it is a Server Side Rendering framework, so it kinda makes sense.
On the other hand, in Angular, it is client side (with the exception of Angular Universal, but you'll still have to expect working in similar approaches). Even with translations (i18n or custom), in Angular world, it is most likely stored on the front end (i18n .json files) and not from the back (db or so).
So you'll have to go and have your theme's stored in a certain manner you prefer and make your way to switching between them dynamically with Angular. You can of course store the keys/variables for the styles/themes but your actual CSS code is still stored on .css files.
Try to see this simple example from CSS vars in use while dynamically setting app theme (Angular). This is only just one way and there are lots of ways to do this and you might have to look for your personal preference.
UPDATE:
There might be erroneous implications of my answer above, but I'll leave it as is and just share one experience I had that is related to this topic.
I have worked on a webapp where the user can customize his theme via settings, likewise, The CSS rules aren't stored on DB, but the color values to be set on sass variables are. There was a special script where CSS scripts will be compiled (was returned on demand which made it a bit slow but a splash screen just saves your day, not AOT compiled) along with the custom values, which I don't have any idea how it was done. The same with translations, I also recently worked on a project where translations are from db, but there's a script to run for every release/deployment that generates and updates the .json files in the assets/i18n folder.
I don't think that what you want will be possible to do... Angular processes the SASS files during application build and writes all the common results into a plain old css file. The component-specific stuff will get generated as javascript that, in turn, will apply your styling at run time.
Hence all the SASS variables you need to set up have to be present at compile time.
What you can do, though, is to pre-define your setup in Angular components and then toggle it based on an input (from your DB or wherever else), like so:
// your.component.ts
#Component({
// ... component stuff
styles: ['h1.option1 {color: red;}', 'h1.option2 {color: blue;}'],
template: `
<h1 *ngIf="optionSelection$ | async as option; else noOption"
[class.option1]="option == 1"
[class.option2]="option == 2">
Hey there, I'm styled!
</h1>
<ng-template #noOption>
<h1>No option received</h1>
</ng-template>
`
})
export class YourComponent {
optionSelection$: Observable<number>;
constructor(yourService: YourService){
this.optionSelection$ = yourService.getYourOption().pipe(startWith(null));
}
}
Hope this helps a little :-)
Since sass is a pre compiled css. we cannot dynamically change the theme without generating a seperate theme.css. This is where JSS comes to play. JSS is a javascript based style inject mechanism, where css are directly injected into the files you are using it.
react-angular-material uses it extensively, where we can pass color variables dynamically to change theme of the application.
for instance this guy has made it with angular.
Docs:
jss-angular,
jss
links: jss-with-angular
It is not possible in that way but rather than using the sass variable, you use the value of the sass variable. It may be any value.
Why? because sass is compiled during packaging and in the end, it would still generate plane CSS.
An example of a framework making use of this optional style processor is angular.
In your case I would recommend looking into dynamic themeing within angular as what you require definitely needs JavaScript. Look into the guide on medium given by one of the contributors.
https://stackoverflow.com/a/54559350/3070499
I want to make a web based application that can have plugins/apps 'installed' to it. What i mean by Apps is say a weather app which has its own CSS and JS files in a container with a specific ID like id="Weather-app".
The Problems: (Assuming everything is on the same server)
Having Duplicate IDs, Class'
Conflicting script and style sheets
how to actually check a folder named 'Plugins', Find a file named Weather-app and then load the contents of 'Weather-app' into the main Application.
I have looked around on Google and haven't managed to find any information on how you would go about this. Hopefully someone on here will know. I would like to use JavaScript & JQuery if possible. I dont know if there is already a source out there for this purpose but if there is a link would be great!
1 - Avoid the use of IDs for generics, always use classes instead.
2 - Prefix the classes on HTML generated by plugins you are creating with some name space. i.e.: js-plugin-foobar-nameOfClass
You can avoid having the user add a ".js" and a ".css" file for each pluggin. You can generate css classes with javascript. That way you will only have to import one file for each pluggin: How to dynamically create CSS class in JavaScript and apply?
Take a look at the jQuery widget factory, you can build your plugins to use it, and that should facilitate your life. They also have some coding guidelines: http://jqueryui.com/widget/
I have a background in coding in languages that have a concept of "classes". Now that I am coding JavaScript, I would like to code in a similar way so that each object oriented "class" I create is its own separate file.
see Accessing "Public" methods from "Private" methods in javascript class
see http://phrogz.net/JS/classes/OOPinJS.html
In other languages, I would create import statements at the top of the class file to ensure other custom classes that were used within a class file so that the other custom classes were compiled into the final binary.
Of course JavaScript is not a compiled language; however, I would still like to be able to be include some kind of "import" statement at the top of custom class files so I could ensure the imported JS "class" file was available for the user's browser to download.
It would be ideal if there were a 3rd party tool that combined all of my separate class files into one JS file so the browser only had to make one HTTP request for a single JS file instead of many calls for each indicidual JS "class". Does anyone know if such a tool exists where it would do the following:
allowed me to choose which JS files that I wanted to include in a single JS file
crawled thru the files I selected in step 1 and found all the "import" statements at the top of each custom "class" file. These "import" statements could simply be specially formatted comments in the code that the 3rd party recognizes as import statements.
The 3rd party would then create the single JS file with all of the files that were selected from step 1 and from all of the imported files that were found in step 2.
Some popular JavaScript frameworks seem to do just that. For example, jQueryUI allows you to customize the download of a single jQueryUI source file by allowing the user to check off which objects you want to use. If you uncheck an element that is needed for an item that you checked off, then the form tells you that there is a dependency you need to rectify before being able to proceed to download the file.
see http://jqueryui.com/download/
So is there a 3rd party tool that allows a developer to use some kind of "import" statement comment to ensure that many dependent JS files (and only the ones that the developer needs) to be combined into a single JS file?
RequireJS was built for exactly this purpose.
Have a look at Require.js. It lets you import various javascript files in a modularized fashion and add the required dependencies between them. Also at the end you can minify them all into one single JS file using r.js
A trivial batch file can do this for you:
#for %i in (classes/*.js) type %i >> build.js
This works best if your JS source files are all in one folder, and this example assumes that folder is named classes. It gets a bit more complicated if you have subfolders, but a similar principle can be applied.
Have a look at GruntJS, JQuery uses it for building. If you don't care for HTTP requests, you can use already mentioned RequireJS, which also has nice async methods to load files, which can improve perfomance in some situations.
Check out this class https://www.youtube.com/watch?v=KnQfGXrRoPM
This allows for importing on the fly within classes. also it allows
for importing all classes within an folder and all of its sub folders.
and its really simple because it is just a prototype function added to String.
just by adding the importer class you will call in classes like "com.project.Classfile.js".import();
or "com.project.*".import() to get all sub-classes.
fork on - https://github.com/jleelove/Utils
I am using the jQuery UI framework, but I'd like to modify the slider control to suit my needs. I only want to make changes in that one file. What is the best way to include those changes in my project? Currently I have it all wrapped up in jquery-ui-1.8.8.custom.min.js.
Options include:
Edit the minified source directly. Seems like a huge pain.
Download all the source files, put them in my /js directory, and add <script> tags for each one. Ugh.
Try to make the changes from outside the framework, using my own script. I'm not sure this would work.
Somehow use the one file I modify + the rest of the framework in the single minified file?
Download the entire framework, modify the file I want, then compress it into a single file. (But is then debugging/testing will require <script> tags for all the source files, right?) (How do I minify the code?)
If I were to be including <script> tags for every source file, could I only use the ones I'm interested in, and their explicitly stated dependencies? Or is this asking for trouble? (Update: Looks like this works.)
Other ideas? Is (4) possible? What is the best approach here?
Update: I see that the minified file is of the form:
/***
* UI Slider
*/
minifiedCode();
/***
* UI Autocomplete
*/
minifiedCode();
/***
* UI Spinner
*/
minifiedCode();
What if I comment out the Slider code, then include my own non-minified, altered Slider file? Can minified and non-minified code work together?
Depending on the changes - if you are overriding a method, you can put it in a separate js file and load that file after you load jQuery - it will override the method functionality.
when i download some new plugins eg. jquery plugins i put them in js folder. and the same for css and img.
so all my different applications share them. but where do i put my js/img and css for specific application/website? every website?
and where should i put my ajaxcall-files.php?
EDIT: some guides that could give me a clean and neat file structure?
I normally keep a file structure for javascripts as follows:
- js
- jQuery
- flot
- chilli
- processing
- closure
- typical_library
- js
- css
- img
By keeping separate folders for each library/plugin (including the relevant css and images if it need be), the pain of maintenance during upgrades is less. There is one more advantage, predictable folder structures can help with autodiscovery of JavaScript base directories.
For ajaxcall files (since I mostly use an MVC pattern), I keep them in the controller files. (I mostly use CodeIgniter). Some people would keep them in views, however if the ajaxcall.php involve any business logic is best to stick them in the controller files.
In general minimize anything outside of folders.
It's entirely up to you. But what I do is put common resource files that get used by lots of pages in central locations, e.g. /js is where the javascript libraries go. My arrows go in /arrows.
But if a given resource is specific to only one page, e.g. foo_pic.png is only ever used by foo.php, then I keep the files together and name them so they list together alphabetically.
So, as you see, I don't prefer structuring only according to file type. But that's just me.
Outside of the DocumentRoot, I put my php include files under one directory and they are all suffixed .inc.php. HTML templates are organized under another dir.