Since I am pretty bad at graphic design and my CSS skills are not so good, I usually buy pure HTML/CSS templates to start new (small) websites.
The problem is that usually these templates are bloated with unused JS/CSS or, at the opposite end, they use only a subset of open source icon packs for example.
So I usually have CSS files with this (of course, just an example):
.icon-email2:before {
content: "\e662";
}
.icon-heart2:before {
content: "\e663";
}
.icon-enter:before {
content: "\e664";
}
.icon-cloud1:before {
content: "\e665";
}
.icon-book2:before {
content: "\e666";
}
.icon-star2:before {
content: "\e667";
}
Is there an easy way to print a table with "css name / icon" for ALL the styles defined in that CSS file? So I can visually see what I have and especially what I don't have.
I can (with PHP) build a parser to generate the corresponding HTML file, but I was wondering if there is a nicer, cleaner, faster option in JS and/or CSS itself.
Related
I'm using modified by my team PHP tool for converting HTML to PDF. My task is to add number of pages in bottom corner. I never know how many pages I'll have, I don't know after which part I may get a page break.
I can't use Javascript.
I was thinking about using CSS counter, but I have no idea if it's good way, how can I check if page had a break...
Try this :
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
From This Post
I'm setting up a single instance single database multi-tenant application. The backend is written in Ruby on Rails, while the frontend is a separate app in AngularJS with a Rails framework.
I'm using a resolve on an abstract parent state to determine the subdomain, and subsequently the tenant. Once the tenant is determined, I want to be able to read CSS variable values from a config file on the front-end that can then be used to generate the main styles.css file that contains the classes referenced in the rest of the project.
I've heard that CSS pre-processors like Sass and Less can be used to accomplish this, but I have no experience with either and I'm stuck trying to figure out exactly how to set this up.
Some help / code examples would be appreciated - thanks!
Sass or Less won't really do what you want because they are compiled in advance of the browser loading them. In other words, the browser only loads the compiled css file.
There are however a few methods of achieving your goal. I'm not familiar with Ruby, so I'll try to keep my server language suggestions generic. These are obviously not meant as full solutions because I don't know your full situation. Instead these are just some ideas to give you some leads.
Probably the best method would be to use server logic to apply a different class to the body tag, then use that class to determine what styles are applied to the page. So for example:
/* probably a good idea to have fallback styles */
body {
color: black;
background: white;
}
body.style-one p {
color: red;
background: blue;
}
body.style-two p {
color: blue;
background: red;
}
<body class="style-one">
<p>This text will be red.</p>
You could also, of course, change the class of the body tag using javascript, and therefore the user could change the theme of the page.
Alternatively, you could use similar server logic to write out a secondary <link rel="stylesheet"...> tag to pull in one or another stylesheet. The real advantage here is that if you a large number of rules for the various themes, you can keep them nicely separate in their own files.
One last method I've used (with php) is to create the stylesheet on the fly based on GET variables, but print out the stylesheet as a css file. The downside of this method is that I think you lose some browser caching advantage. In any case, that might look something like this:
<?php
header("Content-Type: text/css");
if( $_GET['theme'] == 'one' ) {
echo 'p { color: red; }';
} else {
echo 'p { color: blue; }';
}
?>
a {
color: green;
}
<link rel="stylesheet" href="style.css.php?theme=one">
I am using xstyle plugin into my dojo build process.
All css is concatenated and minified, but I have notice that it translate ASCII reference like this
#test {
content: "\f000"
}
to this:
#test {
content: "";
}
I need instead to keep the same ASCII value as content: "\f000" in the final CSS style.
In my specific case I am building a dojo flat theme which include Font Awasome.
How to achieve this?
I was wondering if anyone had found a way to create different CSS files from the same less files.
In my context I created a different customer less file. This file consist in a series of variable with their settings for the theme of a specific color and other CSS instruction.
I also have a less file for the default settings.
Here a representation of the less folder
Less Folder
My less folder
All the style specific to my context
customer.default.less
cutomer.less
I would like to compile two different css from the "My less folder" the first one would use the customer.default.less file in the variables. The second one would use the customer.less file. Creating the customer.default.css and the customer.css. In order of having the customer.css and the customer.default.css all way in synch together.
I'm currently using the compiler plugin in webstorm. Am I using the right tool?
Thanks
You can indeed produce multiple CSS outputs from a Less file, provided you use 'control' Less files.
E.g., here is the main stylesheet we're using for a site:
/* main-stylesheet.less */
#maincolor: #ff0000;
#secondarycolor: #00ff00;
body {
color: #maincolor;
background-color: #secondarycolor;
}
Now, we want to produce a secondary stylesheet (to output 'customer.default.css', or 'customer.css' as you prefer) - we import the main Less and override its variables:
/* secondary-stylesheet.less */
#import "main-stylesheet";
// Override variables from the 'main' stylesheet.
#maincolor: #0000ff;
Note that we do not define any rules or set any styles here, only override the variables.
Here are the output CSS files:
/* main */
body {
color: #ff0000;
background-color: #00ff00;
}
/* secondary */
body {
color: #0000ff;
background-color: #00ff00;
}
This is possible because Less uses lazy loading.
Be sure that the file watcher setting 'Track only root files' is disabled; otherwise the main stylesheet in our example would not produce any output css.
(Also, I would separate the two variable declaration blocks into their own Less files - perhaps as theme-variables-default.less and theme-variables-override-a.less)
I think you can accomplish this using the grunt-contrib-less GruntJS task with something like this in your Gruntfile.
less: {
development: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
},
production: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
}
}
LESS isn't my bread-and-butter, but using Sass enough and the grunt-contrib-sass task I assume the same set of features would exist.
So as has become fairly common practice we are using css content to position text that is really "style" specific. eg
.label:after { content: ":"; }
it was pointed out to me however that this sort of thing varies in certain cultures. Uh oh.
Does anyone have a good pattern for dealing with this sort of thing since CSS files are not typically passed through an asp.net processor and therefore have no access to the resources files.
I really like this question so I thought about it a bit. Would this be a good approach for you?
<label data-after=":">Name</label>
Then, in your CSS you can do:
label:after {
content: attr(data-after);
}
Here's a quick demo of it:
http://jsbin.com/iYEKOH/1/edit?html,css,output
It should be pretty easy to polyfill for browsers that don't support it using Modernizr. I think it would add a no-generatedcontent class.
Another though... How about this approach?
html label:after { content: '' }
html[lang=en] label:after { content: ':' }
How about this approach? It'll let you switch it up based on the lang attribute.
html label:after { content: '' }
html[lang=en] label:after { content: ':' }
If I were doing this in PHP (the scripting language is not critical, just affects the implementation details), I would set up CSS files that contains all the rules that depend on the localization.
For example, local-en.css, local-fr.css and so on.
In my site template(s), I would check my localization flag and then load or link to the appropriate CSS file taking into account the order of the files to make sure that all the CSS rules cascade correctly.