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
Related
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 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.
Wondering if anyone knows a way to combat this shortcoming.
I use jQuery UI buttons for all of my button actions and the stock icons are a tad boring and I much prefer using an icon set from the twitter bootstrap.
before I go any further here is how I'm styling the buttons:
$('#juiBtnLocked').button({
disabled: true,
icons: {
primary: "ui-icon-locked"
}
});
it seems that the icons property only accepts jquery ui css styles, which I don't know why that should matter as the value provided is the full css name from the css file so logically it should technically accept ANY css rule given.
my question is, has anyone successfully got another css sprite code to work with the buttons?
to answer the question on why I don't just use the twitter buttons, its because that's breaking the jquery ui buttons and I use too much of the jquery ui toolkit to ditch it. If twitters dialog was more robust, I'd skim the jquery ui a bit, but its too limited for my needs.
You could simply override the styling for that class using CSS.
.ui-icon-locked {
background: url(myimage.png) no-repeat 0 0;
}
ui-icon-locked is not a CSS rule. It is just a hook for a HTML class. The default rules for the styles (including the icons) are stored in jquery-ui.css in the directory of the theme you are using.
For example, in the jquery-ui.css of the base theme of 1.9.1 you can find these:
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
...
.ui-icon-locked { background-position: -192px -96px; }
what bažmegakapa said is a good answer, which is why I marked it as the answer, but I found another way to do it that allows me both usages. I'm writing it here so people know another way to do it.
with twitter bootstrap, you have button CSS and then you have button js code that's similar to that of jquery ui.
all I did was took out the js code from their buttons and just use the css rules to style my buttons. now jquery ui is happy and so am I.
I noticed this same approach will work on a few other things within the twitter bootstrap.
This actually was a better solution than how I was doing it as its now all html controlled compared to making a button element and using jquery ui to style and mold it, which is a bit overkill I suppose.
After upgrading our ExtJS 3 application to ExtJS 4 the appearance of some (but not all) components changed. That application uses three CSS files: the original ext-all.css and two own files written many moons ago. These two files seems to be generated and define class-based rules like
.x-menu-group-item .x-menu-item-icon {
background-image: none;
}
.x-menu-plain {
background-color: #fff !important;
}
.x-menu .x-date-picker {
border-color: #AFAFAF;
}
To restore appearance of the application, I could
Rewrite the own two files from scratch.
Keep the files and define new rules for the odd looking components. To do that I have to hand-pick them with Firebug and guess which of the many CSS classes used by the component I have to restyle. That should take days.
Style the application with the new theming support which I don't know yet. That should be the last option because it could take too long. Also I don`t see how the existing CSS file can be imported in SASS.
So, what is the best way to restyle my ExtJS 4 application like the old one?
Edit: I don`t want to write CSS in the code by applying a "style" argument. The CSS files have to take care of styling.
As it turns out, theming is the absolut right way to do this. I managed to restore the most important styles of the application by following this guide-to-custom-themes-in-extjs-4.
Soon I ran into this bug and solved it with downgrading sass to 3.1.1 like it was mentioned here.
To restore most of the design I just had to redefine the following variables in the my-ext-theme.scss:
$grundblau: #b9d7ff;
$panelrandgrau: #D0D0D0;
$panelgrau: #f1f1f1;
$base-color: $grundblau;
$panel-border-color: $panelrandgrau;
$panel-frame-background-color: $panelgrau;
$panel-header-color: #333333;
As you can see, the custom design of the application is actually pretty simple. :)
Is there a way to define regions in CSS file just like regions in C#?
Like in C# you define regions as follows
#region My Region
//your code here
#endregion
My problem is I don't want to use separate CSS files for my asp.net project but I also want to organinze so I can define specific sections like one for Master Page CSS and one for FormUser and so forth so it is easy to troubleshoot when needed. Is it possible?
You can use this for regions...works well to make collapsible regions
/*#region RegionName*/
/*#endregion RegionName*/
The RegionName is optional in endregion, you can also use
/*#region RegionName*/
/*#endregion */
Type region and press tab you will get the following
/*#region name */
/*#endregion */
where you can edit the name to give the region a name of your choice.
You can't do regions, but you can always just use spacing and comments to add some organization if you like.
/*Layout rules*/
body{}
div{}
etc{}
/*Typography Rules*/
etc{}
etc...
No there is no support for regions in CSS.
The usual approach is separating into different CSS files and then use a CSS minification tool for production releases that combines and minifies your CSS, i.e. see minify or YUI Compressor.
You can add Regions to your CSS exactly as you describe by using a visual studio plugin called "Web Essentials" (this is the VS2012 link, but earlier versions are available)
Then you can simply add regions in your CSS by doing this :
/*#region Footer
---------------------------------------------------- */
.footerHyperlinks{
decoration:none;
}
/*#endregion*/
In conjunction with the keyboard shortcut (ctrl+M, ctrl+L) this for me is invaluable. as it instantly reduces your huge, long page that you have to scroll through MUCH, MUCH quicker.
Hope that helps you out !!
You should use different CSS files and move them into 1 file while building your application. There are special tools for this that do just that as this is the only way.
Use type of Media Query! this is too late to answer but I did this for grouping my code and it working perfectly for me
#media all /*'Global Settings'*/{
body {
background: red;
padding-bottom: 120px;
}
}
#media all /*'Header Settings'*/{
.add-to-cart-header {
height: 66px;
background: #f7f7f7;
}
}