Can you (should you) use "half" of Twitter bootstrap? [closed] - javascript

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm looking to use something like Twitter's bootstrap to help me ease some of the pains of creating and working with some of the common design issues. However, I still fully intend to do a whole bunch of styling and stuff outside of their prepared stuff.
Would this be a bad idea? Potential conflicts down the road? Should I try to build on top of and use bootstrap as much as possible?

twitter bootstrap is great to get started and its exactly what it intends on helping developers. Instead of creating a lot of stuff from scratch, you got pretty much everything you need for a basic-to-medium frontend so you don't have to worry about it.
As you build your application, there will be times where you would need, for example, to replace the color of the buttons. So instead of having a .btn-primary be blue you want it pink.
you can override the .btn-primary in your own css, or even better, see how it behaves, copy the styles, change what you need and use your .pink-btn-primary.
Little by little your css would stop being twitter bootstrap and become your own variation, with the ability to rely on features being added to bootstrap with time.
Relying on bootstrap has a bit of a shortcoming - if a bug is fix or a new version changes its behavior (rare on css, but very possible on js) you will have to adjust to make sure you get the behavior that you want.
Also, You should be careful, as suggested, not to use their class names, and make sure you load your css files after bootstrap files.
good luck.

Bootstrap is meant to be used to build on top of and overwrite so you get the design you want.
As always, using Bootstrap depends on the project.
It makes starting out very easy but like most frameworks you don't always want to go against them, so you have to take them into consideration in the early stages of your design. Bootstrap relies heavily on wrapper elements and classes so using it for an existing website where the markup can't be changed won't work out for you.
Example: Their grid system works really well for their fluid container layouts but the default is 12 columns and you will want to look at all their customisation options to change this.. or see examples of using the .less pre-processor with Bootstrap and these settings apply a set margin that may not always work out for you, and you have to start thinking differently.. such as how you can nest elements to achieve the design you want, or start testing with new overwritten margin sizes.
You also need to consider any other frameworks you may be building on, e.g. ASP.NET MVC has a lot of built in features such as the client validation, and HTML helpers for form elements.. but they don't always allow you to apply wrapper elements and class names to them unless you first right your own extension of them.
Bootstrap has an Apache v2.0 license which says
irrevocable copyright license to reproduce, prepare Derivative Works
of
so as long as you keep the copyright license they allow you to change bootstrap as you see fit, obviously you shouldn't look to change what they have already extensively tested for you and you would rather just overwrite some things, but the option is always there.

I think most developers do not just use the prepared stuff, they always add some customization on top of it. As for CSS styling, You can keep the bootstrap.min.css file intact and write your custom css on another CSS file. If Bootstrap updates in future you can just replace that original bootstrap.min.css file and maybe have to make some minor adjustments.

Related

ReactJS and Material UI makeStyles/useStyles question

I'm working on a small web application and I'm developing it using ReactJS and Material UI. In the examples provided in the documentation many components seems to have useStyles within the code. I followed the examples and now I basically a useStyles function within each of my components. My question is: is it good practice?
Usually I have a separate CSS file with all the classes, and frankly I find it easier to manage, but for this case I wanted to follow the CSS-in-JS pattern.
You can see an example of the code I'm working on here: https://github.com/sickdyd/foriio/blob/master/src/components/body/UserProfile.js
Thank you for any clarification you may can give me.
Yes, that is good practice.
It allows you to separate your concerns and localize your styles, where they are needed. You do not accidentally override styles while working on other classes. This will help you especially for larger projects.
It will also allow code splitting and only the CSS/CSS-in-JS that is needed and actually used will be downloaded and added to your website. This will improve your initial paint time as well since less CSS has to be parsed.
I you feel that you are repeating your code at several location, you could also share the useStyles functions or override the global theme to reduce the overall amount of code as well.

How does Slick js carousel behave width custom css?

I've already asked 2 times the developer, posted an issue, and so on, but no answers, so I'll try here.
I'm deciding to switch from wootheme's flexslider (to me, currently still the overall best library) to Slick. Have you ever tried it?
The thing I'm mainly interested (and this is not going to be an opinion, so I guess this question should be fine for stackoverflow), is how well it 'responds' to styles customisations.
Are its own css mandatory? Can I fully override them if needed? I mean, override without too much hassle... Flexslider for example lets you do not load its styles and to setup basic functionality with really few lines of css; again, I mean, styles to have the basic masking/changing images functions working. Then one starts styling anything else, obviously, but that's not the point here.
I think Flexslider is so simple because the really relevant styles are almost all inline-written via javascript. Is Slick the same?
Yes I know, I can try but myself, but I'd also like to hear from someone else who tested it, since I'm going to go straight into production code.
Ok I'm going to answer my own question.
Short answer: yes, absolutely.
Long answer: Slick has 2 main css files: slick.css and slick-theme.css
You only need slick.css, and it's really tiny, and probably you would write almost the same rules if you would override it. slick.css only sets basic functionality and no presentation styles, so you will free of doing whatever you want to customise appearance.

Subtly resizing elements that use Bootstrap grid classes

