Frontendrails logo Front End Rails

Orphans and Widows in CSS

Orphans and Widows in CSS

Development Thoughts Development Thoughts 13 March 2017

When you are writing HTML content that may split over a column or a page you should consider the orphan and widow CSS properties.

Improved no results messages

Improved no results messages

Lugo Labs Lugo Labs 02 March 2017

Many times in index pages we need to show a message that there are no results to view. Usually as a results of a search, as in the example of Iconly. If you search for an icon on the top search bar, and no results our returned, the following message is shown.

Neat 2.0 Building the future of floated Sass grids

Neat 2.0 Building the future of floated Sass grids

Giant Robots Smashing into Other Giant Robots Giant Robots Smashing into Other Giant Robots 22 February 2017

Understanding different types of existing float grid systems, finding their strengths/weaknesses, and discovering something better.

Interview with Håkon Wium Lie

Interview with Håkon Wium Lie

Development Thoughts Development Thoughts 21 February 2017

Today I am more than a little excited to share an interview I conducted over email with Håkon Wium Lie.

Do responsive sites have to be so tall on mobile?

Do responsive sites have to be so tall on mobile?

Viget Viget 13 February 2017

When designing responsive sites, we tend to focus a lot on keeping content nicely formatted within all the various screen widths in the world today. This makes sense given that horizontal scrolling is not particularly user-friendly, so constraining the design to the browser's viewport width is generally a given.

Our Big Frontend Plan Revealed

Our Big Frontend Plan Revealed

GitLab GitLab 06 February 2017

Our long term plan to make GitLab as fast and performant as possible with Vue and webpack.

Ensuring CSS Animations Run and Stop Gracefully

Ensuring CSS Animations Run and Stop Gracefully

Viget Viget 12 January 2017

The standard method of pre-loading content is to show an animation, load some content, then simply stop the animation after the content loads. Simple enough, but nailing this timing for when both of those do and should happen isn't so simple.

Inline Styles: Yes or No?

Inline Styles: Yes or No?

Engine Yard Engine Yard 21 October 2016

Recently, a team I work with has been porting some existing tools written with JavaScript to a new codebase using ReactJS. We were discussing how we should handle styling, and one member suggested using inline styles.

A CSS Eulogy

A CSS Eulogy

Pusher Pusher 29 September 2016

It’s time to say goodbye to again, only this time it’s not to enemies (Internet Explorer 6 and 7), but old friends. In this talk, Mike Riethmuller (@MikeRiethmuller) gives a eulogy for some much loved design patterns and techniques we love but sadly don’t need anymore. Warning ⚠️: Mike says “This will be an emotional […]

Minimal CSS frameworks for coding demos

Minimal CSS frameworks for coding demos

Avdi Grimm Avdi Grimm 10 July 2016

On RubyTapas, I occasionally need to demonstrate web application code. I often use little Sinatra apps for this purpose, because it allows me to illustrate a web app programming concept with all the usual features like routing, sessions, and templates without switching between lots of different files. When I do this, I also like the […]

Writing Efficient CSS

Writing Efficient CSS

Pusher Pusher 06 June 2016

We all have strong opinions on CSS, whether good or bad. CSS can be really helpful, but if you don’t think about how it works before writing selectors, you can seriously harm the performance of your page. In this talk, Joe Reeve introduces us to browser implementations of CSS selectors and what that means for […]

Sass Pathways

Sass Pathways

Giant Robots Smashing into Other Giant Robots Giant Robots Smashing into Other Giant Robots 31 May 2016

Handle multiple shared Sass layouts.

You Don't Need JavaScript for That!

You Don't Need JavaScript for That!

Giant Robots Smashing into Other Giant Robots Giant Robots Smashing into Other Giant Robots 30 May 2016

CSS alternatives to common JavaScript interactions.

CSS in JavaScript

CSS in JavaScript

Pusher Pusher 25 May 2016

In this talk, Michele Bertoli goes through the main problems with CSS at scale and he shares some interesting JavaScript-based solutions, from Inline Styles to CSS Modules. Are you ready to enter the magical world of CSS in JS? This talk was part of the Front-end London (FEL) May 2016 event. [00:00:11] Introduction I’m Michele. […]

Production edge case with using a SCSS manifest file with the Asset Pipeline

Production edge case with using a SCSS manifest file with the Asset Pipeline

Reinteractive Reinteractive 03 May 2016

Today I found an interesting edge case in using SASS or SCSS in Rails with the asset pipeline. The manifest file in this Rails application was an application.scss file and was using @import statements instead of require statements. However, two of the lines were: @import "chosen/chosen.css"; @import "flowplayer/flowplayer.css"; These look innocent enough. But when the application was deployed to production, the application.css file started with @import url(chosen/chosen.css); @import url...