When I searched for the icons used by JQGrid, I found single PNG file with all the icons. I am wondering how it can use portion of the image as icon for buttons used in JQGrid.
jqGrid uses icons from jQuery UI Theme. Usage of multiple icons (pictures) in one PNG file is the standard optimization. If one separate icons in multiple files then loading of enery separate file follow long time because of round trip times. Even is multiple files will be loaded parallel (multiple parallel HTTP request) loading of one file is more effectively.
So it you examine jquery-ui.css of jQuery UI (for example here) you will find the following
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_469bdd_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_d8e7f3_256x240.png);
}
.ui-state-default .ui-icon {
background-image: url(images/ui-icons_6da8d5_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: url(images/ui-icons_217bc0_256x240.png);
}
.ui-state-active .ui-icon {
background-image: url(images/ui-icons_f9bd01_256x240.png);
}
.ui-state-highlight .ui-icon {
background-image: url(images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(images/ui-icons_cd0a0a_256x240.png);
}
/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
...
Every row of the body of the grid have the class "ui-widget-content". So the icons will be from the image with the relative URL images/ui-icons_469bdd_256x240.png (see CSS rule for .ui-widget-content .ui-icon):
On the other side the pager have the class "ui-state-default". So the icons will be from the image with the relative URL images/ui-icons_6da8d5_256x240.png (see CSS rule for .ui-state-default .ui-icon) and so on.
So all icons will be loaded from one file. All icon have the same height and the width 16px, but different icons have different background-position. So different 16x16 px parts of the index will be used.
The optimization method have the name Image Sprites. You can read about it here. There are some server solution which allows to combine many images (PNG and GIF images, but not JPG) referenced from a CSS file into a single large image on the fly on the server (see here). There are also places in Internet (like here) which allows you to upload multiple files and to get one combined image. In any way the solution is very old already and it will be intensively used by web developers.
Related
assuming I have an existing SASS rule like:
[dir] .foo {
background-image: ...;
// ... some more
}
And I want to add specific behaviors for ltr / rtl like:
[dir] .foo {
background-image: ...;
[dir='ltr'] & {
padding-right: ...;
}
[dir='rtl'] & {
padding-left: ...;
}
}
this would generate undesired css like:
[dir='rtl'] [dir] .foo {
padding-left: ...;
}
This will not match what I want.
Assuming I cannot change the parent selectors (due to specificity), is there any way I can write such nested selectors in a way that compiles to just [dir='rtl'] .foo {...} for the nested elements?
Some resources about the ampersand: https://css-tricks.com/the-sass-ampersand/#aa-qualifying-based-on-context
There is no way that I know to merge selectors as requested.
As you're not allowed to change the parent selector, the only solution I see would be to use the #at-root rule.
#at-root
The #at-root rule is usually written #at-root { ... } and causes everything within it to be emitted at the root of the document instead of using the normal nesting. It's most often used when doing advanced nesting with the SassScript parent selector and selector functions.
Definition on sass-lang.
Here is an example:
[dir] .foo {
$root: '.foo';
background-image: linear-gradient(black, white);
#at-root {
[dir=ltr] #{$root} {
padding-right: 1em;
}
[dir=rtl] #{$root} {
padding-left: 1em;
}
}
}
This will compile to:
[dir] .foo {
background-image: linear-gradient(black, white);
}
[dir=ltr] .foo {
padding-right: 1em;
}
[dir=rtl] .foo {
padding-right: 1em;
}
You could create a mixin to help you with that:
#mixin dir($dir: ltr, $selector: &) {
#at-root {
[dir=#{$dir}] #{$selector} {
#content;
}
}
}
[dir] .foo {
$root: '.foo';
background-image: linear-gradient(black, white);
#include dir(ltr, $root) {
padding-right: 1em;
}
#include dir(rtl, $root) {
padding-right: 1em;
}
}
Food for thougt
If you don't have to support internet explorer, you might want to check padding-inline-end and padding-inline-start properties.
They will free you from the need to have different rules for different directions.
padding-inline-end
The padding-inline-end CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
MDN Docs - padding-inline-end
padding-inline-start
The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
MDN Docs - padding-inline-start
I want to generate multiple CSS-Files
class.css
Should contain from an configuration file (tailwindcss-like) generated utility-first CSS-Classes
.block {display:block; }
.text-center { text-align:center; }
#media (min-width: 768px) {
.md:text-center {
text-align:center;
}
}
components.css
Should contain component-based CSS-Classes
// Input
.avatar { #extend block, background($blue)}
// Output
.avatar { display: block; background-color: blue;}
Question
Is there a way to generate these separated files? I have no idea!
My way to first generate #mixins (or %placeholders, I tried both ways) from a config-file (colors, spacing,...) and afterwards in an second step, building my components.css from these #mixins is not very maintainable
I have to position the image container at the top of the page, but there is no parameter.
I have found a small snippet in the docs of fancybox3, That works for me, but not for the navigation buttons. They are still in the middle of the page:
afterShow : function( instance, current, e ) {
$('.fancybox-content').css('transform','translate3d(0px, 30px, 0px)');
}
Spacing around content is controlled by CSS padding property of wrapping element. This is the default value for element containing an image:
.fancybox-slide--image {
padding: 44px 0;
}
#media all and (max-height: 576px) {
.fancybox-slide--image {
padding: 6px 0;
}
}
You can adjust that for your likening. As you can see, this gives greater flexibility that just some js option.
In my .scss I'm using CSS3 pseudo classes. For example :
.btn:disabled {
#include assets-sprites(btn_disabled);
}
.btn.disabled {
#include assets-sprites(btn_disabled);
}
Compass combine these two declaration into one :
.btn:disabled, .btn.disabled {
background: url("img/assets.png")
}
But Internet Explorer 8 doesn't read the declaration if a CSS3 pseudo class is present in the selector (like :disabled, :checked, :not, etc).
So how can I output this into something like that ?
.btn:disabled {
background: url("img/assets.png")
}
.btn.disabled {
background: url("img/assets.png")
}
Thanks :)
You can combine placeholders and a mixin to manage this with a DRY approach:
SCSS
#import "compass";
// Generate separate CSS3 pseudo-selector / fallback selector.
//
// #param string $selector
// The CSS3 selector name, without the first colon.
// #param string $sprite
// The sprite name without the file extension.
#mixin sprite-css3-pseudo($selector, $sprite, $map: $assets-sprites) {
// CSS3 selector
&:#{$selector} {
#extend %assets_css3-map;
#include sprite-background-position($map, $sprite);
}
// IE8 fallback
&.#{$selector} {
#extend %assets-map;
#include sprite-background-position($map, $sprite);
}
}
// $<map>-sprite-base-class to customize the base class
// used when we importing the sprite map.
$assets-sprite-base-class: '%assets-map';
// Compass generates the following rule:
// %assets-map {
// background: $assets-sprites no-repeat;
// }
#import "assets/*.png";
// We have to split the CSS3 selectors of the classic selectors (the
// fallback) so we need to declare a new placeholder with the same
// content generated by Compass for the base class.
%assets_css3-map {
background: $assets-sprites no-repeat;
}
.btn {
#include sprite-css3-pseudo('disabled', 'btn_disabled');
}
.fb {
#include sprite-css3-pseudo('checked', 'fb_icon');
}
.icon-alarm {
// We can still use the regular sprite generator
#include assets-sprite('alarm');
// And our mixin :)
#include sprite-css3-pseudo('disabled', 'alarm');
}
CSS
.btn.disabled, .fb.checked, .icon-alarm, .icon-alarm.disabled {
background: url('../images/assets-sacf5a47174.png') no-repeat;
}
.btn:disabled, .fb:checked, .icon-alarm:disabled {
background: url('../images/assets-sacf5a47174.png') no-repeat;
}
.btn:disabled {
background-position: 0 -224px;
}
.btn.disabled {
background-position: 0 -224px;
}
.fb:checked {
background-position: 0 -176px;
}
.fb.checked {
background-position: 0 -176px;
}
.icon-alarm {
background-position: 0 0;
}
.icon-alarm:disabled {
background-position: 0 0;
}
.icon-alarm.disabled {
background-position: 0 0;
}
Here'es the solution, thanks to #pascalduez:
$assets: sprite-map("assets/*.png");
.btn:disabled { background: sprite($assets, user); }
.btn.disabled { background: sprite($assets, user); }
Looking at the susy site, how does it hide .secondary when getting at a breakpoint?
Taken from the GutHub source for the site (with other styles removed):
.guides, .tutorial {
.secondary { display: none; } // secondary starts hidden
#include at-breakpoint($break) {
.secondary { display: block; } // secondary becomes visible at breakpoint
}
}
try this:
#include at-breakpoint($break) {
.secondary { display: none; }
}