I'm new to Polymer and one of the things I like is that I can declare global CSS styling and Javascript libraries in the elements.html file. However, in the demos I have seen elements.html has been reserved exclusively for importing Polymer templates.
Is it bad style to overload elements.html with CSS and JS imports?
No, there is nothing wrong about including JS and CSS files in the elements.html.
Think of elements.html as a non-ui web-component.
There is just one important thing to remember:
Polymer team has created a tool called Vulcanize which takes a file like elements.html which imports all the custom elements, to knit them together into a single file for reducing the number http requests the browser makes to gather the required resources. Adding JS and CSS files here will get this tool confused and generated rather odd results.
So this is exactly why you don't see official examples and tutorials include JS and CSS files in the elements.html.
More about Vulcanize:
https://github.com/Polymer/vulcanize
https://www.polymer-project.org/0.5/articles/concatenating-web-components.html
Hope my writing is clear.
Related
I would like a JavaScript file which builds and minifies an HTML and CSS file and pulls them as strings, possibly, so that it can all be one minified JS file to be used.
I'm curious what's the best flow for achieving this. I see that with gulp inject, this may work?
Found a solution: gulp-js-text-inject did exactly what I needed here.
I am learning Angular and I need advice on best practice, and a general direction for digging deeper in the subject:
I am trying to create a web app with Angular which is composed of a number of standalone widgets, and I decided to implemented them each as independent custom directives.
I would like to make these custom directives as reusable, movable, replaceable and cohesive as possible, and put all of their related html/css/js files in their own dedicated folders, with a folder structure of something like this:
What is the best practice for loading a separate CSS file for the template partial of a custom directive? (For example, should I load the CSS from the partial.html which will eventually appear in the html body? Should I look into merging my css files with Grunt upon build?)
You should build all of your CSS into a single file you. Without merging you require an additional request to the server and processing of the CSS which adds more time before the page can be rendered.
For additional loading performance you can combine all of your HTML fragments into a single file as well that you load up front.
<script type="text/ng-template" id="temp2.html">
<div class="view">
</div>
</script>
I wish to keep views as modular as possible. In practice it means I have lots of small generalized HTML snippets, from which the actual HTML page is composed. Now ng-include and custom directives with templateUrl suit me quite well, but only in development, because each HTML snippet is being requested separately.
In production, however, I expect a single page app to be, ummm, in a single page, all bundled and minified — just like the JavaScript module loaders (RequireJS, Component, Browserify, DuoJS, etc.) would do to modular JavaScript files. No extra HTTP traffic for loading HTML chunks is acceptable.
Now I'm pretty sure AngularJS does not do bundling out-of-the-box (I would've found it by now), but maybe you guys have come up with something to address this issue?
P.S. It should be noted that I am not looking for cache-related solutions.
you can use grunt-angularjs-template
it does concatenates all templates in one file. as per its docs
Grunt build task to concatenate & register your AngularJS templates in
the $templateCache
if you are using gulp, the gulp equivalent of it is gulp-angular-templatecache
If you’re using gulp then a good option would be gulp-angular-embed-templates
I'm working on a large web project that involves many developers, and I would like to slim down a package of Bootstrap3 and keep only what we're using. Basically, the idea is to cut out any extra overhead when the page loads in the browser.
So there are 2 ways I can go about doing this:
I can either...
a.) remove any extra parts from the library, create a new build, and then load that into our project.
For example:
<!-- Custom build of a slimmed down Bootstrap -->
<script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Or...
b.) modularize the entire Bootstrap3, separate each component into its own file, and write the entire build into the html, while commenting out the things we don't need.
For example:
<!-- All Bootstrap components-->
<script src="/bootstrap/3.0.3/js/glyphicons_bootstrap.min.js"></script>
<script src="/bootstrap/3.0.3/js/buttongroups.min.js"></script>
<script src="/bootstrap/3.0.3/js/inputgroups_bootstrap.min.js"></script>
<!-- <script src="/bootstrap/3.0.3/js/navs_bootstrap.min.js"></script> DON'T NEED THIS -->
<script src="/bootstrap/3.0.3/js/navbars_bootstrap.min.js"></script>
<!-- <script src="/bootstrap/3.0.3/js/breadcrumbs_bootstrap.min.js"></script> DON'T NEED THIS -->
<script src="/bootstrap/3.0.3/js/pagination_bootstrap.min.js"></script>
etc...
The advantage of using the second option would be that it would give the other developers more control of the bootstrap components that we're loading into the project, without having to go and rebuild it again. If in any event in the future they need to load some new Bootstrap components, they can just uncomment that line of code. That would make this more flexible for other developers to use, and it wouldn't restrain them from developing further throughout the project using Bootstrap.
What are some thoughts about this however? Would pulling more files into the project (as opposed to pulling in one large file) increase the overhead at loading time? Is this against "good/best practice"?
If you go to the https://github.com/twbs/bootstrap/tree/master/js all the js is separated out in the js folder. The dist folder has the compiled files.
However, one file is less http requests and faster loading. The bootstrap.min.js file is small. Plus once it's cached by the browser you don't need to worry about loading.
Fewer files, faster loading because there are fewer http requests. And for that matter, you can use Bootstrap's CDN for their js and their respond.js.
It's the CSS that needs slimming down if you don't use certain components. I never use their navbar (two levels only), modal (no images, iframes etc), and other things, so I don't use those things. I use the buttons, grid, panels, and other stuff. I use LESS and CodeKit. Just // comment out the components you are not using and recompile. that's where you'll see the biggest gains in slimming it down.
In bootstrap.less if you do this:
//#import "bootstrap/popovers.less";
//#import "bootstrap/component-animations.less";
Then all the resulting CSS won't be part of the final bootstrap.css file
The first way is better to use in production,
the second is better when you develop your site
Below you can find a good list of minification tools for you, that help you to combine js files automatically.
Is there a good JavaScript minifier?
In the first place not loading what you don't use will always the best option. As mentioned by #cab in general reduce http(s) requests should give faster loading.
Bootstrap has a modular structure and the idea behind is you only have to load (or compile) what you need. Compiling your own copy of bootstrap will be relative easy. The result will be one javascript file and one css, both containing the components you need.
Bootstrap's customizer (http://getbootstrap.com/customize/) will be the easiest way to compile your own copy, you can select the component Javascript / CSS you will need, and download your copy.
Second option is to download the source from github and compile this. I use grunt mostly to do this Bootstrap refers to http://bower.io/ to do this. Before compiling comment out what you don't need. For CSS you can do this in less/bootstrap.less and for javascript in Gruntfile.js (around line 73).
So I'm trying to set up an environment where I can generate a new project and minimize the customization/complexity involved in setting up that new project. I'm using Structurer Pro (from nettuts+) to build the fileset, and this is an awesome thing. I've got github for MAC set up, allowing me to grab the latest Foundation framework files and put them in to the current project.
Now, I'm trying to incorporate LESS into the process also. However, Foundation's css files aren't currently set up with LESS, which means I have 2 options...(1) take a current version and LESS-ize them, then use those customized files to create new projects. (2) don't use LESS...
The other problem I have is, there seem to be quite a few compilers for LESS (simpLESS, CodeKit, LESS, compass), but none of them combine css files! So if I set up 10 LESS files (e.g. IE.less, mobile.less, grid.less, typography.less etc), and have the variables in them, I really don't want 10 css files as the output. I really want 1 compiled css file as the output. I know I can do this manually, or even through Clean css or any of the 30 other sites out there...
But is there one 'thing' out there that will let me use the latest files to create a project framework, customize it by applying a color swatch set to a series of variables (LESS), then compile & combine the resulting CSS for actual implementation?
Foundation ended up moving to SCSS in version 3, so this became kind of a moot point...
Trying to answer some of your questions:
Rename Foundation's .css files to .less and put in your /less/ directory.
Any .css file is a valid .less file (not vice versa though)
You don't have to convert this CSS to LESS, do so only for things you're going to be modifying, and save some time ;)
In your master.less file import these files with #import 'foundation-file';
re: how to combine css/less files :)
Compile only the master.less and include it in your HTML
master.less is your assumed MAIN stylesheet which may actually contain only #import statements, for me it's easier to manage everything this way (and where the combination happens). it will compile to master.css which you then use.
I'm not sure what css foundation includes, if it's a reset.css or something similar I would just leave it and not less-ize it. You would have two css files: one reset.css and one styles.css (the latter of which would be compiled from less files).
You could then add your own setup including a style.less which #imports the various components, if you make this generic enough you can reuse it throughout various projects.
The lessc compiler does handle the #imports of various files and combines them into one file: I have styles.less which #imports base.less components.less etc. I just compile the styles.less to styles.css and it handles the rest:
lessc styles.less styles.css
See: https://gist.github.com/1480684