Stubbornella » Blog Archive » Object Oriented CSS, Grids on Github
How do you scale CSS for millions of visitors or thousands of pages? Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.
Related cards:
Stubbornella » Blog Archive » Overflow – a secret benefit
Overflow does some cool things you should know about.
CSS Grid Display allows defining number of grid columns based on child width
An element with display: grid can define its grid-template-columns based on (preferred) child width using the repeat function with auto-fill or auto-fit, like so:
grid-template-columns: repeat(auto-fit, 100px)
auto-fill and `...
Mike On Ads » Blog Archive » Using your browser URL history to estimate gender
One of the things that I always wanted to do but never got around to was to analyze a user’s browsing history to estimate age and gender.
Ruby, Rails, Web2.0 » Blog Archive » Great Ruby on Rails REST resources
I have been playing around with RESTful Rails recently. Below is my collection or Rails REST howtos, tutorials and other resources I have found so far.
SASS: The Better, More Powerful CSS - Intridea Design Blog
I am a huge fan of SASS (Syntactically Awesome Stylesheets) for styling Rails applications. I have been using it on all of my projects for quite a while now and have developed some great techniques that make it much easier to organize, write, and ...
Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools
tl;dr
In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:
- Display size and lines along with labels
- Changing their attributes
- Change how overlay is colored and fastl...
Generating and streaming ZIP archives on the fly
When your Rails application offers downloading a bunch of files as ZIP archive, you basically have two options:
- Write a ZIP file to disk and send it as a download to the user.
- Generate a ZIP archive on the fly while streaming it in chunks t...
Use different CSS depending on whether elements render on the same line or multiple lines
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 o...
Grid by Example: a website about CSS Grid
Rachel Andrew has built a website about CSS Grid.
- Video tutorials
- More than 30 layout examples for feature demonstration
- Layout patterns for copy-paste use
- All grouped by topic: "Placing items onto the g...
Generate CSS Sprites on the Fly with Lemonade
Lemonade’s goal as a sprite generator is to be incredible easy to use, so you’ll use ist for every project—just because there’s no overhead. It needs no configuration, no Rake task, no Photoshop, just a little change in your Sass or SCSS files.