I just came across Twitter Bootstrap today, on SO. I have skimmed through some online tutorials and if my understanding so far is correct, using the TB essentially consists of:
Downloading TB, extracting CSS files etc
Referencing the required CSS, JS files in your HTML doc and using the defined CSS patterns
I want to use Twitter Bootstrap with Symfony2. Given my understanding of how to use TB I thought it would be relatively easy to use it with Symfony, so I was quite suprised to see that there are (actually several) Bundles to use with Symfony.
So my questions are:
Why is a Bundle needed to use Twitter Bootstrap with Symfony2? - will the method I explained above not work (i.e. adding the references directly in a twig template)?
Since there are several Twitter Bootstrap Bundles available (at last count there are 3), which is the easiest to use (it has to be one that is actively supported with recent commits, and not a dead project)
I'm pretty sure these Bundles are great, but they have advantages and drawbacks. You could also use TB without a Bundle directly in your project. That's what I personally do, that way:
git clone TB in web/ (to get latest updates and keep updated)
I directly call bootstrap.less in my twig templates with Assetic and the less filter. That way, I can create my own .less files that #imports TB and use their astonishing mixins for example.
It's really powerful this way. Coupled with yui-compressor, when I use Assetic in no-debug mode, all my js and less files are compiled into one single .css output and one single .js output. And you could benefit from all TB functionalities, in .less, not .css
There are 2 major bundles that provides symfony integration with Twitter Bootstrap:
MopaBootstrapBundle
BcBootstrapBundle
In my opinion:
MopaBootstrapBundle is more complex, provides its own layout structure (of cause you can create your own too) and lot of defined functionality, extra assetic, forms and other integration
BcBootstrapBundle is more simple and much more clear you use your own layout structure and there is a lot of defined functionality, extra assetic, forms and other integration too
dont use any intergtaion bundle also is an option, but you loose integration with forms, assetic, less and so (as #Acyra mentioned in his comment)
I prefer to use BcBootstrapBundle with its extra integration functionality and use my own custom layout structure.
You can use Twitter Boostrap (TB) to only add css to your project. And then, you have a starting point to do something more visual than started from scratch. As you described in the first part.
But, you can also retrieve more interesting stuff from a Bundle which handle template integration with TB. For example:
having a default layout that set some basic column
integration for crud generation
having a basic form element
For example, with symfony 1.4 (I know this post talks about sf2), you have a plugin that can add a new theme to the admin generator to have a nice TB integration instead of the default. I know there is no official admin generator in sf2 but it can be used for CRUD.
One other thing that can be true since symfony 1.0, not all bundles are very well implemented, developped, maintained, tested, documented, etc .. (except thoses from the core team (FOS* Bundle, Doctrine, Propel, etc ..)). So I recommend you to test them all, see if one of them fit your need, otherwise take inspiration to improve them (they are almost all on github) or build your own.
And btw, there are many Bundle ..
UPDATE to Symfony and Bootstrap: Symfony always seems a little behind in the details of their documentation so here's an update on Symfony. Version 2.6 and greater now includes basic integration with Twitter Bootstrap.
http://symfony.com/blog/new-in-symfony-2-6-bootstrap-form-theme
Hopefully this saves someone time and can get it to work as they explain in the Symfony documentation above!
Related
Background:
I have a web app that references many CDN's in my HTML front end. Full disclosure, I am a novice dev at best so very likely that the answer is very simple.
At the time of writing (Oct 2020), I am using, among others, the following CDN:
<link href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-2.0.2.min.css">
Question:
Is there a more dynamic way to link this CDN so that I don't have to manually update the version number (2.0.2) if and when it changes?
If your question is:
How can I ask Bokeh itself for the matching CDN links that correspond to the current installed Python package version?
Then this is the simplest way:
In [1]: from bokeh.resources import CDN
In [2]: CDN.js_files
Out[2]:
['https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js',
'https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js',
'https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js']
Note that that just lists all possible resource URLs. If you aren't using widgets or tables then you don't need those files.
Also note:
The official URL changed to cdn.bokeh.org several years ago. The "pydata" links will continue to work, but everyone should prefer the bokeh.org ones in any new code.
There are not any separate CSS files any more in recent versions of Bokeh, on the JS files.
The above assumes you are using Bokeh from Python, where the Python and JS versions need to be matched. If you are using BokehJS directly (not super common, but it happens) then you should just pick whatever version you intend to use, and update it intentionally/manually, as others have suggested.
A very similar question has been asked before on this subject here
Getting the latest version from cdnjs
and it's generally not a good idea to adopt this practice.
Always using the latest version can expose you to bugs, unwanted behaviour. If the version you are using is stable, then its probably best to stick to it.
Sorry if this is a generic question, but I have been given a task to develop a web application, and I'd like to use this opportunity to dive into and learn about Polymer (and maybe Vaadin components?).
I'd like to avoid reinventing the wheel. But I'm a newbie regarding Polymer. So, given the following task, is there any approach and component that will make the developing quicker/smarter?
Create an application which will allow at least two users to log in simultaneously and manage items in categories. The categories should be in a hierarchy of potentially infinite depth. The items only require a label.
The users should be able to perform standard CRUD, plus if one user makes a change, the other user(s) should see the change (if appropriate) without manually refreshing their web browser.
How should I approach this with Polymer?
Has anyone done anything similar?
I'm also open to Vaadin components if it helps.
Any help or guideline?
🙏
One way would be to start from an application template like polymer3-webpack-starter or pwa-starter-kit.
If you are looking to use Vaadin components like vaadin-grid, use polymer3-webpack-starter or one of the starters from the vaadin.com/start page.
If you do not need an example specifically with Vaadin components, then pwa-starter-kit would be a good starting point. Though it assumes familiarity with redux.
Pro: You can quickly get a running application that you can modify to your needs, and you do not have to set a project from scratch (build tool chain, module bundler, tests, configuration, etc - all of that is done already).
Con: Making modifications to the project setup won't be necessarily easy because at that point you will have to dive into the project setup that somebody has done for you.
I'm creating an application that is going to work on two separate versions of the same software. These frameworks will have completely different modules with a shared dependency to a JavaScript framework I've built.
Let's say
dave/version1
dave/version2
Which both share the dependency via a require of
dave/framework
I want to maintain this framework (dave/framework) in one repository that both of the parent modules can require. However the location that these framework files need to be placed are slightly different between the two modules, along with slightly different requirements for the composer.json files to ensure everything gets moved around correctly (the two versions of these software implement composer rather differently).
With my limited knowledge of composer and Git I've formulated a couple of solutions:
Create three repositories, two wrapper repositories with specific composer.json files to support each different version of the software. With another dependency to a third repository which contains the actual framework. I'm unsure if this would ever work outside of a theory. Also ends up being a little messy.
Use some form of clever tagging and have version1 and version2 depend on separate versions of the framework which would in turn have slightly different makeup. Composer would then struggle with pulling the latest version of the module as we'd be running two ever so slightly different code bases in weird versions.
However both of these seem potentially messy and the incorrect way of structuring what I'm trying to achieve.
Is there a nice way to achieve this? or am I better of maintaining two separate repositories for the framework?
With some correct planning, your first option is going to be easier than you think.
Git has a system called Submodules built right in.
Version1 and Version2 repos would include the Frameworks repo within them. Then when you update Framework, you can pull those updates no problem in Version1/2. You control when and how to, so you can make sure you don't introduce a bug down the road either.
Here is some documentation for submodules: https://git-scm.com/book/en/v2/Git-Tools-Submodules
https://git-scm.com/docs/git-submodule
I'm working with two students to produce a few HTML pages (a homepage and two secondary page layouts) that will later be implemented into a larger CMS.
I'd like to be able to abstract the shared HTML (head metadata, primary navigation, footer, etc.) into separate files so we only have to update them in a single place, execute a shell command to generate new, complete output. Since these pages are only ever going to become templates for another team, I don't even need to integrate any external data sources.
I know Jade would work for this but our partials/layouts/whatever need to look like HTML. I keep coming back to precompiling Handlebars templates but I'm not having much luck getting them to work.
Since we're using Foundation 5, Ruby and Node are already part of our toolchain. Suggestions?
I really like Middleman for this kind of thing. Layouts and partials and local data, etc. Wonderfully useful for doing front-end prototyping for what will eventually become a Rails application.
I am a front-end guy using Windows for design and html/js/css coding. My work is separate from the back-end guy using .NET. I am also new to Haml/Sass thing as well as Ruby. And definitely not using Rails. After few search, I decided to pick Sublime Text 2 for Sass/Haml support and get rid of my old Notepad++. My first question is:
1. What is the best practice / efficiency to automatically convert whole folder of Haml (primary) and/or Sass to static documents (html/css)?
I have a separate solution for Sass by setting the "watch". I was searching for Haml automatic conversion solution and found few options:
Library for making static websites with HAML/SASS/CSS framework
2. Should I use StaticMatic?
Google search said it is the best. But there seems no update for 2 years
https://github.com/staticmatic/staticmatic
There is also this site (Is it the same?): http://staticmatic.rubyforge.org/how_to_use.html
If I use StaticMatic, I can setup a build system in Sublime Text to run from the Build Menu (http://docs.sublimetext.info/en/latest/file_processing/build_systems.html)
3. OR should I go with all-in-one solution like this (may cost few bucks)? Is there free one?
http://fireapp.handlino.com/
I don't mind to have Sass -watch running separately and another polling mechanism for Haml. I just want to make sure I have the "latest" out there.
Hope to get some advise for my unique situation. Thanks.
The answer is Middleman
http://middlemanapp.com/
It's the replacement for out-dated StaticMatic
HAML:
For automatic conversion from haml to sass you can use this gist: https://gist.github.com/3898955. If you want to automate even more the workflow process, you can use https://github.com/alexnj/SublimeOnSaveBuild sublime package to run the command on file save.
SASS:
For SASS here is the needed setup. https://gist.github.com/3899112.
For automatic conversion on save, the same rules are applied here too, but it's important to include the .sass and .haml extension in SublimeOnSaveBuild.sublime-settings file.
So your file should look like this:
{
"filename_filter": "\\.(css|js|sass|less|scss|jade|haml)$",
"build_on_save": 1
}
You can extend this list at your own wish.