Tag Archives: css

Infographic: The Evolution of Web Design

26 Years. Over a quarter century. That’s how long it’s been since the publication of the first website in 1991, info.cern.ch. That’s right. That right there is a link to the very first website ever published. Since then we’ve created banner ads, pop-ups, CAPTCHAs, social media, and countless layers of the front end tech stack we enjoy today with HTML5, CSS, and JavaScript. Let’s also ponder what trends web design will follow during the next quarter century. We are definitely getting a VR enabled web. Check out the VRVCA, a consortium of venture capital funds, including HTC and NVIDIA, who…

The post Infographic: The Evolution of Web Design appeared first on The Daily Egg.

Link: 

Infographic: The Evolution of Web Design

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

Earlier this year, support for CSS grid layout landed in most major desktop browsers. Naturally, the specification is one of the hot topics at meet-ups and conferences. After having some conversations about grid and progressive enhancement, I believe that there’s a good amount of uncertainty about using it. I heard some quite interesting questions and statements, which I want to address in this post.

Progressively enhanced CSS Layout, with Flexbox and CSS Grid.

“When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.

The post Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid appeared first on Smashing Magazine.

View original:  

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

Building Pattern Libraries With Shadow DOM In Markdown

Some people hate writing documentation, and others just hate writing. I happen to love writing; otherwise, you wouldn’t be reading this. It helps that I love writing because, as a design consultant offering professional guidance, writing is a big part of what I do. But I hate, hate, hate word processors.

Documenting Components In Markdown With Shadow DOM

When writing technical web documentation (read: pattern libraries), word processors are not just disobedient, but inappropriate. Ideally, I want a mode of writing that allows me to include the components I’m documenting inline, and this isn’t possible unless the documentation itself is made of HTML, CSS and JavaScript. In this article, I’ll be sharing a method for easily including code demos in Markdown, with the help of shortcodes and shadow DOM encapsulation.

The post Building Pattern Libraries With Shadow DOM In Markdown appeared first on Smashing Magazine.

From: 

Building Pattern Libraries With Shadow DOM In Markdown

Building Production-Ready CSS Grid Layouts Today

Industries often experience evolution less as slow and steady progress than as revolutionary shifts in modality that change best practices and methodologies seemingly overnight. This is most definitely true for front-end web development.

Building Production-Ready CSS Grid Layouts Today

Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways.

The post Building Production-Ready CSS Grid Layouts Today appeared first on Smashing Magazine.

View original article: 

Building Production-Ready CSS Grid Layouts Today

Fluid Responsive Typography With CSS Poly Fluid Sizing

Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.

Fluid Responsive Typography With CSS Poly Fluid Sizing

In this article, we are going to take it to another level. We are going to examine how to create scalable, fluid typography across multiple breakpoints and predefined font sizes using well-supported browser features and some basic algebra. The best part is that you can automate it all by using Sass.

The post Fluid Responsive Typography With CSS Poly Fluid Sizing appeared first on Smashing Magazine.

Original article: 

Fluid Responsive Typography With CSS Poly Fluid Sizing

Jekyll For WordPress Developers

Jekyll is gaining popularity as a lightweight alternative to WordPress. It often gets pigeonholed as a tool developers use to build their personal blog. That’s just the tip of the iceberg — it’s capable of so much more!

Jekyll For WordPress Developers

In this article, we’ll take on the role of a web developer building a website for a fictional law firm. WordPress is an obvious choice for a website like this, but is it the only tool we should consider? Let’s look at a completely different way of building a website, using Jekyll.

The post Jekyll For WordPress Developers appeared first on Smashing Magazine.

Visit link:  

Jekyll For WordPress Developers

It’s Time To Start Using CSS Custom Properties

Today, CSS preprocessors are a standard for web development. One of the main advantages of preprocessors is that they enable you to use variables. This helps you to avoid copying and pasting code, and it simplifies development and refactoring.

It's Time To Start Using CSS Custom Properties

We use preprocessors to store colors, font preferences, layout details — mostly everything we use in CSS. But preprocessor variables have some limitations.

The post It’s Time To Start Using CSS Custom Properties appeared first on Smashing Magazine.

This article is from:

It’s Time To Start Using CSS Custom Properties

Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride

What a busy week! To stay on top of things, let’s review what happened in the web development world the last few days — from browser vendors pushing new updates and building new JavaScript guidelines and security standards to why we as web professionals need to review our professional pride. How can we properly revoke certificates in browsers, for example? And how can we build accessibility into a style guide? Let’s take a look.

Web Development Reading List 176

Safari 10.1 was announced a while ago already, and this week it finally came to Macs and iOS devices around the world. The new Safari version ships CSS Grid Layouts, fetch(), IndexedDB2.0, Custom Elements, Form Validation, Media Capture, and much more.

The post Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride appeared first on Smashing Magazine.

Original link:  

Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride

How to Setup Google AMP Webpages with Google Analytics Tracking

Google Amp and Analytics

If you have been following Google’s changes recently, you may have noticed that they became obsessed with mobile web. And there are a couple of strong reasons to support that. According to Search Engine Land, Google has officially confirmed that mobile search surpassed desktop back in 2015. Moreover, in October 2016, Google announced mobile-first indexing which focuses on prioritizing the mobile version of a website’s content over the desktop version when assigning search rankings. This obsession led to the introduction of Accelerated Mobile Pages (also known as AMP) which are primarily designed to provide the mobile user with an immersive,…

The post How to Setup Google AMP Webpages with Google Analytics Tracking appeared first on The Daily Egg.

View original – 

How to Setup Google AMP Webpages with Google Analytics Tracking

An Introduction To Building And Sending HTML Email For Web Developers

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

An Introduction To Building And Sending HTML Email For Web Developers

Not much has changed in email design. In fact, it has gotten worse. With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email.

The post An Introduction To Building And Sending HTML Email For Web Developers appeared first on Smashing Magazine.

Excerpt from – 

An Introduction To Building And Sending HTML Email For Web Developers