hint.css - A tooltip library in CSS
A tooltip library that does not use Javascript. Works in IE9+.
This library (or the technique used by it) could be a great choice for projects with a lot of tooltips, which are hard to do fast with Javascript.
Test that a form field is visible with Cucumber/Capybara
Spreewald now comes with a step that tests if a form field is visible:
Then the "Due date" field should be visible
But the "Author" field should not be visible
The step works by looking up the field for the given label, then checks if that field is hidden via CSS (or Javascript).
It is not currently tested if the label is visible or hidden. For this see: [Check that an element is visible or hidden via CSS with Cucumber/Capybara](https://makandracards.com/makandra/1049-check-that-an-elem...
Behave.js
Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. Features include:
- Custom Code/Behavior Fencing
- Hard and Soft Tabs
- Auto Open/Close Parenthesis, Brackets, Braces, Double and Single Quotes
- Auto delete a paired character
- Overwrite a paired character
- Multi-line Indentation/Unindentation
- Automatic Indentation
daylerees/colour-schemes · GitHub
Awesome color schemes for RubyMine, Sublime Text 2 and other editors.
To install the themes into your Rubymine, copy intellij-themes/*.xml from the repository to your local ~/.RubyMine40/config/colors. Then restart RubyMine.
Enjoy!
Detect effective horizontal pixel width on a mobile device with Javascript
So you want to find out how many horizontal pixels you have available on a mobile device. This is super difficult because:
- Modern mobile devices have high-density displays where 1px in your CSS e.g. corresponds to 2.25, 4, ... physical pixels on the screen hardware.
- Difficult APIs
- Inconsistent APIs
- Screen orientation can change when the user rotates h...
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...