Hi i have already created my asp.net app and its running perfectly except we recruited a new member and he started on this new app and he is using bootstrap animations and templates and all... while i didnt i used css myself cause i tried to personolise it just like they want any way now my boss was amazed with what bootstrap can do an all and now i want to add transitions and cool css,ajax stuff to my app any links or methods to help please im BURNING INSIDE.
please help
In case you need to update your project to use boostrap, then you need to move all the styles you added to a stylesheet file, and call them as needed (that is separate from bootstrap, just to make it more easy when you need to change styles). Besides that, if you want to use Bootstrap, it's simple, just add the boostrap files (styles, JS) and then use them as explained in the Boostrap website. Also, you can customize them as you want, but those components and classes will make the magic to make your website compatible with cross browsing and devices.
http://getbootstrap.com/getting-started/
Hope that helps!
Related
I'm confused with some css templates in bootstrap.
I've been a developer for years already but I never worked in a company that let me create an entire website as front-end developer say for example an e-commerce site.
So if someone would say "do an e-commerce site", do I have to ask them for a ready made css template? If so, then is it possible there are already other sites that bought it, other than me, e.g. we may have the same web face?
I am not really an expert in css nor an artist. I have created a website for personal use but it was pure bootstrap. I can see other templates in bootstrap; they have other components manipulated, like a different menu which is not present in their list of components.
How did they do that? Is it another individual css, js, html component? Do I have to create my own component sometimes?
For you to understand me, I can create relatively easily any site written in either React or Angular but I cannot create my own css design.
The examples and templates that you see in Bootstrap uses the Bootstrap framework, but the CSS and JS design components are changed to better define what the user wants it to be like.
For example
form-group-lg select.form-control{height:46px;line-height:46px}
This is the pre-defined CSS value from Bootstrap CDN, changing this CSS value to something else, changes your design, but you still are based on Boostrap. Basically, Bootstrap is not only about design, it's following a library, a framework, a skeleton to make your web development (specially frontend) easier.
I have already built a site using CSS. Now looking back I regret not taking the chance of using Bootstrap. My website is already built and styled. My questions is, is it possible to use bootstrap even though you already have styled you website without having to remove all the CSS?
Bootstrap uses a set of pre-configured classes to implement it's styling rules..
So unless you somehow incorporated the same class names in your site and intended the same styling as was intended by the Bootstrap developers, you are going to have to make the necessary changes on your own.
That said, if your project is intended to be extended in the future, it may still be a good idea do re-work what you did up until now with Bootstrap, in order to save time in the future (I am assuming that the project is not very large in scope).
There are few things you need to know:
Bootstrap uses box-sizing: content-box so if you are not, it will probably impact all your padding/border stuff.
Bootstrap comes with a reset and few helpers with generic names that can interfere with your own style.
That said it's totally ok to add bootstrap to your project and it should be smooth.
I have an AngularJS app in development, and the CSS is already done, just adding functionality.
What I now need is stuff like
date pickers
modals
tooltips
I'd love to use some of the stuff from angular-strap, but it's based on the bootstrap.css file.
If I don't include the bootstrap file, it doesn't work. If I include it, it works, but it breaks everything, my whole layout is destroyed. That happens also if I include the bootstrap.css first.
I then tried to only load partial elements from the bootstrap site. For example, the date picker from angular-strap said to use elements like tooltip, so I only used the tooltip css elements using the bootstrap customiser, then it displays but inline, not a tooltip anymore.
It's quite frustrating. Is there a way to add those amazing libraries without breaking the CSS of the existing app? I'm somehow not seeing what's really required for that.
My company's project is in the exact same situation. We use Foundations for our grid layout. But we want to use things like AngularUI which is based off of foundations.
What we've done is to include the bootstrap JS. And then selectively choose the bootstrap css that is needed. Doing it this way has given us the ability to use Datepicker & Modal. (Although, recently I found some better angular datepickers - and the angularUI datepickers just don't have the usability that I was looking for).
So it seems that what you may be missing is the JS for bootstrap. But without seeing your code it's really hard to say.
Per your request, here are some of the datepickers that I like better:
ngQuickDate
ng-bs-daterangepicker (useful for date ranges) (although, this one also has a BS dependency)
Jquery UI Datepicker (implemented as a directive)
I'm developing a ASP .NET web project that uses: jQuery, jQuery UI, reset/normalize css stylesheets. Most of the CSS is crap, so I'm going to rewrite it + I will have a budget to it :)
I came across two fancy solutions that I would like to learn:
SASS
Bootstrap
I wonder, how to "mix" my existing application with these solution. When it comes to SASS, it seems to me pretty obvious - just rewrite CSS and be proud of new clean meta CSS, however I'm not sure about Bootstrap. What are the advantages of it if I don't want to change the layout of my site?
Another thing: can I run into possible issues when including Bootstrap / SASS into my site?
Twitter Bootstrap (TBS) is a CSS framework and its original purpose was for website and web app prototypes. So if you want to start from scratch with very thorough and well styled CSS, then bootstrap is great.
Twitter Bootstrap is NOT necessarily the right solution if you want to keep the majority of your existing UI, especially if your existing UI doesn't match up well with their scaffolding, grid system, and other elements of their UI styles (forms inputs, buttons, typography etc). You'll find yourself having to override a lot the framework's properties, which kind of defeats the purpose.
As #Nathron mentioned, if you try to mix TBS with your existing code, you could run into conflicts. Creating a customized build of TBS that includes only the elements of their framework that you want would be the best approach there: http://twitter.github.com/bootstrap/customize.html.
Regarding SASS, if you want to use it in combination with TBS, check out https://github.com/jlong/sass-twitter-bootstrap.
From their site: The Boostrap JS is for "interactive components for things like tooltips, popovers, modals, and more". So if you are using any of those, make sure you don't have conflicting JS functions.
You could run into issues with the CSS if your class names are the same as the ones that Bootstrap uses. Many of them are a little obscure like "darkwell", but some of them are common like "dropdown", so you just have to keep an eye out for that.
Easiest way to see is to download it and play around with it :)
I'm starting out with Sencha Touch, and I am getting a pretty decent handle on the Javascript elements of this powerful tool. But I've recently come to the CSS portion, and I'm afraid I can't figure out how to style it accurately.
I can guess at some of the elements, and I know some of the others because I created them. But I can't look at the generated source or examine the DOM, not even using FireMobileSimulator or some such plug-in. So when I, say, try to style my form elements and I find that I can't get the labels and input fields to float, for example, I have no way to diagnose exactly why it isn't working.
Does anybody know? Thanks!
SS
Hey StormShadow.
To edit the style of Sencha components you shuld learn SASS, in fact, Sencha Touch, exactlly like the new Ext 4 framework, uses SASS and COMPASS to create theyre themes and you can do the same creating your own. I know that at the beginning you could be "scared" about to use these new technologies, but I assure you that you will able to change the whole application by editing a simple variable.
However, if you want to miss this great opportunity, I suggest you to take a look at this file
"resources\themes\stylesheets\sencha-touch\default\widgets_form.scss" inside your Sencha Touch root, to have an idea on how the component are created and witch CSS classes are used for Form components. Then you can try to edit them by hacking the Sencha Touuch theme CSS.
But I warn you: This is not the Sencha way to do that.
if you want to be a great Sencha Touch developer, you have to learn SASS.
It's really easy and it really worths to be learned!
Hope this helps.
you can also use less, rather than compass to generate your css (after all it's just CSS!)
LESS can be implemented clientside or serverside so you don't have to go near Ruby.
Less Website