By default, only application.js
, application.css
and all non-JS/CSS files are precompiled into public/assets
.
If you have asset manifests in non-standard locations, declare them in your config/application.rb
:
config.assets.precompile += ['application/all.css', 'result/all.css', 'application/all.js', 'result/all.js']
This way you can also precompile files that do not have any manifest.
It might be one of the following:
application.css
) which is always empty during developmentNo one wants to cry over regression issues in views; does testing HTML and CSS have to be such a back and forth between designers and devs? Why is it that the rest of the stack can have TDD and BDD but not the presentation layer? Well, GreenOnion is here to help you get the same results on testing front-end styling that you've enjoyed in your unit and integration tests up to now.
GreenOnion records 'skins', which are snapshots of the current state of a view (or any page that a browser can navigate to). The first time that it is run on a view...
Explanation of the "bootstrap 2" base CSS.
Contains information about:
Write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more.
By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.
For my Gem Session project Holly I ran the Ironman of drag'n'drop implementations:
Things I learned:
The $.cssHooks object provides a way to define functions for getting and setting particular CSS values. It can also be used to create new cssHooks for normalizing CSS3 features such as box shadows and gradients.
For example, some versions of Webkit-based browsers require -webkit-border-radius to set the border-radius on an element, while earlier Firefox versions require -moz-border-radius. A css hook can normalize these vendor-prefixed properties to let .css() accept a single, standard property name (border-radius, or with DOM property synt...
Then "foo" should not be visibile
) doesn't reliably work in Selenium features.The step definition below lets you write:
When I click on "Foo"
This is useful in Selenium features where the element you click on is not necessarily a link or button, but could be any HTML element with a Javascript event binding.
The easiest way to get this step is to use Spreewald. If you would like to add it manually, here is the step definition:
When /^I click on "([^\"]+)"$/ do |text|
matcher = ['*', { :text => text }]
element = page.find(:css, *matcher)
while be...
Makandra cards will auto-detect the language used for syntax highlighting.
This auto-detection sometimes fails for short code snippets. In such cases you can explicitly declare the language for Github-style code blocks:
```css
body {
font-size: 12px
}
```
Will turn into this:
body {
font-size: 12px
}
To disable syntax highlighting entirely use the text
language:
```text
I am nothing without pretend
...
Consider this Sass:
.comment
width: 320px;
height: 240px;
Any textarea
with the comment
class will be sized 320 by 240 pixels. In WebKit browsers (Chrome, Safari, ...) or Firefox, this is only the initial size -- users can resize textareas to become bigger.
This is helpful to the user, but may be breaking your application layout in some cases.
If you want to disable it, don't introduce any proprietary CSS properties. Instead, set maximum width and/or height to the values of width
and height
:
.comment
wi...
Applications often show or hide elements based on viewport dimensions, or may have components that behave differently (like mobile vs desktop navigation menus).
Since you want your integration tests to behave consistently, you want to set a specific size for your tests' browser windows.
For Google Chrome, the preferred way is setting "device metrics". This allows you to configure dimensions larger than your display and enable/disable touch behavior.
Simply use register_driver
to set up...
CSS is a lot easier to write and read than clumsy XPath expressions. So when you need to use XPath, you can have Nokogiri help you out on creating it.
Simply use Nokogiri's xpath_for
:
>> Nokogiri::CSS.xpath_for('#foo')
=> ["//*[@id = 'foo']"]
>> Nokogiri::CSS.xpath_for('#foo .bar:nth-of-type(2)')
=> ["//*[@id = 'foo']//*[contains(concat(' ', @class, ' '), ' bar ') and position() = 2]"]
Since XPath is more powerful you may still need to do some hardcore XPath hacking eventually. But at least you don't need to for simple c...
Consider this HTML:
<div id="container">
<div id="actions">
<a href="#">Click me!</a>
</div>
<div id="content">
Hello Universe! Hello Universe! Hello Universe! Hello Universe! Hello Universe! Hello Universe!
</div>
</div>
If you want the actions
element to float on the left, you'd just say this in your CSS:
#actions { float: left; }
Unfortunately, any content of the content
's text will wrap underneath it:
![paja9.png](https://makandracards.com/makandra/9245-use-overflow-hidden-to-a...
If you're suffering from a huge de.yml
or similiar file, cry no more. Rails lets you freely organize your dictionary files in config/locales
.
My organization works like this:
config/locales/rails.de.yml
modified Rails boilerplate
config/locales/faker.de.yml
modified Faker boilerplate
config/locales/models.de.yml
model names, attribute names, assignable_value labelsWhen using the asset pipeline your assets (images, javascripts, stylesheets, fonts) live in folders inside app
:
app/assets/fonts
app/assets/images
app/assets/javascripts
app/assets/stylesheets
With the asset pipeline, you can use the full power of Ruby to generate assets. E.g. you can have ERB tags in your Javascript. Or you can have an ERB template which generates Haml which generates HTML. You can chain as many preprocessors as you want.
When you deploy, Rails runs assets:precompile
...
Some progress was made by browsers on implementing CSS filters like blur, greyscale or some other effects. You might already know the legacy CSS filter attribute that old IE versions used to perform DirectX transformations. Luckily these legacy filters are removed in IE10. The good news is, newest WebKit-based browsers like Chrome (18.0+) Safari and Mozilla Firefox expe...
Building CSS mobile-first is the way forward, because blah blah blah progressive enhancement blah. Problem is, Internet Explorer prior to 9 ignores anything within media query blocks, leaving those browsers with mobile styles.
Not all of us can get away with that, but thankfully, as Chris Eppstein points out, Sass 3.2 (not yet released) can generate a separate stylesheet with everything it needs to create a "desktop" look.
This page was built mobile-first where smaller width devices get a single column layout, but IE8 and below still get a...
Consider the following HTML & CSS:
<div><img src='http://makandra.com/images/makandra-ruby-on-rails.png' /></div>
^
img {
background-color: red;
}
div {
border: 1px solid black;
}
This will leave a margin of about 5px between the lower edge of the image and the containing div, although there are no paddings or margins set, and there's no whitespace. The reason is, the image will vertically align baseline
, and the space below the image is just kept for descenders (the part of letters below the basel...
Localizing a non-trivial application can be a huge undertaking. This card will give you an overview over the many components that are affected.
When you are asked to give an estimate for the effort involved, go through the list below and check which points are covered by your requirements. Work with a developer who has done a full-app localization before and assign an hour estimate to each of these points.
app
must be translated: Screens, mailer templates, PDF templates, helpe...You will find this useful when creating responsive designs that work well on small screens.
The attached Javascript gives a container different CSS classes (single_line
or multiple_lines
) depending on whether its children render on one line or multiple lines.
Initialize it with the selectors for container and children:
$(function() {
$('.navigation').countLines('a');
});
You can now use different CSS styles like this:
.navigation
&.single_line a
// styles when all anchors are rendered on the same line...
Say you want to vertically align a div
box inside a div
container. This is how you do it:
<div id="container">
<div class="box">
<span> Some text...<br />in two lines. </span>
</div>
</div>
Set the line-height to the container's (implicit) height. The container MUST have a height >= its line-height, because the line-height actually spans the area inside which .box will align vertically.
#container {
line-height: 50px;
}
Because the container's line-height is inherited by .box,...
When you add a linear gradient to an element, IE9 removes all border-radius
and inset box-shadows
. This is because you probably are doing linear gradients with this weirdo Microsoft filter:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
filter
hijacks the rendering of the entire element box, so you're out of luck. IE9 doesn't support CSS gradients.
A forward-looking workaround is to not use gradients and [emulate your gradients with box-shadows](https://makandracards.com/m...
Though the W3C even gives it as an example, no browser actually supports this CSS:
img:before {
content: "something";
}
Browsers will simply not render anything when doing that on images (Fun fact: It worked in an older version of Opera but got dropped).\
The same applies to the :after
pseudo-element.
This makes me sad.
You can try using jQuery instead.