background preloader


Facebook Twitter

Ivan Drinchev's Blog - CSS with only class names. I wanted to make a note to myself and a reference for any co-working front-end colleagues about the good old problem of structuring your stylesheets.

Ivan Drinchev's Blog - CSS with only class names

These days we anyway got rid of id selectors and attribute selectors, so the only common selector that left is the tag selector. First let me make some exceptions. If you use a front-end framework similar to React, Vue.js, etc. please use CSS Modules or whatever is the recommended way for styling with that framework.Although these days is controversial, I still use a css reset and on the contrary to the article, there should be mostly tag names selectors there.Styling markup which is not generated by you ( e.g. markdown parsed content or any plugin that adds HTML to your page ) should be an exception and should have a wrapper element around it .markdown h1, .markdown h2 { }. Grid by Example. 11 Shocking Designs Straight Out of the ‘90s. The Internet has certainly been through a lot over the past 20+ years.

11 Shocking Designs Straight Out of the ‘90s

We’ve watched web design change from the most basic of HTML markups to complex JavaScript, CSS and HTML5 coding. But remembering the past can be fun and that’s why, this Thursday, we’re throwing you back to the 90’s for a look at some of the worst (or best, depending on how you see it) website designs of the decade. Where to start with this site? It appears that if you need a drone, ATV or laser show device, you can find them all here. It’s almost like whoever made this site sneezed into a digital Pandora’s Box of random pieces of machinery and behold, an e-commerce explosion formed. 2. That nifty spotlight effect on the right-hand side of the page was a big deal back in the day, so we have to give this site props for that. 3.

Who needs Google when you can, uh, find it? A sister site to IFINDIT, go to this page if you definitely want to have a seizure. 6. 7. 8. Fullscreen Background Image Slideshow with CSS3. Image 01re·lax·a·tion Image 02qui·e·tude Image 03bal·ance Image 04e·qua·nim·i·ty Image 05com·po·sure Image 06se·ren·i·ty « Previous Demo: Rocking Letters with CSS3 & jQuery Photography by Mark Sebastian CC BY-SA 2.0 Back to the Codrops Article.

Fullscreen Background Image Slideshow with CSS3

GitHub - kamranahmedse/developer-roadmap at Practical CSS Grid: Adding Grid to an Existing Design · An A List Apart Article. Understanding and using Grid is easier than you might expect.

Practical CSS Grid: Adding Grid to an Existing Design · An A List Apart Article

The day Grid support shipped in Firefox 52, I decided on the spur of the moment to convert the basic layout of my personal site to use Grid. And it was a fairly simple process—five minutes to write the grid styles, then 15-20 spent troubleshooting. Article Continues Below Grid allows us to literally define column and row grid lines, then attach elements to those lines in any order we choose. That may sound like tables, but Grid is so much more than tables ever dreamed. It’s been decades since CSS first emerged, but it’s never contained a system anything like this. The way things used to be#section1 Before we get to the Grid, allow me to take just a moment to explain the markup structure of meyerweb’s main pages, and the positioning-and-margins approach I’ve been using for, um, about 12 years now.

Some of the names are indiosyncratic holdovers from my early-2000s view of layout and naming conventions. Besides, Grid was coming. 10 Rock Solid Website Layout Examples. Keeping It Simple Page layout is equal parts art and science.

10 Rock Solid Website Layout Examples

Creating something that’s visually attractive and unique takes an artist’s eye. However, there are several very easy to follow guidelines that you can use to create solid layouts that work for any number of cases. These principles include choosing and sticking to an alignment, structuring your whitespace properly and highlighting important elements through size, positioning, etc. Designers often stress out far too much about the layout process. In this article we’re going to take a look at ten very common layouts that you can find on countless sites across the web. If you’re a web designer, bookmark this page and come back the next time you get stuck laying out a page.

Three Boxes This is probably the most simple layout on the list. The three boxes layout features one main graphic area followed by two smaller boxes underneath. CSS Parallax Orbs. Night sky with twinkling stars - CSS3 only. Navigation Bar by Jan Kaděra.