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)
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am making a website in WordPress using a theme called Hueman. I want my whole site in fullscreen and get rid of the borders on the side (I'll show in a picture).
Can't find where to edit this.
I need to remove the borders 1 and 2 and make it fullscreen and responsive on other browsers/devices.
You can achieve this by adding this as custom css (tested and confirmed just now on latest heuman version)
.wrapper,
.container,
.container-inner {
max-width: 100% !important;
width: 100% !important;
}
Note:
Don't make changes to original theme files, preferably make a child theme or else use custom css option
As told in the comments, there is a function in most themes (mostly non-free themes) to edit the appearance without changing any code. Often themes install this tweak-UI in the controll panel on the left, using it's own name, adding sth like "options" (e.g. "[myThemeName] options"). Be sure to check that before you change anything in the css-files.
If there isn't any options-menu you should check the structure of the php-file you want to load. Mostly you'll find sth like a "container"-div, which should be one of the first div-instances. Take the id/class of that div and add a rule to the css file, making its width to 100%. Before you add a new rule first check if there is already a rule declaring sth for this div.
Hope that helped you!
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).
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'm working on a little html/css framework that I can use for most of my websites, at least to have a basis to build on. Here's what I've been using so far:
CSS framework
Reset.css - I use the one by Eric Meyer, www.meyerweb.com.
Typography.css - All main typography styles for the site (from blueprintcss.org)
Forms.css - basic form styles (from blueprintcss.org)
Wireframe.css - Here I set up the wireframe for one, two and three columns plus a header and footer. I used the Holy Grail technique, and implemented it so that by setting a class of 'onecolumn', 'twocolumns' or 'threecolumns' to the container div I can switch between the three.
Basic techniques
Some techniques I have some pre-fab examples of for me to re-use in any website:
Suckerfish dropdown menus - Horizontal and vertical in various versions
Sliding Doors tabs - although I try to use CSS3 where possible
Scripting
jQuery - I try to use it as little as possible (that is, if there's css solutions at hand, like the Suckerfish dropdown menu vs. jQ menus)
Plugins
None, yet. I looked into css3pie yesterday and it looked real promising.
Yet to look into
What I haven't used so far but might be interesting is css and js minifiers. Also, currently I include the 5 css files mentioned above in the main.css with #import, maybe I should have them merge automatically before I upload?
Also there's CSS grid systems of course. I never got the hang of those, but maybe I should give it another try. I know the 960 grid is very popular, but I'm not sure if I want to use classes purely for markup (grid_4, column_5, etc.) To me it's a bit like <span class="red"> to make a text red, that's just as bad as using inline style.
Anyway, this is just a basic setup and there's plenty of problems in websites that are not yet incorporated in this framework. So, what should I really check out to improve my framework? (HTML5 and CSS3 welcome, no flash please :P)
Suggestions
I'll make a list here of suggestions made below that I'll check out.
HTML5 Boilerplate
IE 7/8/9.js
Modernizr
I highly recommend the HTML5 Boilerplate
HTML5 Boilerplate is the professional
badass's base HTML/CSS/JS template for
a fast, robust and future-proof site.
After more than two years in iterative
development, you get the best of the
best practices baked in: cross-browser
normalization, performance
optimizations, even optional features
like cross-domain ajax and flash. A
starter apache .htaccess config file
hooks you the eff up with caching
rules and preps your site to serve
HTML5 video, use #font-face, and get
your gzip zipple on.
Boilerplate is not a framework, nor
does it prescribe any philosophy of
development, it's just got some tricks
to get your project off the ground
quickly and right-footed.
The best thing you can do is use it. That's the only way you're ever really going to build a framework that does everything you're going to need. Afterall, you don't know everything it'll need until you actually need it.
Where I'm working we have our own PHP Framework and it's been a contsantly changing entity where bits get added when they are required because they weren't originally needed in the spec.
As long as you have something that works for your first project you're underway. Just try it out, add to it when you need something, and optimise where and when you can!
If you are looking into minifiers, you're probably willing to run your code through some sort of build script before testing and deploying. If that's the case, I'd suggest looking into LESS for your css: http://lesscss.org/docs
LESS is pure awesomeness.
I don't know how much client-side scripting your projects require, but if it's anything extensive you might want to look into using something like M4 or the C++ preprocessor to add support for includes, ifdefs, etc... this can help keep your code organized and allows you to maintain debug code that doesn't appear in the production build. This post sort of takes that idea to an extreme, but it might give you some ideas.
Out of curiosity, what server-side language are you using?
Drop Suckerfish.
With the growing number of touch-only devices (mobile phones, tablets), using hover-based UI elements will just piss off the users.
I can't believe I forgot (and nobody has mentioned) fontsquirrel. I've used it to embed a few fonts now and it really works like a charm.
From a performance perspective, I'd use Compass and SASS with the built in BlueprintCSS framework, it mainly takes care of all reset needs to render the same cross browser, you get to use mixins instead of inline classes for your grid. And most of all you end up with one tiny css file that loads real quick. I also use modernizr, html5boilerplate, css browser selector only with serverside php, faster rendering. If your torn between SASS and LESS, the blueprint integration with Compass+SASS is spectacular. Hope this helps!
why create one more when there are so many out there already.
I would rather suggest you to contribute to the frameworks you are referring if you feel something is wrong or missing. That way you will also help everybody who are already using it.
I agree with Alex here you should start with using it, this will make sure it has everything you want,
and let me know when it is ready for us to use ;)
The Blueprint CSS grid technique is better than the 960gs in my opinion. The thing I dislike about 960 is that the the gutters between columns are formed by two "half gutters" on the left and right of each column. It's bizarre; you wind up with half-gutters on the left and right of your layout.
There's also the CSS browser selector jQuery plugin. This uses a few simple selectors in your CSS to tell which browser to do what:
.ie .myClass
{
background-color: #f00;
}
.ff .myClass
{
background-color: #00f;
}
I use it on my website and it's a much better solution than having CSS hacks or Conditional Comments.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I was wondering if there are any kind of CSS libraries like a Yahoo CSS Library?
Basically I am looking for something akin to JQuery but for CSS instead of JavaScript.
There are CSS frameworks.
There's really not that much of a reason for a CSS library / framework (in one's opinion) as everything you'd be doing is specific to your application's style (Cascasing Style Sheets).
However, there is something I use alot (or the designers I work with), made by Eric Meyer called reset which is a nice tool (as it homongenizes the styles to be almost the same in all browsers), however it does force a rule upon every element on the page (which can slow stuff down sometimes). Here's the link - http://meyerweb.com/eric/tools/css/reset/
I guess you either mean CSS frameworks (I like blueprint) or something like Sass, which is supposed to make writing CSS easier.
I think Blueprint is the nearest you’ll get to a CSS library, outside of the YUI stuff.
There are also standalone grid systems that make laying out your page easier, e.g. 960.gs
Because CSS isn’t a programming language, there isn’t really much scope for abstracting out common tasks. It’s very difficult to really isolate one style from another.
What I have found useful is looking at the CSS in CSS frameworks like Blueprint, to see what they do, and how they do it. Then do a slimmed down version of that for whatever site I’m working on.
CSS is not executable code, so what do you want a library to do?
Using a CSS framework will only truly help if your mindset and needs align with those of the framework creator.
Personally, I think that something like SASS which allows you to generate whatever style of CSS you want, with nifty features such as variables for storing colors consistently, is the best thing to use for larger projects.
There are not really CSS frameworks. It's just a buzzword. A better name is "themes" or "look'n'feel".
jQuery has also several themes in its UI library and you can even roll your own.
To not reinvent the wheel, I would recommend the book Pro CSS and HTML Design Patterns.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Does anyone know of a good online generator to take the source code of an HTML page and compress/minimize the entire page.
Meaning, compress/minimize all embedded CSS, JavaScript and obviously the HTML of that web page while also removing unneeded HTML/CSS/JavaScript comments, spaces, tabs, etc?
Juriy Zaytsev wrote an HTML minifier in JavaScript, which you can use online on this page: http://kangax.github.com/html-minifier/
As the warning says, it’s still an early alpha, so there might be bugs. Use with caution!
http://prettydiff.com/ - This is written in JavaScript so you can use it instantly in your browser.
There's an online compressor that does minimize all embedded CSS and JavaScript blocks and also the HTML. It produces a single line output code which renders as the original and respects the document structure.
It uses Yahoo YUI Compressor and Google Closure compiler for JavaScript.
Check it here: HTMLcompressor.com
This is the best minifier I found till date.
Check it here: Html, Javascript as well as CSS minifier
A duplicate of https://stackoverflow.com/questions/728260/html-minification ?
And if you do not really need an ON-Line tool, then PageSpeed plugin for Firefox and the Yahho compressor are both really good minifiers. Also the PageSpeed tool can give you hints what to change, and which change will give the biggest change in speed/size.
I came across a script that will minify your HTML, Inline CSS, Inline Javascript On The Fly.
Check here Dynamic Website Compressor
I recommend you to try WebMarkupMin Online.
These are the perfect minifiers:
For Javascript http://javascript-minifier.com/
For CSS http://cssminifier.com/
For PNG http://pngcrush.com/
For JPEG http://jpgoptimiser.com/
I use HTML JavaScript CSS Minifier for minify the entire HTML code (including CSS and Javascript).
You can also encrypt the Javascript parts on Javascript minifier encryptor to make it less readable but it increase the size of your file.