I often override "base" css styling by adding an (example) override.css below the base.css in the head of my sites.
base.css:
a { color: blue; }
And then later in override.css:
a { color: red; }
This might be bad practice, but in my experience a very common way of doing it in most websites. In this very simplified case the css-file would be double the size of what it could be.
Are there any automated tools to remove all unused styling, and only present a "parsed" css-file to the visitors? Would for example example CSS CCC option in Prestashop do this for me?
If you're looking for an automatic method, https://github.com/giakki/uncss
However, chrome devtools also includes a nice panel for seeing all unused styles, so most likely it's better to do it manually through this. How to use the coverage panel: https://blog.logrocket.com/using-the-chrome-devtools-new-code-coverage-feature-ca96c3dddcaf
Related
I've inherited an AngularJS project which uses the 3rd party grid, Ag-grid. There is an ag-grid-style.css file that has the following:
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 7) !important;
}
This works great for the grid already in use, the grid is nicely divided into 7 columns.
My problem is I have created new code, also using ag-grid, but I need the new grid divided into 6 columns, not 7. I end up with one extra empty column. Using Chrome for debugging and going into the developer tools, I can see the above CSS and if I change the 7 to a 6, my grid displays perfectly. My question is what is the easiest way to accomplish what I want? I've been trying to adjust the styling in code but haven't succeeded yet. Suggestions?
I would simply add the modified CSS to a CSS file that renders after all other third-party library CSS files. When you have an !important that happens after another !important, the second one overrides the first. So by adding the CSS to your website it should be fine.
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-
viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 6) !important;
}
#Adosi's answer is the preferred solution -- CSS after all refers to cascading style sheets. If, however, you cannot modify the load order of your styles, the following is an alternative solution.
You can override a rule defined in an external stylesheet that has a !important attribute by adding your own definition inline to the element itself. I have demonstrated here using the background-color property as it is more obvious.
#foo {
background-color: pink !important;
}
<p id="foo" style="background-color: cyan !important;">This paragraph has id foo.</p>
The inline style will always take precedence -- eg be loaded last -- so the color defined there is the one that is displayed.
Note that this is not considered a good practice, but I indicate it as an alternative if you are unable to load a CSS rule after your third party asset. (You may wish to log a bug with the 3rd party library because the !important annotation should be used sparingly and in this case probably not at all.)
I had thought that TinyMCE was supposed to remain untouched by the Diazo theme, however some CSS from somewhere is leaking in and making certain functions harder to use. One such example is below, the line height on all the rows has become super short, making each row hard to select.
In Firebug, I can fix this by adding a min-height value here, a value set in dialog.css:
.radioscrolllist .list {min-height: 2em;}
However, I cannot find where to actually set this and have it stick. I've tried putting it in the Diazo theme style.css, in ploneCustom.css, and customizing both portal_skins/tinymce/themes/advanced/skins/plone/dialog.css and portal_skins/tinymce/plugins/plonebrowser/css/plonebrowser.css — none of these seem to do the trick though.
Any ideas on how/where to make this fix? The problem only shows up on the Diazo version of the site, not from the unthemed version. It looks like the only CSS files that load on the TinyMCE iframe are:
dialog.css
plonebrowser.css
columns.css
This is what I have in my project CSS to deal with a similar issue, though I find different issues on each project depending on what I do with the general CSS & columns in particular:
/* Fix TinyMCE gremlins */
#internallinkcontainer div.row {
/* Image browser was jumbled */
float: none;
}
#content #internallinkcontainer .list.item span,
#content #internallinkcontainer .list.item a {
/* Link browser was packed too much */
position: inherit;
}
#internallinkcontainer input[type="radio"] {
vertical-align: middle;
}
/* #end */
Which get's my Link Browser looking like this again:
Apart from the Diazo-CSS troubles, it sounds like you might be having trouble with
plone.css getting cached. The following is from the developer manual with amendments by myself that have not yet been pulled in.
plone.css
plone.css is automagically generated dynamically based on the full portal_css registry configuration. It is used in e.g. TinyMCE to load all CSS styles into the TinyMCE in a single pass. It is not used on the normal Plone pages.
plone.css generation:
https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/skins/plone_scripts/plone.css.py
Note: plone.css is #import-ed by dialog.css which "hides" it from a browser refresh of a normal Plone page, even when Plone is in development mode. This means you may find you do not see your CSS updates within the TinyMCE plugin (e.g. in the link/image browser) whilst developing your theme. If this is the case, then simply do a hard refresh in your browser directly on: /plone.css to clear the cached version.
I just faced the same issue last week. My workaround was adding this in my theme's CSS (the tinymce dialogs are not part of the iframe that contains the content being edited; they are in the main frame):
#internallinkcontainer.radioscrolllist { line-height: auto !important; }
#internallinkcontainer .list.item span, #internallinkcontainer .list.item a { position: static !important; }
(Clearly we should find a less hacky solution, but I haven't had a chance.)
You almost answered it to yourself: You can customize column.css, that'll work, no important-declarations needed.
Additionally this seems not to be Diazo-related, the ploneCustom.css will also not be delivered to the dialog-window in a non-diazo'ed site, hmm.
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
I'm working with a friend on a project with a huge CSS file.
There is a lot of duplication like:
h1 {
color : black;
}
h1 {
color : blue;
width: 30px;
}
The first h1 can be removed, because it will never be used, because fully rewrited by the second. (because it is in the same CSS file)
I would know if it exists a tool that factorizes (and compress) this kind of stuff.
To only have at the end:
h1 {color:blue;width:30px}
PS: If it can be an online tool, it will be perfect!
There's a nice one in ruby: http://zmoazeni.github.io/csscss
In node.js: https://github.com/rbtech/css-purge
Both are very easy to use from command line.
This is also a nice once: http://cssmerge.sourceforge.net
And a plugin for Firefox: https://addons.mozilla.org/en-us/firefox/addon/css-usage
First you can try
CSS usage checker
Then Try these
CSS Compressor
Javascript Compressor
If you are using Firefox, you can use this addon which will help you achieve it.
https://addons.mozilla.org/en-us/firefox/addon/css-usage/
It creates a new css which tells you only used rules and sideline unused one. It also lets you export that css.
I just finished a medium sized web site and one thing I noticed about my css organization was that I have a lot of hard coded colour values throughout. This obviously isn't great for maintainability. Generally, when I design a site I pick 3-5 main colours for a theme. I end up setting some default values for paragraphs, links, etc... at the beginning of my main css, but some components will change the colour (like the legend tag for example) and require me to restyle with the colour I wanted. How do you avoid this? I was thinking of creating separate rules for each colour and just use those when I need to restyle.
i.e.
.color1 {
color: #3d444d;
}
One thing I've done here is break out my palette declarations from other style/layout markup, grouping commonly-colored items in lists, e.g.
h1 {
padding...
margin...
font-family...
}
p {
...
}
code {
...
}
/* time passes */
/* these elements are semantically grouped by color in the design */
h1, p, code {
color: #ff0000;
}
On preview, JeeBee's suggestion is a logical extension of this: if it makes sense to handle your color declarations (and, of course, this can apply to other style issues, though color has the unique properties of not changing layout), you might consider pushing it out to a separate css file, yeah. This makes it easier to hot-swap color-only thematic variations, too, by just targeting one or another colorxxx.css profile as your include.
That's exactly what you should do.
The more centralized you can make your css, the easier it will be to make changes in the future. And let's be serious, you will want to change colors in the future.
You should almost never hard-code any css into your html, it should all be in the css.
Also, something I have started doing more often is to layer your css classes on eachother to make it even easier to change colors once... represent everywhere.
Sample (random color) css:
.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}
Then some markup, notice how I am using the colors layer with otehr classes, that way I can just change ONE css class:
<body class='main_text'>
<div class='main_color secondary_text'>
<span class='secondary color main_text'>bla bla bla</span>
</div>
<div class='main_color secondary_text>
You get the idea...
</div>
</body>
Remember... inline css = bad (most of the time)
See: Create a variable in .CSS file for use within that .CSS file
To summarize, you have three basic option:
Use a macro pre-processor to replace constant color names in your stylesheets.
Use client-side scripting to configure styles.
Use a single rule for every color, listing all selectors for which it should apply (my fav...)
I sometimes use PHP, and make the file something like style.css.php.
Then you can do this:
<?php
header("Content-Type: text/css");
$colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }
Now you can use that colour wherever you want, and only have to change it in one place. This also works for values other then colours of course.
Maybe pull all the color information into one part of your stylesheet. For example change this:
p .frog tr.mango {
color: blue;
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
background: green;
color: red;
font-size: small;
float: left;
}
// ...
to this:
p .frog tr.mango {
color: blue;
}
#eta .beta span.pi {
background: green;
color: red;
}
//...
p .frog tr.mango {
margin: 1px 3em 2.5em 4px;
position: static;
}
#eta .beta span.pi {
font-size: small;
float: left;
}
// ...
You could have a colours.css file with just the colours/images for each tag in.
Then you can change the colours just by replacing the file, or having a dynamically generated CSS file, or having different CSS files available and selecting based upon website URL/subfolder/property/etc.
Or you can have colour tags as you write, but then your HTML turns into:
<p style="body grey">Blah</p>
CSS should have a feature where you can define values for things like colours that you wish to be consistent through a style but are defined in one place only. Still, there's search and replace.
So you're saying you don't want to go back into your CSS to change color values if you find another color 'theme' that might work better?
Unfortunately, I don't see a way around this. CSS defines styles, and with color being one of them, the only way to change it is to go into the css and change it.
Of course, you could build yourself a little program that will allow you to change the css file by picking a color wheel on a webpage or something, which will then write that value into the css file using the filesystemobject or something, but that's a lot more work than required for sure.
Generally it's better to just find and replace the colours you are changing.
Anything more powerful than that will be more complex with few benefits.
CSS is not your answer. You want to look into an abstraction on top of CSS like SASS. This will allow you to define constants and generally clean up your css.
Here is a list of CSS Frameworks.
I keep a list of all the colors I've used at the top of the file.
When the CSS is served by a server-side script, eg. PHP, usually coders make the CSS as a template file and substitute the colors at run-time. This might be used to let users choose a color model, too.
Another way, to avoid parsing this file each time (although cache should take care of that), or just if you have a static site, is to make such template and parse it with some script/static template engine before uploading to the server.
Search/replace can work, except when two initially distinct colors end up being the same: hard to separate them again after that! :-)
If I am not mistaken, CSS3 should allow such parametrization. But I won't hold my breath until this feature will be available in 90% of browsers surfing the Net!
I like the idea of separating the colour information into a separate file, no matter how I do it. I would accept multiple answers here if I could, because I like Josh Millard's as well. I like the idea of having separate colour rules though because a particular tag might have different colours depending on where it occurs. Maybe a combination of both of these techniques would be good:
h1, p, code {
color: #ff0000;
}
and then also have
.color1 {
color: #ff0000;
}
for when you need to restyle.
This is where SASS comes to help you.