View
Linked contentDeprecated

Vertical align anything with just 3 lines of CSS

See attached link. The gist is:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Works in all web browsers and IE9+.

Linked content

AllThingsSmitty/css-protips

A list of surprisingly clever CSS expressions for common use cases.

How to open a new tab with Selenium

Until recently, you could open a new tab via window.open when using execute_script in Selenium tests. It no longer works in Chrome (will show a "popup blocked" notification).

This is because browsers usually block window.open unless the user interacted with an element for security reasons. I am not sure why it did work via Selenium before.

Here is an approach that will insert a link into the page, and have Selenium click it:

path = "/your/path/here"
id = "helper_#{SecureRandom.hex(8)}"
execute_script <<-JAVASCRIPT
  ...

CSS: Select elements that contain another selector

CSS4 comes with :has. E.g. h1:has(b) would select all <h1> tags that contain a <b> tag.

This is implemented in no browser but the jQuery query engine already supports it as a custom extension.

Spreewald: Click on an element with a CSS selector

Spreewald 1.4.0 comes with this step:

When I click on the element ".sidebar"

We recommend to define a selector_for method in features/support/selectors.rb so you can refer to the selector in plain English:

When I click on the element for the sidebar

Spreewald: Check that a CSS selector is present on the current page

Spreewald 1.3.0 comes with these steps:

Then I should see an element ".panel"
Then I should not see an element ".sidebar"
Then I should see an element ".twitter-timeline"

We recommend to define a selector_for method in features/support/selectors.rb so you can refer to the selector in plain English:

Then I should see an element for a panel
Then I should not see an element for the sidebar
Then I should see an element for the Twitter timeline
Linked content

CSS Fontstack: An overview of web/web safe font support

Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.

If you need to install any of the widely-supported fonts listed there, you'll probably find them at www.fontpalace.com.

Linked content

Bootstrap 4 is coming

What's new

  • Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.
  • Improved grid system. We’ve added a new grid tier to better target mobile devices and completely overhauled our semantic mixins.
    Opt-in flexbox support is here. The future is now—switch a boolean variable and recompile your CSS to take advantage of a flexbox-based grid system and components.
  • Dropped wells, thumbnails, and panels for cards. Cards are a brand new co...
Linked content

Creating spheres with CSS

Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.

Linked content

Bootswatch: Paper

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.

List of Helpful RubyMine Shortcuts

Navigation

CTRL + SHIFT + ALT + N
: Search for any symbol in your application, like CSS classes, Ruby classes, methods, helpers etc.

CTRL + SHIFT + N
: Search for filename in your application (also dependencies)

CTRL + E
: Open a list of recently opened files

ALT + POS1
: Open a the navigation bar as a context menu. Allows you to quickly navigate between files.

Actions

CTRL + SHIFT + A
: Find and execute a menu actio...

How to fix: iPad does not trigger click event on some elements

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 ...

24 little known CSS facts

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.

Favorites

  • outline-offset: specify how far away from the element an outline is rendered
  • ::first-letter: matches the first letter insid...
Linked content

Material Design Lite

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.

Prelimiary impression:

I would recommend against using it at this stage, for a couple of reasons:

  • It is much less complete than you might expect from a CSS framewor...

Reverse-proxying web applications with Apache 2.4+

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:

  • Expose a local service that you cannot directly reach over the internet
  • "Change" the domain or path of a web application by rewriting them on the fly
  • Instantly change servers that respond to a name or ...

Make "rake notes" learn about Haml, Sass, CoffeeScript, and other file types

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...
Linked content

Fontawesome 4 helper classes

Fontawesome 4 ships with many useful CSS helper classes.

Enlarge Icon

Add fa-lg (133%), fa-2x, fa-3x, fa-4x or fa-5x.

Fixed-width Icon

Add fa-fw. Will give all icons the same width.

Styling Lists

Add fa-ul to a <UL> and fa fa-<icon name> fa-li to a <LI> to give the list items custom "bullets".

Bordered Icon

Add fa-border to get a border around the icon.

Spinning Icon

Add fa-spin to make any icon rotate. Suggested icons: fa-spinner, fa-refresh, fa-cog. Doesn't work in IE <10.

Ro...

Linked content

Responsive Tables in Pure CSS

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.

This website uses short-lived cookies to improve usability.
Accept or learn more