Free Bootstrap theme resembling Material Design.
Bootswatch offers Sass and Less files, so the theme can easily be integrated into your usual Rails application.
Implements only Bootstrap features which means that some Material stuff is missing, but also that you can easily use or replace the theme.
Does not come with extra JavaScript; some effects like button click ripples are implemented via CSS.
Also check out their other themes which can be used in a similar fashion.
CTRL + SHIFT + ALT + N
CTRL + SHIFT + N
CTRL + E
ALT + POS1
CTRL + SHIFT + A
iPads will not trigger click events for all elements. You can fix that, but you don't want to know why.
Example: Capturing clicks on table rows (use case would be clicking the 1st link inside it for better UI). Consider this setup:
<table>
<tr>
<td>hello</td>
</tr>
</table>
$(document).on('click', 'tr', function () {
alert('row clicked')
});
While this works on a desktop browser, clicking the row/cell on an iPad will just do nothing.
Turns out, the iPad will only trigger such events for …
This blew my mind today:
Please make sure to check browser support for CSS features on Can I Use and the Mozilla Development Network before using.
outline-offset
: specify how far away from the element an outline is rendered ::first-letter
: matches the first letter insid…CSS (+ some Javascript) framework, implementing Google's material design for static web pages.
Can be used for plain websites without requiring a full blown Javascript framework, unlike the (also excellent) Polymer paper elements, or Angular material.
I would recommend against using it at this stage, for a couple of reasons:
Insanely detailled guide about controlling copy & paste behavior using web technology in 2015.
Note that you can now trigger a copy action through Javascript, no Flash required.
Note: Making a reverse proxy with nginx is much more straightforward.
A reverse proxy is a "man in the middle" server that tunnels requests to another server. You can use for things like:
Rails comes with a Rake task notes
that shows code comments that start with "TODO", "FIXME", or "OPTIMIZE".
While it's generally not good practice to leave them in your code (your work is not done until it's done), in larger projects you will occasionally have to use them as other parts of the application that you depend upon are not yet available.
To keep track of them, run rake notes
. Its output looks something like this:
$ rake notes
app/controllers/fron...
Fontawesome 4 ships with many useful CSS helper classes.
fa-lg
(133%), fa-2x
, fa-3x
, fa-4x
or fa-5x
.fa-fw
. Will give all icons the same width.fa-ul
to a <UL>
and fa fa-<icon name> fa-li
to a <LI>
to give the list items custom "bullets".fa-border
to get a border around the icon.fa-spin
to make any icon rotate. Suggested icons: fa-spinner
, fa-refresh
, fa-cog
. Doesn't work in IE <10.Clever hack using data-
attributes to assign labels to cells.
It's still a massive duplication of code (labels), but better and more lightweight than most solutions I've seen for this surprisingly tricky problem.
If you want to rotate text, you can use CSS transforms in somewhat modern browsers to rotate the container element.
However, if you need to support IE8, transform
is unavailable (if need only IE9 support, ignore the following and use -ms-transform
).
Here is a solution that worked for me:
<div class="my-element">Hi!</div>
.my-element {
display: inline-block;
transform: rotate(90deg);
-ms-writing-mode: tb-rl;
-ms-transform: none;
}
This way, browsers will use CSS transforms when available – w…
Often times you want to give a bunch of elements the same style, except for the last. For example borders or margins.
You probably commonly used the :last-child
CSS meta selector like so:
.foo {
border-bottom: 1px dashed #000;
}
.foo:last-child {
border-bottom-width: 0;
}
However, this only works when an element is the last child of its parent. Any other siblings which are unrelated to your case will break it.
Instead, prefer using the +
sibling selector. It applies to the element following the other.
```
.foo + .foo {
…
The debate between using mixins or extends in Sass has been heating up recently. From the surface it appears they both provide solid benefits in helping us write consistent and modular code. However, the critics are out and extends specifically have come under fire. But why?
Interesting results: Although mixins create more code than extends, the gzipped CSS is smaller and somewhat faster to evaluate for current browsers.
Note: The information in this card might be outdated.
The Capybara API is somewhat hard for parse for a list of methods you can call on a Capybara node. Below you can find such a list. It's all copied from the Capybara docs, so all credit goes to the Capybara committers.
When you talk to Capybara from a Cucumber step definition, you always have page
as the document root node, or whatever you scoped to by saying within(selector) { ... }
. You can select child notes by cal…
Use it like this for inline icons:
<span class="flag-icon flag-icon-de"></span> Germany
They also work as block elements:
<div class="flag-wrapper">
<div class="flag flag-icon-background flag-icon-de"></div>
</div>
This jasmine plugin helps with testing DOM manipulation in two ways:
toBeVisible()
or toHaveCss(css)
<body>
and clean up afterwards.Crazy hack. Might be useful one day.
The code required has since been extracted into a library.
jQuery comes with .animate()
that lets you transition some CSS selectors:
function floatIn($element) {
$element.css({ 'opacity': 0, 'margin-top': 200px });
$element.animate({ 'opacity': 1, 'margin-top': 0 }, { duration: 500 });
}
The animation is implemented using setInterval
and Javascript. This works great, but it's not as smooth as a CSS transition.
Fortunately the animate
API can be mapped almo…