CSS Explain - A tool which calculates CSS selector specificity
Example input:
li.active a:link
Example output (specificity):
| 0 | 2 | 2 |
See also: https://www.codecaptain.io/tools/css-specificity-calculator
Font Awesome 3.0 has been released
40 new icons, spinner-style rotation with CSS animations, smaller file size, possibility to sub-set the font to only include the icons you need.
The Shapes of CSS
Examples how to create dozens of shapes using pure CSS and a single HTML element.
randym/axlsx · GitHub
Axlsx is an incredible gem to generate "Office Open XML" spreadsheet files (XLSX). Does not break on large spreadsheets and supports a ton of features like graphs.
API looks mature and existing code is easy to migrate when coming from the spreadsheet gem.
The documentation of some methods is a bit out of date, but you'll find your way around the gem's code.
No support for reading files, however. :( If you want to open XLSX spreadsheets (for example to confirm your output in tests), you can use [roo](h...
Responsive & Touch-Friendly Audio Player | Codrops
A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.
Custom error pages in Rails
Basic error pages
To add a few basic styles to the default error pages in Rails, just edit the default templates in public, e.g. public/404.html.
A limitation to these default templates is that they're just static files. You cannot use Haml, Rails helpers or your application layout here. If you need Rails to render your error pages, you need the approach below.
Advanced error pages
- Register your own app as the applicatio...
CSS that lets your alarm bells ring
Harry Roberts, a youngster from the UK, wrote a comprehensive article telling you how to smell CSS rot early.
Examples:
- Undoing styles
- Magic numbers
- Qualified selectors
- Dangerous selectors
- Reactive !important
… and more.
Hack: Detect DOM node insertions using plain CSS
David Walsh from Mozilla shows how to fire 'DOM changed' events from CSS. No need for JS to observe DOM mutation events or check the DOM manually – simply put: no deprecated API, no retarding loops.
With the CSS in place you add a listener for your custom 'DOM changed' event and that's it!
navy gem: Hide empty navigation bars
navy 0.5.1+ gives empty navigation containers a CSS class .navy-empty which you can hide via
.navy-navigation
&.navy-empty
display: none
Xfce: Classic panel layout in the style of Gnome 2 or Windows XP
Xfce gives you a million options to configure your panels. Together with Xfce's sometimes arcane configuration UI, this can be a huge time waster and super-annoying if you need to get work done the same day.
This card describes how to setup a classic panel layout as you might be used to from Gnome 2 or Windows (see screenshot below). You can use this to quickly get productive in Xfce, and as a starting point for further customization.
- [One task bar on the bottom of each monitor](https://makandracards.com/makandra/...
CSS: Vertically center with display: table-cell
The classical scenario: There's a parent div element and you want to center some arbitrary child element vertically inside of it. Here's how you do it (also try this jsfiddle).
The children need to be block elements.
The HTML
<div class="parent">
<div class="child"></div>
<div class="child"></div>
...
</div>
The CSS
.parent {
display: table-cell;
vertical-align: middle;
width: 500px;
height: 300px;
}
.child {}
When .child elements are inline elements, add `display: bl...
Subtle Patterns Preview
Ever wanted to preview a pattern from Subtle Patterns on your site without the hassle of swapping out images and modifying CSS?
Subtle Patterns Preview provides a simpler way to do it.
Taming icon fonts for use in Rails views
Icon fonts like Font Awesome are infinitely scalable, look great on high-DPI displays and will give your app a modern look.
However, icon fonts can be very awkward to use compared to raster icons. Elements are given icons by giving them a special class like icon-plus or icon-home:
<span class="icon-plus">Create</span>
The icon font's stylesheet will then recognize this class and insert the icon as the element's :before style.
In practic...
Internet Explorer will download CSS files twice, if referenced via scheme-less URLs
You can use scheme-less URLs (or protocol-relative URLs) to have browsers use the current protocol (HTTP or HTTPS) when loading content referenced with such an URL.
A protocol relative URL doesn’t contain a protocol. For example,
http://stevesouders.com/images/book-84x110.jpgbecomes//stevesouders.com/images/book-84x110.jpgBrowsers substitute the protocol of the page itself for the resource’s missing protocol. Problem solved!
But:
Internet Explorer 7 & 8 will download st...
CSS3 Animated Loading Bar
Shows how to implement an animated progress bar in pure CSS, without animated GIFs, Javascript or Flash.
Large CSS box shadows can bring browsers to a crawl
Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.
Some advice:
- Be aware that by introducing fixed elements (e.g. sticky navigation bars) and large animations, you might force the browser to redraw large portions of the site when scrolling. When your fixed elements have shadows, this increases the screen area that needs to be redrawn, which might again require other...
CSS: Emulate linear gradients with inset box shadows
Why is this useful?
- You can have a background image on the same element, overlaying it with a transparent gradient.
- Since you are probably using gradients to give an element a glossy or three-dimensional feel, box shadows work much better for this. This is because linear gradients always stretch to the full size of the element (which can grow with user input), while a natural shine or shadow only highlights a fixed size on the top or bottom.
- Browser support for linear gradients is a mess. I avoid using them. In part...
CSS: Emulate borders with inset box shadows
When is this useful?
- When both parent and child elements have borders, with this technique you don't get two borders (which looks ugly). This is because child elements are rendered over inset box shadows, not inside inset box shadows.
- You want more than one border on the same element. You can have as many inset box shadows on the same element as you like, e.g. allowing you to make a picture-frame-like border.
Examples
Remember the attribute list of box-shadow is x-offset, y-offset, blur radius, shadow r...
CSS-Style
Richard Powell presents a collection of CSS styling advice that's mainly taken from SMACSS. Although at makandra we're using BEM instead of SMACSS, here's my favorites.
Do not use ID's in CSS Selectors
It is never safe to assume there will only ever be one of something on a page so do not use ID's for CSS. Id's are much better used as javascript hooks so use them for this instead.
.list {…} instead of #list {…}
Animate an interface using classes not inline styles
Inline styles added by javascript are h...
rails/turbolinks
Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.
This is similar to pjax, but instead of worrying about what element on the page to replace, and tailoring the server-side response to fit, we replace the entire body. This means that you get the bulk of the speed benefits from pjax (no recompiling of the JavaScript or CSS) without having to tail...
CSS Animations Media Queries
CSS transitions make your responsive websites smoother and more professional. It's easy and already there. Use it!
Highlight current navigation item with Staticmatic
StaticMatic is a nice tool to build simple static websites.
In case you want to have some nifty styles on the navigation item that is currently active, you can use this:
=link 'Aktuelles', :class => (current_page =~ /aktuelles/) ? 'current' : 'default'
Keep in mind that current_page gives you the full relative path of your page. raise current_path in case you're not sure.
I know there is an navigation helper out there. I did not use it and also did not want to migrate.
How to make your application assets cachable in Rails
Note: Modern Rails has two build pipelines, the asset pipeline (or "Sprockets") and Webpacker. The principles below apply for both, but the examples shown are for Sprockets.
Every page in your application uses many assets, such as images, javascripts and stylesheets. Without your intervention, the browser will request these assets again and again on every request. There is no magic in Rails that gives you automatic caching for assets. In fact, if you haven't been paying attention to this, your application is probabl...