I'm trying to make a website that uses bootstrap's grid systems as a guide, but isn't ruled by it, to the point of looking too similar to other websites, and having all my elements either too close to each other, or too far apart, which tends to happen with the most basic usages of the 12 column layout.
Now, I know I could change the number of columns to 16 or 24 but with the way I have my project setup that would be difficult and would still be more restrictive than I'd like. So I was wondering, if I have code similar to this:
<div class="bean-game col-md-8">
<h2>Bean Curd Mixing Area</h2>
</div>
Without using the width: CSS property, or anything that overrides the Bootstrap CSS completely (which I'm concerned might make the code unmanageable in other ways), is there anything I can do with CSS, or perhaps even JavaScript or a JS library if need be, to make the.bean-game div resize relative to the width set in the Bootstrap code for the col-md-8 class?
In the case of the website I'm working on, I'd like the div bearing a col-md-8 class to be just a fraction wider (say 10px or so), so as to neatly align with the div above it, which, despite bearing another col-md-[foo] class is just outside the usual grid-system due to some minor trickery with a container div and some margins, which gave me a spacing effect I was after...
I realise this may be a difficult thing to be trying to do, but it really feels like the best way to approach this particular issue.
I've had a look into this and it seems the best solution for me at present will be using pseudo-classes (probably ::after though I haven't played around with them enough yet...) to add pseudo-padding and therefore get around the Bootstrap limitations on the fly, without have to customise my entire Bootstrap setup (which I prefer leaving on a CDN,) and without having to dirty the relation between form and function by having my JavaScript perform styling operations unrelated to user input. It's still not a 'perfect' solution, but I may use it as an opportunity to introduce some slightly more advanced styling, which will hopefully benefit the overall page aesthetic.
I will accept my own answer if this solution works out to my satisfaction.

Better or Worse: Styling with JavaScript vs CSS [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm working on a responsive design would like to know if it is better to style an element using JavaScript or with CSS? CSS is certainly easier to maintain, I won't argue that, but I'm a lot more comfortable building an object in JavaScript. Maybe I'm making more work for myself than I should, but I feel like I have more control overall and I like being able to hook into every object on the screen.
I have constructors that generate the entire page layout and push it into the DOM. No images, just pure JavaScript styling and SVG icons.
What I would like to know is:
What performs better?
What, if any hardware support is there for JS or CSS?
Is a pure JavaScript solution better than using CSS Calc()?
What's more portable?
What's more forward compatible?
I tend to avoid jQuery as I'm more interested in learning what makes things work right now, so pure JavaScript and CSS3 only, please.
Your styling should be done using CSS wherever possible. Have different classes setup according to your needs, then add or remove classes when absolutely necessary with JS.
One thing to keep in mind is that changing styling via JS is a one-time change. Elements added dynamically VIA Ajax won't inherit the styling changes automatically. Another good reason to stick with CSS.
See this post for additional confirmation Should I load responsive design via JS or CSS
As suggested in the link
Putting everything regarding styles in the CSS files is the best
practice.
HTML => Structure
CSS => Styles
JS => Logic
CSS is the best way to style an (X)HTML document.
Even if you need to style a document by using raw JavaScript or DOM, or some framework like jQuery, it'll mean you're giving values to CSS rules.
The rule should be:
Use pure CSS when you can style a predictable document - also you can
enhance your CSS and use CSS selectors for generalized or complex
scenarios -.
Use JavaScript/DOM or frameworks like JavaScript when document or portions of it aren't predictable or are created on-the-fly and
you're applying special effects like fades or any other - in fact,
CSS 3.0 has transitions so it's possible to do a lot of things
without JavaScript -.
After all, think how simpler can be things done with CSS and what kind of overkill is using JavaScript instead, and keep in mind its cons (a very important point: browser compatibility and performance).
The more CSS you use, the more standarized, cross-browser, performant and maintainable web.
UI should be left to UI solutions (HTML/CSS). JavaScript should only provide additional functionality.
To supplement this (because you mention CSS3) if you're referring to animations and new additions to CSS3 (that may not otherwise be available) you can use javascript--but only as a fallback. (e.g. using jQuery's fadeTo over creating an animation timeline with CSS3).
There are serious drawbacks when applying styles with JavaScript, not only because you have no control over specificity, it is slow (as you'd expect), any .css() calls involving classes, e.g. $('.something').css(...), will apply css to only elements of that class that exist at the time, not .somethings created in the future.

Dynamically injecting code in Twitter Bootstrap carousel

So, I've built a responsive site with Twitter Bootstrap. The problem is that I've done this using visible-phone, visible-tablet, and visible-desktop. This means that when someone views my source code, I have whole sections that are included twice or three times, in order to get around problems with differences in span amounts, or, for instance, because a carousel on the tablet should have 2 items, while on the desktop it should have 4.
I'm wondering if I'm doing this right. Should I be injecting (or adding? Not sure of the right name) code to the DOM dynamically using Javascript, based on screen size? Or should I be editing around with my custom, very simple .php files based on screen size? I don't know, and I can't find an answer about good practice anywhere. I've tried looking at sites I like for this, but I never find a javascript script that specifically adds stuff in this situation. Given, I'm not sure what I'd be looking for.
Any pointers?
I would avoid using script to dynamically add the content; as a fellow developer that just makes it less intuitive (in my opinion) and I always aim to produce intuitive code for the chap after me.
If your requirements state that a carousel should have four items on the desktop and two on mobile, then I think your solution is completely valid.

Categories