I am using twitter bootstrap for layout and css. But I like the foundation top bar navigation over what bootstrap provides. I tried to use the top bar code inside my html (built with bootstrap) and it messes up the layout. That is not surprising because both of them rely extensively on class named "row" and they have different properties.
One of the options I could think off is to override the row class some how in my style sheet but that would be too much of a work and doesn't seem right.
Other option might be using iframe.
Is there any other way this issue can be solved?
Ideally, you only need to use the top-bar CSS and JS code of Foundation, since that is the only component you mean to use. Here is the SCSS file (with dependancies on the variables declared in _settings.scss. Or you can use the generated CSS code.
If you still need to use .row, just copy the .row styling and name it different. I.e:
/* The Grid ---------------------- */
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }
Finally, dont't forget to include the jquery.foundation.topbar.js file and calling
$(document).foundationTopBar();
Old question but thought I'll share the latest if someone is looking for a seamless solution: Web Components
It's a bit of a more complex subject but will allow you to create widgets within completely isolated Shadow DOM's without overriding a thing. Read more about it
here and here. Then you'll be able to do something like this:
<template id="templateContent">
<style> #import "css/generalStyle.css"; </style>
</template>
Taken from this answer
Using an iframe for this is a bad idea. If you like the style for the Foundation top bar, just copy those styles into a custom class in your stylesheet.
Please note that you may have to override some of Bootstrap's default styles for the top bar to get it right.
Related
I'm using CSS Grids to achieve this layout and just for reference, the desired behavior is that when users scroll down the page all the text remain fixed while the rest of the content slides over, something like this. I've managed to achieve this by creating a Home.svelte component and adding a .grid class to the <main>. This is what my CSS looks like:
.grid {
height: 100vh;
display: grid;
gap: 0px;
grid-template-columns: 9% 18% 27% 46%;
grid-template-rows: 9% 24% 22% 45%;
}
But as you can see there is going to be a Thoughts link that behaves like a <nav> element on the top and possibly another pages as well and the problem I'm having is: for every new Svelte component that works as a route (I'm using svelte-spa-router) I need to add the same <main class="gird"> and that CSS code snippet. And this makes adding the page-specific content messy. I was hoping to be able to use all those elements as some kind of layout. Tried to add then to a Svelte component that I would then import but I was unable to do so because things wouldn't fit in the grid, it seems like they were following the normal flow.
I was wondering if it would be possible to somehow make this style global so I don't need to replicate it for every other page. I tried to apply these grid properties to body and html in my app.css (which is where all my CSS variables are attached to :root) file without success as the styles apparently aren't even applied to other pages. I even tried adding these stylings under something like :global(.grid) inside the app.css file but again, had the same outcome.
Any ideias or suggestions on how to handle this and avoid the code repetition? Where should these grid stylings live in a Svelte project? What are the best practices here? Thanks in advance!
In a regular CSS file that is linked in the page, you don't need :global.
In a component's <style> you do need it.
Check the styles that the page actually loads (e.g. via the network tab in the dev tools) and see if the rules actually exist and match what you expect.
I'm developing a small control which is directly embedded in a parent page (without iFrame).
My control is written using react-bootstrap, so the bootstrap4 css is also embedded along with my control.
While developing my app as standalone, everything was fine.
After embedding it however, it turns out that there are some "global" bootstrap styles, such as the so called "list-styles" that don't get applied only on HTML elements having bootstrap classes, but instead on any matching HTML tag.
This causes the parent page's layout to get scrambled once my control is loaded.
Examples for bootstrap classes that are applied globally and which cause problems for me are styles like these which can be found in the bootstrap4 default css:
dl, ol, ul {
margin-top: 0;
margin-bottom: 1rem;
}
or
label {
display: inline-block;
margin-bottom: .5rem;
}
This is very unfortunate for my use case. Is there a way for getting rid of any styles in bootstrap, which are not linked to any proper css bootstrap class? I don't want any styling of HTML tags that are not explicitly linked to a bootstrap class.
Thanks for your help.
I can think of three options, though I'm not sure they will do for you:
Paste Bootstrap's styles into a local file (instead of getting them from a CDN or something) and delete what you don't want (most of the unwanted styles should be at the top of the file)
Look for another, more minimal version of Bootstrap. I don't know if such versions/customizations exist but they very well might
Don't use Bootstrap. You can just as easily write your own css lines (personally I find that Bootstrap makes you lose control over your styling, but that's my opinion)
I'm working on a new web app and I'd like to create my GUI mockups in Illustrator then implement them in HTML5 and CSS3 using Twitter Bootstrap. I know how to use the CSS classes to create my pages but I'd like to know the process of customizing Twitter Bootstrap to match my mockups as much as possible. I'm talking about colors, typography, margins, padding, borders, button styles and so on. I'd like to create completely different themes for this and every future project I'll be working on.
I'm a programmer but I love GUI design too so I'd like to know how professional designers make all the pieces fit in.
Thanks in advance.
In order to get the most out of Bootstrap (especially the new "mobile first" features) I recommend using your Illustrator file as a jumping off point, rather than a spec.
I agree with the other commenter who suggested leaving the Bootstrap file in place and writing a second file with selective overrides. This is much easier with Bootstrap 3 since the flat design means less to clobber with your own declarations.
I always start with laying out a static version of the pages using plain Bootstrap then methodically cherry picking styles using the inspector (e.g. body backgrounds, typography, colors) in priority order as they stand out to me visually. I usually wind up with something that is close, but slightly different (often better), than the original design.
Good luck! If you don't fight it too hard, Bootstrap offers a lot out of the box.
I'm pretty new to Bootstrap but the general consensus seems to be to leave the actual Bootstrap.css intact and create different CSS files to override Bootstrap. For example in this snippet (SCSS by the way) I commented a section as "General" and placed some default overrides for my site. Most notably would be the restyled input boxes from rounded to square.
/********
GENERAL
*********/
html, body {
height: 100%;
}
.wrap {
position: relative;
overflow: hidden;
min-height: 100%;
}
body {
a {
color: #FF4329;
&:hover {
text-decoration: none;
}
}
input[type="text"], .btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
}
Also note that you can customize the files you download from Bootstrap so if you plan on using on the the grid system then that's all you need to download.
If you're planning to use the grid system of Bootstrap, there're plugins for Photoshop and Illustrator that create guidelines for you (you can even specify the padding, number of columns and margin).
Bootstrap is based on CSS. When you design something in Illustrator, you'll have to export assets like images but it's important to make use of CSS also for the most things you can. Remember, it's faster to apply a CSS background-color instead of using an image for that purpose as background-image.
I make my scratches on paper and pass right away to html. With chrome developer tools you can easily change the css styles applied, apply new rules, etc
How do I override the css of a fancybox?
I'm building a website that uses fancybox on two different pages, and I want to override the fancybox css on one of these pages so the arrows are pushed outside of the box.
IE I would like to impart these properties on the fancybox:
.fancybox-prev {
left: -80px !important;
}
.fancybox-next {
right: -80px;
}
I can't figure out how to accomplish this and solutions to other relevant stackoverflow problems don't work. I'm sure there's a simple way to do it.
Can anybody help me out?
$('.fancybox-prev').attr('style', 'left: -80px !important');
$('.fancybox-next').attr('style', 'right: -80px');
You have to remember about hirarchy of the CSS. Inline CSS are the most important ones, external CSS will be read second.
When it comes to the latter, they are read from the top of your CSS file. So writing the style, which you want to use to override a previous one, below, should do the work just fine.
Secondly, you can always use jQuery to do that. ShaggyInjun gave a good example. You should be able to do that by using $(selector).css();.
if using fancybox v1.3.4 check:
http://fancybox.net/faq No.8 .... it also might be useful to check this.
if using fancybox v2.x check :
https://stackoverflow.com/a/8672001/1055987
Basically, you have to set a CSS inline declaration AFTER you have loaded the fancybox css file in order to override those properties.
I just started to port twitter's bootstrap to GWT (see the github project here and a very ugly demo here), but, I was having a log of issues with bootstrap styles vs Gwt styles.
Bootstrap put a border-top in tr/td elements, and GWT components basically use tables everywhere. In the demo you can see that bug in the left VerticalPanel.
So, I was looking for a way to make GWT components ignore bootstrap styles, and I have no idea how to do this.
Is there a simple way to make it work right?
Thanks in advance.
It's possible, but somewhat complex to do something with a Linker in GWT. The high-level idea would be:
Put all your GWT components in a <div id="gwt">...</div>
Add a linker to the GWT Module file that will process CSS files.
In the linker, transform the GWT CSS (e.g., standard.css) to insert a #gwt before each selector rule.
The first part is easy, just add an id to your root element.
The second part is also easy, simply add code that looks like this to your Module.gwt.xml file:
<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" />
<add-linker name="cssLinker"/>
The hard part is implementing the Linker. It's possible to do parse it by hand, but you might find it easier to use something like SAC.
Using the Linker, you can transform your CSS by inserting a #gwt before each selector. Using SAC, you might do that by overriding all the DocumentHandler methods to simply emit each of their arguments to an OutputStream. In DocumentHandler.startSelector() you would first emit "#gwt " before each selector.
[Edit]
This assumes that GWT's standard.css defines styles that override the bootstrap styles. If not, you might have to 'enhance' the GWT CSS with defaults. There's a list of W3C recommended defaults here.
The benefit is that this is future-resistant - if GWT styles change or if bootstrap styles change, this should be robust.
Hope that helps,
Adam
You can simply add a style to one of your root GWT objects and then simply override the bootstrap styles to remove those messy borders:
<div class="gwt">
... some other GWT-content
</div>
and in your CSS:
.gwt tr, .gwt td {
border-top: 0px;
}
Of course if you need to embed some bootstrap elements in your GWT elements then you will have to hack around and do:
<div class="gwt">
... some other GWT-content
<div class="bootstrap">...
... Bootstrap elements
</div>
</div>
and in your CSS:
.bootstrap tr, .bootstrap td {
border-top: 1px; // Whatever bootstrap style puts
}