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 7 years ago.
Improve this question
I'm back-end developer starting with front-end development. I've chosen angular2 for my application and I would like to use bootstrap with it.
As far as I know, using bootstrap is just putting right html classes on right html elements.
Should I put classes directly in my template? Or maybe I should group them somehow in application-specific classes and use only them in html? (So my html file would not be bootstrap specific. But CSS doesn't allow class inheritance, so I don't know if it is even possible).
Later, if I would like to modify something(colors, size, whatever), should I modify bootstrap sources or I can just attach my .css file to the html ?
Is using less or some other css-preprocessors connected to using bootstrap? I mean, is it possible to create custom looking application with bootstrap with just vanilla css?
Should I put classes directly in my template?
Yes you should. As you mention CSS classes do not support any kind of inheritance so the concept to create an abstraction layer is not feasible. Also, If you need to switch to a different CSS framework you will need to change the HTML also.
Should I modify bootstrap sources or I can just attach my .css file to the html ?
Bootstrap provides a customizing tool to override some of its default values so you could use that. Also, you can save your configuration to a JSON file and keep it for future reference.
For additional changes you should have a new CSS file to add new styles and override existing ones.
Is using less or some other css-preprocessors connected to using bootstrap?
CSS preprocessors output regular (vanilla) CSS. So, yes, it is possible to create Bootstrap-like applications with CSS only. Preprocessors will help you to have your CSS more easily maintainable.
it is possible to "extend" bootstrap css classes, maybe not with normal css classes, but css pre-processors (like LESS, which you mentioned) have the ability to create mixins that rely on existent styles. try that out.
though, there is nothing wrong with using bootstrap classes directly
if you want your styles to work a little different then how bootstrap usually does, do not change the bootstrap sources, but override the classes with your own css (there are a few exceptions, though, but only case specific).
using css-preprocessors (such as LESS or SASS) with bootstrap is well supported, there are even some libraries/projects related to it which you can easily find (here's an example).
Related
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 3 years ago.
Improve this question
I noticed in Jira, they have obfuscated the CSS classes, so they look odd and they are different on every page refresh:
<div class="sc-dYaWWc dJrjAK">
<div class="sc-iLVaha hfGHeD">
<div class="sc-geAxOV krrXnm">
<div class="sc-bJT2cE bPFEwh">
<div class="sc-imDrJI jKvdHw">
<div class="sc-hAhkBK epXQAj">
...
What is the motivation behind this, maybe to prevent crawlers or other security concerns? Is it a worthwhile practice for general app development?
The main reason of obfuscated/scrambled CSS class names is the usage of CSS modules to provide style encapsulation and size reduction.
Style encapsulation (and style leakage) is still a great issue on the web, especially when web apps and sites becoming more-and-more complex over their lifetime.
Soon (hopefully), we'll have Shadow DOM capabilities in all browsers, until then some form of modular CSS solution is needed to properly encapsulate styles. Check out this article about it.
In summary:
CSS Modules provide modular,
reusable, and cross-browser solutions for:
Conflictless styles
Direct and clear style dependencies
Avoiding global scopes
React, Angular and Vue use their own solutions to this problem in their build-chain. Most modern MV* frameworks use CSS modules in some form.
And of course, one other benefit of using CSS modules is the initially more complex methods to successfully scrape the content of the specific web page.
Atlassian use react-css-modules for obfuscate and optimize his template for a simple reason:
Obfuscated CSS class names == smaller bundle size == less amount of data to transfer over network.
Obviously the obfuscate class is only on production build not on development stage.
modules property tells Webpack that class names needs to be obfuscated. You can set it to false in dev build and class names will stay the same as in CSS file. That is very useful for development.
Text from How to obfuscate CSS class names with React and Webpack.
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 4 years ago.
Improve this question
I want to create a really simple blog and so far I learned HTML and CSS.
So if I want to add a new node or article, do I need to modify my HTML document and then upload it again or is there any other way?
If you're only using simple HTML
Then the css should be made in a way that would make it reusable, so that when you just add another article shouldn't affect anyhing else. The HTML however must be changed, as you'll need to add your content somehow
The thing is, no one uses plain HTML anymore. If you want everything to happen dynamically then you should use DOM manipulation frameworks. The most basic one of which is JQuery, while the most powerful ones as of now are React, Angular, and Vue
Well, of course you have to modify something and upload it again, but not necessarily the HTML code.
You could youse AJAX (Asynchronous JavaScript and XML) - which, by the way, you can also use with JSON instead of XML - then create a standard article model, get the latest article from your file with
fetch("your-file.xml-or-json-or-whatever").then(
function(response) { /* Do something with the response, see the link below for an example */ }
);
and finally turn it into a DOM element with JS.
This method is pretty inefficient, though, if you don't have a way to cut the output from your list of articles. In fact, if, say, you have one thousand articles, it's inconvenient (inconvenient to say the least) to serve them all and the just use the first ten. If you have a static server, you might want to split the content into multiple files. If, instead, you have access to PHP (or other HTML preprocessors), then you should consider cutting it dynamically. Below are some links to help you.
AJAX tutorial on W3Schools
Fetch documentation on Mozilla Developer
You could also think of using frameworks like Angular (or AngularJS) to make your website even more dynamic. However, those are better for web apps than websites, as I've heard that it's a bit harder for Google to register an Angular app.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I need to code a layout (http://lancebitner.com/Story%20580_WAGE_Yes.pdf) using Bootstrap and I am not sure if it is possible. I have limited experience with Bootstrap, but more experience with HTML and CSS. I am not sure it is possible as I have not been able to find any references for this layout. Can anyone point me in the right direction? Each page has different features and I am hoping to produce them each with Bootstrap.
Has anyone seen a site similar to this mockup, with the layout and features, that uses Bootstrap?
Any design can be done using bootstrap, its about how are you going to manipulate or edit the existing code, but for me the best part of bootstrap is the grid system, which will allow you to have a better responsive design.
probably not exactly . bootstrap is actually a grid system with a collection of markup and css rules that will make it look different a bit ( but a lot better ).
That means that some elements will look different ( buttons, form elements etc ) if you will use the default rules - But you can always override them .. but then again - why use bootstrap :-)
as a direct answer - For layout by itself ( ignoring the design ) - yes, you can.
bootstrap will also give you the advantage of device / browser compatibility that is hard to achieve coding from 0 in HTML these days .
I suggest you go to the examples page where you can see some layouts to start from - combining these will allow you to achieve the layout you need . Also pass all the elements and components ( form, table, buttons etc) that are showcased on the official page. all the elements you need are there ( and more )
In order to understand bootstrap the best way iss just to implement it .
Good day,
Yes, it's possible and judging with the pdf, you can use some free bootstrap templates here, just tweak it
https://bootswatch.com/,
http://designmodo.github.io/Flat-UI/
Cheers :)
I did some research and you guys were right, Bootstrap can do it; it just takes some custom CSS and JS. I found a Bootstrap layout with some of the features I was looking for; single column layout with a drop down menu: http://alijafarian.com/bootstrap-multi-column-dropdown-menu/ . Also, for the two column page I found this layout: http://startbootstrap.com/template-overviews/2-col-portfolio/ . These to layout will help tremendously. With some adjustments I am on my way!
http://lancebitner.com/Capture2.PNG
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 8 years ago.
Improve this question
I have a fairly big single page application I'm working on. I can put the styles inline in the html tags, e.g. <div style="width:10px"></div>, or I can put it in a separate .css file and reference tags via classes or ids.
Obviously I'm using .css and classes/ids for styles (re)used many times. But there's a lot of one-off elements that just need a little specific adjustment here and there, e.g. a small margin to make it look just right, and creating a new class or id for each one of them seems extraordinarily cumbersome. I end up with lots of one-off classes and ids that are not easy to navigate, and instead of finding the style information where it's used (in the relevant tag), I have to go search in some random .css file.
Yet, the internet tells me it is always preferred to keep all my style information in .css files. Who's correct? Have I stumbled upon a specific case where inline styling is better, or would I somehow be shooting myself in the foot by doing that? Is there perhaps even a third way that is better?
Yet, the internet tells me it is always preferred to keep all my style information in .css files. Who's correct?
You do realise you're asking the internet here...? ;)
Having had to redo several websites where styling had been applied using inline tags, I can say without any hesitation that I would never, ever use them myself. They are a nuisance to maintain and unless you're keeping a close record of where and what you have applied the inline styles, it is difficult to ensure that your changes to global css files will be respected throughout the site.
If you do need page-specific css classes and you don't want to put them in the global css file, add them to the page head in a <style> element. Putting all your css in a single file has the advantage that the users' browsers will load the file and cache it, so that it won't need to be reloaded on other pages of the site.
If you are finding you have a lot of tweaks to make all over the place, it suggests the design may need rethinking or refactoring. This is particularly the case with margins and padding--you can make a lot of work for yourself by choosing the wrong combination to apply spacing to your document elements.
Even for the one off styles I think a nice approach would be to have a specific file used during development called oneoff.css for example where you could have your style rules for one off situations.
This makes them easy to find and you get the benefits of having external .css files (separation of concerns, reusability even if you think you will never need to reuse I bet you will, and cacheability).
You have to weigh the pros and cons in the context of your particular organization and applications. For example, standards are more important in a team environment than on an individual project or quick utility. Would inline styles on your pages be a surprise to someone making global changes?
For what it's worth, my large organization has a strict policy against inline styles, but in my opinion there's no definitive answer to your question. There's a good Stack Overflow post on this: Comparison of loading CSS inline, embedded and from external files
therefore define multiple classes and apply styles to an external file (external.css) is more orderly. however you can use online <tag style="..."></tag> or labels styles 'style'
<style>some style</style>,
will not have any problem it is important to have the code neat and tidy. that's it
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
okay so I have just started development using twitter bootstrap. I find it very handy and easy to use. But when it comes to applying my own styles and adding my own background color, links color, button color and font colors It gets really frustrating. I therefore need some good and complete resources or any tutorial that explains how to add our own css in the existing bootstrap framework. Any help will be really appreciated!
if you want to customize the appearance of twitter bootstrap framework then:
always use a custom.css file to override the main bootstrap.css.
include it under your bootstrap.css
always see getting-started at bootstrap site.
see this site bootstrap-resources
hope this will help you
Fonts and colours can be customised on the bootstrap webpage. Adding backgrounds and things can be achieved by creating your own custom.css which can be included after the bootstrap.css file.
No offense, but - when you read a bit more carefully you're getting all the information you want on the project's page(s):
On the project page is a little tool where you can customize all LESS variables, at the GitHub repo is a README on how to compile the LESS files from scratch. Have a look at the LESS homepage to get a clue about what LESS actually is.
You only need to build a CSS selectors with higher specificity, than those defined in bootstrap's CSS. See nice explanation here: http://www.youtube.com/watch?v=In78mSOHmls
And you can use the built-in Firefox Page Inspector tool to see, which rules are applied and which are overriden. (it can be started by pressing the Ctrl+Shift+i shortcut, in Chrome it's Ctrl+Shift+j )
You can customize your resources on getbootstrap.com. I would recommend you read their component documentation so you can understand what is offered and align it with what you need, that way you can avoid a bloated stylesheet.
Also chrome has a great tool that allows you to edit CSS on the fly (which I find more useful and quicker than using Firefox's extensions)