Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I have a CSS file and an icon set which is referenced from that CSS file. The 500 icons are around 200k altogether, so I think inlining them into the CSS file at wherever they are referenced would not increase used bandwidth, and significantly decrease the amount of requests sent to the server.
Does anyone here know a tool or script to automate the replacement of
url('images/....png')
with
url(data:image/png;base64,....)
Perhaps there is already a tool that automates this?
Otherwise I'll have to write my own regexp. Is a bash script the way to go?
if you really want to decrease the amount of requests then look for a way to convert all the icons into a sprite! it is basically all your images pasted on to one single image file with a css file which has position of all the images have a look at glyphicons:
http://getbootstrap.com/components/
usage of sprite will not reduce the size but will surely reduce the number of requests being sent to server as the client will download one single big image, which will have all the icons and according to css properties will show the relevant icons
use this for generating sprites
http://css.spritegen.com/
and i would never recommend to use inline styling. If needed should be used minimally. Because it does slow down the rendering
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
Is there a tool to check for unused CSS tags in a CSS file?
The reason I am asking is that I have a lot of old/unused tags in my CSS file. I have a website I have been running for a while and have updated the pages many time, so old CSS tags remains there.
I would like a tool that check for all tags found ina page and cross check with the one in CSS file, and let me know all tags that were unused so I could simply delete them from my CSS file to make it smaller.
You can use chrome developer tools,refer following.
http://www.labnol.org/internet/remove-unused-css/28635/
You can use this node.js tool to find unused css: http://davidwalsh.name/uncss for tutorial or https://github.com/giakki/uncss for github
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I'm wondering if anyone can recommend a good boilerplate file in .less to start a project with. Ideally this .less file would contain at minimum the following:
CSS Resets styles
CSS Normalizer styles
CSS3 Helpers (box radius, gradients, box shadow, transition)
Basic Colors Setup
Basic Styling for some common UI elements (buttons, tables, inputs,
typography etc.)
Responsive images
I don't have much control over the markup, so I'm looking to write alot of custom attributes for classes that are already defined. Bootstrap and other popular libraries that require class definitions will not work for me. I'm hoping a markup agnostic boilerplate .less file will give me a good start.
Look at using less extend, bootstrap is still a great boilerplate. You can still take only the less files you want from it. You'd want normalize.less and mixins.less from the bootstrap project.
You can use extend to get whatever else you want out of bootstrap.
p {
&:extend(.clearfix all);
}
img {
&:extend(.img-responsive);
}
or even
p {
.clearfix;
}
If your worried about namespacing collisions you can try your hand at some global search and replaces. If you need that, I can try to help you with it. I wrote something a while back.
Of course you need the bootstrap project source for this - go here and click Download Zip - https://github.com/twbs/bootstrap
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I've been working with a jquery file uplouad plugin which has it's own CSS files, but when the plugin implemented in a web page that also has its own CSS file applied, the elements will have styles applied from multiple files, so what I need is a tool that enable me to select a CSS file and an HTML file than the tool should show all the elements affected by this file, I used Firebug but it only provide the opposite of what I need like selecting element and see all the CSS files affect the element, I think there must be a faster way to do it.
Fire bug https://addons.mozilla.org/en-us/firefox/addon/firebug/
or google developer tool
https://developers.google.com/chrome-developer-tools/
works pretty well.
I think use notepad++ and do some pity, tool will help you but also you will become slave. Apply some of your mind, its easy for Press CTRL + F and search the hierarchy..
Also the browser with Developer Tool will help, but not sure ,who will teach you there :)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm looking for a library that speeds up writing of HTML5 SVG, and manipulating the objects. I want something that can leverage the power of all SVG features.
I was using Raphael but annoyingly it (severely) limits functionality to that of VML. I don't care about cross-browser compatibility, I just want a full javascript abstraction of SVG. I don't care about conversion to flash, I don't care about conversion to 2d Canvas, ... you get the picture!
What options are there? Or should I just get used to raw SVG declarations and manipulation?
Thanks
There's a new compact library called svg.js that offers easier svg manipulation, and which doesn't have any VML legacy code/restrictions like Raphaël has.
If your graphics generate, in some way or another, from data, I would give D3.js a try.
Even if the data weight of your needs is low, I think that it can be very useful to give it a look.
On the plus side is that it generates absolutely standard svg, style with standard css, so you can check what is happening easily. You could even use it to generate svg, and then copy/paste your svg to another project without the D3.js.
Another plus is the support for transitions, that is very good imho.
link
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I know that you can save js and css from chrome, and that sass is in for an experimental feature.
What I'm trying to achieve is a way to track all my changes in the browser when I live edit with my graphic designer. It doesn't seem like I can save html changes; especially considering most of it is generated.
Is there a chrome extension or future plans to do track changes/save them?
You can use "Copy as HTML" in the DevTools Elements panel to save edited parts or even the text of the whole document. As you said most of the document is generated in runtime so it doesn't make much sense to save generated text per se.