I am using Django Bootstrap toolkit, and I am wondering where the CSS and JS files are stored so I can edit them.
Take a look at the example project and templatetags:
BOOTSTRAP_BASE_URL = 'http://twitter.github.com/bootstrap/assets/'
BOOTSTRAP_CSS_BASE_URL = BOOTSTRAP_BASE_URL + 'css/'
BOOTSTRAP_CSS_URL = BOOTSTRAP_CSS_BASE_URL + 'bootstrap.css'
BOOTSTRAP_JS_BASE_URL = BOOTSTRAP_BASE_URL + 'js/'
So you can define your own version of the files but per default django-bootstrap-toolkit embeds the files directly from the Github repository.
However, in most cases it is better to leave the original files alone and overwrite the necessary declarations in your own stylesheets. Check this answer to see how to do this.
Related
I recently installed the Djaneiro package in my installation of Sublime Text 3 to offer me auto completion for Django Templates. It's really helped speed up my django development, however now overrides my basic HTML projects and AngularJS projects to HTML(Django).
I'd like Sublime to default HTML format on static HTML projects, HTML Angular on projects that are specifically Angular, and HTML(Django) for other projects.
Although not a huge problem, it becomes a nuisance when I'm expecting HTML auto completion and the angular ng tags auto complete, or Django auto complete on standard HTML files.
Is there a way to default which HTML File type required for Sublinting I require by project?
By default ember-cli seems to be set up not to compile css files into one (as it does with the JS files).
What is the best way to configure ember-cli to merge all files in app/styles (and subdirectories) into one app.css file (and then fingerprint etc)? Is this possible via the Brocfile or do I need to override EmberApp.styles()?
Update: As far as I can see there are the following (not very elegant) options:
1) Using SASS and #import the CSS files into app.scss individually. The downside of this is that I need to use an extra plugin (SASS) and that SASS does not seem to allow for globbing patterns in #import (e.g. #import('**/*.scss')), which makes this solution cumbersome for big projects.
2) Overriding EmberApp.styles() such that it does not copy the CSS files (this is currently being done by a wrapper around broccoli-static-compiler) and configuring Broccoli such that it concatenates the css files into app.css. This solution seems a bit hacky though and there is a risk of incompatibility with newer versions of ember-cli.
3) Workaround: Use broccoli-funnel and broccoli-concat to do the concatenation yourself.
In Brocfile.js:
var appTree = app.toTree()
var concatenated = concat(appTree, {
inputFiles: [
'**/*.css'
],
outputFile: '/assets/app.css',
});
module.exports = mergeTrees([appTree, concatenated], { overwrite: true });
This will create a new app.css with all our concatenated CSS in /assets/app.css.However, this file not fingerprinted. Our assets directory now looks something like this:
/assets/app.css
/assets/app-<fingerprint>.css
So a - admittedly hacky - second step is to 1) get the filename of the fingerprinted app-<fingerprint>.css, 2) delete app-<fingerprint>.css and 3) rename app.css to app-<fingerprint>.css. This last step can be automated using Grunt or gulp.
Personally, I think SCSS would be the way to go. It is the simplest solution and there are other advantages to using SCSS besides importing things into one file (variables for repeated patterns, for example).
In addition, manually adding files allows the developer to configure exactly where each piece of code is included. I don't see that as a con, but I can understand the other point of view and I've definitely spent 5m trying to figure out why my styles weren't being applied until I realized it was because I didn't include a new style file.
Edit: There are some node-sass globbing solutions available that could probably be added if that is a big show stopper.
The Ember CLI guide describes how assets can be referenced in the templates and the CSS - but what is the proper way of referencing an asset (say an image) from my javascript code?
Specifically I am concerned about the asset path getting fingerprinted correctly when building assets for production. It seems like ember-cli is using broccoli-asset-rev for this, but according to its documentation, only <script> tags in the HTML and url() in CSS will be fingerprinted. Is there any way (probably through another broccoli plugin) to get asset paths in the .js files fingerprinted, too?
I placed an image called car.jpeg under public/assets/images and then was able to reference it in my application.js route file as assets/images/car.jpeg
Works great
UPDATE
One picture is worth a thousand words... :)
I found the issue. This works out of the box as expected - it turned out that my asset (image) was not in the right location, so occurrences of it's path in the JS files never got replaced with the fingerprinted version.
I am trying to make sprokets compile a single standalone js asset, so it will uglify and minify it and be part of the entire rails projects.
I need that this js to have a non-digest name, so it's will not change (i.e. embedded in other websites, etc)
I can't seem to force rails (4) /sprockets to do my bidding.
What I tried:
Adding the asset (script.js) in a misc folder unders assets/javascripts and not load it in the sprockets javascript manifest. While this keeps it in the project, it doesn't get uglified and minified, and doesn't get automatically loaded via asset-sync.
Tried adding another manifest called scripts-manifest.js to //= require script.js asset, to add its path in the precompile path in application.rb, but the problem is that rails 4 adds digest to all assets no matter what (doesn't work like that in rails 3)
Tried using https://github.com/alexspeller/non-stupid-digest-assets to add a non digest version of the asset. I may have done it incorrectly, as it doesn't work or do anything..
I add the initializer NonStupidDigestAssets.whitelist = ["script.js"] and tried putting it in app/assets/javascripts/misc and in public/ but it still won't work/
I have read that this gem should help in most cases, and I am sure I am doing something wrong with either path definition or no including it somewhere
One way to do this is to add an initializer that generates the compiled versions directly.
Add your js file to a subfolder in /app/assets/javascripts. Don't include this in application.js so it isn't added to the compiled assets.
Create an initializer in /config/initializers that uses uglify directly
output_file = "#{Rails.root}/public/public_script.js"
input_file = "#{Rails.root}/app/assets/javascripts/non_digest/public_script.js"
uglified = Uglifier.compile(File.read(input_file))
File.open(output_file, 'w') {|f| f.write(uglified) }
Include the public js file (in this example: /public/public_script.js) in your application layout
This way you have direct access to make custom changes to how uglify handles your js and the location of the file never changes for your external services accessing them.
I did all this locally and tested that it worked using the beta version of Rails 4.2
Just wanted to add my own solution based off Ken's answer.
I created non_digest.rb in config/initializers:
Dir["#{Rails.root}/app/assets/javascripts/non_digest/*"].each do |asset|
asset_name = File.basename(asset)
asset_output = "#{Rails.root}/public/external/#{asset_name}"
asset_uglified = Uglifier.compile(File.read(asset))
File.open(asset_output, 'w') {|a| a.write(asset_uglified) }
end
Don't forget to stub the file in javascripts/application.js. as we probably don't want it compiled with the rest of our JS and we can continue to use //= require_tree .:
//= stub non_digest/external_bookmarklet
the way you would do this with rails 4 is the following:
add it to the precompile list config.assets.precompile += %w(your_file_name.js)
make sure it's not referenced in application.js (directly or via require_tree)
symlink the digested file on deployment
read the manifest.yml to get the actual filename
ln -s digested-filename.js actual-filename.js
since rails 4, generation of non-digested assets has been removed (for good reasons) and this is a simple and straight forward way to implement the desired behavior.
we are planing to create a CMS with zf2 and doctrine orm .
actually we are concern about our cms templating
we want our system works with several templates and easily change between themes via admin
and creating a new templates should be easy for end-users developers
we want an advice or suggest for how to build templating system that :
there is a core module and there a lot sub modules with their own phtml
so where to store theme1 phtml and where to store theme2 phtmls ...
any suggest or advice please
thanks
I encourage you to take a look at Twig, its the best template engine I have seen so far :) It does take some time to learn Twig syntax, but its well worthy if you look at what you get :)
I cant yet write comments, so I wrote this as an answare.
Hope this helps. Trust me, the Twig is the way to go. Joust look at his documentation for more specific details how to use it!
EDIT:
The problem you are trying to solve has nothing to do with template engine. You can do that with any template engine. You can do it even with plain PHP if you want.
I built web application where users can register, get their own sub domain, and there they can build their webpage. Change theme, edit text, add pages. Simple CMS functionality.
The easiest way to do this is to have themes folder, where you would store themes, like this:
themes/
- themeBlue
- css/
- images/
- js/
- html or views/
- themeRose
...
Now this is where you would place all your themes, every theme has its own folder with images, css, js files...
And then you would have users, and every user would be able to choose and change theme.
That information would be stored in database. You need to store that user Jack is using themeBlue. You can do that as you want. You can event put this in users table like user_theme column.
Now when someone visits site, you first query database to see what theme is that user or creator of web using. And then you load all that files from current theme folder. And populate html files with data stored in database like in any other CMS.
This is the simplest implementation. You could for example, store css and html files in database :)
Hope this answers your question.
Good luck with that, I almost gone mad building my system :) I ended up with writing my own PHP MVC Framework joust to accomplish what I wanted.
if you activate another module in the application.config.php which has the same views and layouts (same folder structure and filenames) it's viewscripts and layouts will automatically be used when it's loaded after your core module.
so you could simply make your application.config.php dynamic to load the active template module which only contains the view folder. this would be a simple and effective solution without any other libraries.
additionally you can use an asset manager like assetic to also provide images, css etc. inside of your (template-)modules. (have a look at zf2-assetic-module, I wrote my own assetize-module based on assetic to fit my needs...)
Sina,
I do this in my Application->Module.php onBootstrap
$ss = $serviceManager->get('application_settings_service');
$settings = $ss->loadSettings();
$serviceManager->get('translator');
$templatePathResolver = $serviceManager->get('Zend\View\Resolver\TemplatePathStack');
$templatePathResolver->setPaths(array(__DIR__ . '/view/'.$settings['theme'])); // here is your skin name
$viewModel = $application->getMvcEvent()->getViewModel();
$viewModel->themeurl = 'theme/'.$settings['theme'].'/';
In this situation I have this structure in my view folder
view/
default/
application/
error/
layout/
zfcuser/
red/
application/
error/
layout/
zfcuser/
The $viewmodel above injects a variable into the layout for the themeurl in the public_html folder /theme/red/ with all assets for red
Access in layout.phtml -> themeurl;?> in a viewscript layout()->themeurl;?>
I am still working out my Dynamic Views. Right now I have a BaseController and all my ActionControllers extend it. It has a render() function that builds the required views but not sure its going to be scalable hoping to try some placeholder ideas.
application_settings_service is a Settings Service that gets settings for whatever domain was used to call the system and builds an array accessible via any service aware part of the site. Thats a whole different post and it may or may not rub MVC peeps the wrong way
I know your question is marked answered just thought I would share
Eric