Create own css template or buy ready made css template in bootstrap - css

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.

Related

add animation to already created asp.net app

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!

Switching from Twitter Bootstrap to TODC Bootstrap: What's involved?

Currently on our website, we are using Twitter Bootstrap just the way it came. It's a nice theme and allowed us to make a site that looked decently professional very quickly, but the three of us working on the website agree that we'd prefer a Google-styled theme, like the kind used in Google Inbox or their new tool Google Classroom.
Initially, I didn't want to switch because of the amount of work that would be involved in going from Bootstrap to Google's Material Design. After a little searching I found a website called TODC Bootstrap which looks promising - it's Bootstrap, but with a Google theme.
I was wondering if anyone knew how I would go about switching from one to the other and what's involved. Is it as easy as swapping some CSS stylesheets, or are some of the classnames and such different so I have to modify my HTML a bit?

Can I prevent DotNetNuke css from conflicting with other frameworks?

I started to look into DotNetNuke recently as a client asked me to do so.
I noticed straight away that DNN is different from other CMS I'm familiar with in a way that it mixes its own controls with site's presentation. (Other cms like Umbraco, Wordpress, Orchard have separate interfaces for content management).
I'm building a responsive website and using Zurb foundation for it. The problem I have is that DNN's css start to mess Zurb's css. I don't want to edit neither css and the problem seems very serious. Is it addressed somehow in DNN?
Bearing in mind how popular mobile browsing has become responsive desings and hence frameworks like Zurb or Twitter bootstrap will gain more and more popularity. And it looks like DNN doesn't play nicely with them, it may become a huge no no for DNN.
The whole idea of mixing site's presentation with cms controls looks wrong to me. Is it possible to prevent them from mixing and messing with each other?
Cheers.
There is a Portal.css file that always gets loaded no matter what DNN skin you use. Then each DNN skin loads a skin.css file associated with the skin/theme and any other specific CSS files it needs to reference.
The issue you are probably having is that the default styles set in Portal.css are conflicting with your theme. What you may need to do is override the CSS that is causing trouble at the top of your skin file.
But yes, this does happen since DNN declares styles for modal popups, dropdowns, links etc that are used in the admin functionality and since that is inline with the actual site design they can conflict if you are using a framework like bootstrap, etc.
We created a Foundation DNN Skin specifically to solve what you're looking for - https://github.com/Ethanhackett/foundation-5-dnn-skin
It avoids the CSS conflicts and has some jQuery no conflict resolutions which need to be addressed since DNN is on jQuery v1... and Foundation is using jQuery 2...
I hope that helps.

How to upgrade web project with latest fancy Bootstrap & SASS

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 :)

how to manage my website design through css

i want to manage all the design of my website(asp.net) through my css.
my client requirement is he should be able to change all design of website within 4-5 hrs.
is this possible.
is there any trick to do this?
Sure it is. ASP.NET doesn't but render html, css and javascript. What you need it to let it render the html you're after and hook in css for layouting.
ASP.NET also provides you with some great functionality: Themes and skins. These make changing css, images, ... a snap by either configuration or setting a certain premaid theme in code. I suggest you take a look at these videos for more information:
Customize my Site with Profiles and Themes?
Create User Selectable Themes for a Web Site
Use Skins with CSS for a Flexible and Maintainable ASP.NET Web Site
That's a very tall order indeed. By design does the client mean the color/theme or also the layout?
Basically is boils down to the following:
1. Generate semantic html only from you ASP.NET code. That is no in-line style and use meaning full css class names for html that needs to be styled
2. Break your css files into two. One for style and layout and another for color. If you're using images, they should be a part of your color css file
You can start here but also be clear about what your client means by "should be able to change the design within 4-5 hours".
Yes this possible if you have good knowledge of CSS i.e. 2 and 3. Have look at below links which can provide you and idea about layouts fully dependent on CSS
Yui library
Yui CSS tools
Many more ideas like CSS sprite can be used to achieve what you need

Resources