Design articles

Mistakes to Avoid With Responsive Web Design

Mistakes to Avoid With Responsive Web Design

By Ramya Raju Nowadays, when it seems like everyone has a smartphone or tablet, the importance of creating mobile friendly websites cannot be overstated. As a result, business owners have lapped up the idea of responsive web design because it can give a complete experience to users on different platforms - from desktop computers to [...]

svg_viewport_header

Understanding the SVG viewBox and viewport

By Joni Trythall In using the <svg> element, we are establishing a fragment consisting of nested details in our document. This fragment has its own viewport and coordinate system which can seem very complex and intimidating when you are first getting started. Understanding the workspace of SVG is helpful in properly rendering your artwork, but [...]

SVG_icons_header

Animating Inline SVG Icons

By Joni Trythall I recently did some experimenting with animating inline SVG icons. In this article I will quickly review my process and discuss the joys and frustrations I ran into. The demo discussed in the article is below and works on Chrome only for the moment. Scroll down to view all the icons and [...]

Prepocessor_Architecture_header

Organizing Your CSS Code for Preprocessors

By Tim Severien CSS preprocessors are probably one of the most useful things we have right now in front-end tooling. Whether you pick Sass, LESS or any other preprocessor, they’re great because they add so many features CSS never had. But I’m not trying to convince you use preprocessors, I assume you already do. Instead, [...]

sass_each_header

Doing More with Sass’ @each Control Directive

By Scott O’Hara I recently wrote an article about the different Sass control directives and how even writing basic directives could be used to code leaner Sass. In this article, I’d like to take a closer look at the @each directive, Sass variable lists and maps. Combining these features can make for some powerful results [...]

css_grid_header

Grids in CSS3

By Tim Severien In this article, we’ll take a look at some of the new features in CSS3 that make handling grids using HTML and CSS much easier. But first let’s discuss a little history of grids in HTML and CSS to get an understanding of what made them difficult. A Short History of Grids [...]

dreamweaver_header

CSS for Beginners with Dreamweaver

By Brian Rinaldi Dreamweaver has had a long history. I recall using it heavily back in the UltraDev days, for those of you that remember that. While the tool has evolved quite a lot over the years, it remains a powerful web development IDE. Sure, everyone seems to love a lightweight code editor nowadays for [...]

bootstrap_alt_header

8 Bootstrap Alternatives

By Alex Ivanovs You’ve probably heard a lot about Bootstrap. Put simply, it is a front-end framework that helps speed up and improve building functional websites.r. The original Bootstrap (also known as Twitter Bootstrap) was the project of two Twitter employees, Mark Otto and Jacob Thornton. Twitter Bootstrap is great, for developers. It allows us [...]

svg_header

Learning SVG

By Joseph Wegner In my book, SVG is classified as a mythical unicorn super technology. SVG shares this category with other technologies like RegExp, vim, and OpenGL. The common traits between each of these technologies is that they are incredibly useful when used correctly, but incredibly difficult to use correctly. All three pack some serious [...]

Picture showing a magazine layout with columns of different heights

CSS Regions Matter

By Sara Soueidan I wrote this article before the news came out that Google decided to pull Regions out of Blink, which, in my opinion, is a big loss for the web community. So, even though the content of the article may go in vain, I think it’s still worth sharing why I think CSS [...]

Top