https://www.youtube.com/watch?v=xNqs_S-zEBY#t=155 The design philosophy described in the video emphasizes a profound understanding of space, both physical and digital, paralleling the architectural vision of Frank Lloyd Wright. By viewing the screen as a viewport into a vast virtual landscape, we can transcend the limitations of traditional UI design, allowing for a more immersive and intuitive user experience. Expanding the Design Canvas In this approach, the design canvas extends beyond the confines of a flat screen. It recognizes that our digital environments can emulate the depth and complexity of the physical world. Just as Wright’s architecture considers the arrangement of rooms […]
OOCSS Principles, why even bother?
Object-Oriented CSS (OOCSS) is a methodology that applies object-oriented principles to CSS to enhance both the performance and maintainability of stylesheets. By encouraging code reuse and modular design, OOCSS seeks to reduce repetition and streamline development, making stylesheets easier to scale and maintain. Key Principles of OOCSS Separation of Structure and Skin Structure refers to properties like width, height, margins, padding, and positioning. Skin refers to visual properties like colors, fonts, borders, and shadows. By separating these, you can reuse structure-related styles across various elements while applying different skins to customize their appearance. Separation of Containers and Content Styles should […]
EMMET Plugin – “Lorem Ipsum” Generator
This little plugin that I'm currently using along with my Sublime Text editor for Window is called EMMET. It has cut in half the amount time it takes me to code HTML & CSS. It comes with a large number of coding features and shortcuts but when you combine that with a "Lorem Ipsum" generator, it makes this a great design tool. I could spend several articles explaining in detail all of EMMET's features so I'm just going to focus on the "Lorem Ipsum" Generator. What is "Lorem Ipsum?" Chances are that if you are a web developer, you are already […]
Sass vs. SCSS: which syntax is better?
Since the creation of Sass nearly 5 years ago, it has been plagued by many levels of controversy. It billed itself as "a better CSS" and added brand new features unheard of to CSS authors such as variables, nesting and mixins. Sass also introduced an entirely different indentation-oriented syntax and a brand new perspective on how to author CSS. The Sass syntax The indented syntax of Sass was inherited from its first-born brother Haml. And while Sass and Haml once got along – Hey, they even shared the same Ruby Gem! – dissension in the family caused the two languages […]
Design Form and function as One Unit
To compare and contrast the philosophies of Louis Sullivan and Frank Lloyd Wright regarding the relationship between form and function in architecture, let's break down the key points and elaborate on their significance: Louis Sullivan: "Form Follows Function" Core Principle: Sullivan famously stated that "form ever follows function," emphasizing that the design of a building should be primarily guided by its intended use. In Sullivan's eyes, function was paramount, and aesthetic qualities should naturally evolve from this primary function. Architectural Clarity: For Sullivan, this principle meant that the structure of the building should clearly express its purpose. For example, the […]
OOCSS
OOCSS (Object-Oriented CSS) is a methodology for writing scalable, maintainable, and reusable CSS. Introduced by Nicole Sullivan, OOCSS encourages developers to think of their CSS as objects, promoting separation of structure and skin, as well as modular design principles. Key Principles Separation of Structure and Skin:OOCSS distinguishes between the structural (layout-related) and skin (visual styles like colors, fonts, or backgrounds) properties of an element. This ensures better reusability by enabling designers to update visual styles independently of the layout. Example: .box { padding: 20px; border: 1px solid #ccc; } .box-skin { background-color: #f4f4f4; color: #333; }CSS Separation of Containers and […]
CSS Gradients
Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Let's go through it all. Gradients are background-image While declaring the a solid color uses background-color property […]
SASS
SASS is css on steroids. I could say SASS is the natural evolution of CSS into a formal programming language and it falls somewhere in the middle. Why use SASS? Faster coding mixin Better organization Nesting @media The ability to use math operators, variables, functions and control directives Encoding Output style […]
CSS Clearfix
[…]
jQuery noConflict Wrappers
The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link. In the noConflict() mode, the global $ shortcut for jQuery is not available, so you can still use: jQuery(document).ready(function(){ jQuery(#somefunction) ... }); but the following will either throw an error, or use the $ shortcut as assigned by another library. $(document).ready(function(){ $(#somefunction) ... }); However, if you really like the short $ instead of jQuery, you can use the following wrapper around your code: jQuery(document).ready(function($) { // Inside of this function, $() […]
Update Node.js Version
I was recently installing a utility via NPM when I learned that my version of Node.js itself was out of date. No worries -- simply upgrade my Node.js install and move forward. Of course I could just hit nodejs.org and get the new image, but figured there had to be an easier way. It turns out there is -- you can upgrade your local Node.js with NPM: sudo npm cache clean -f sudo npm install -g n sudo n stable The n package represents a Node helper, and running the last command upgrades node to the latest stable version. Instead […]
How to repeat a background SVG image in Internet Explorer 10
For whatever reason, Internet Explorer 10 does not support the repeating of SVG-based background images out of the box. That is, not unless the markup is changed a bit. Here is an example of the<svg> element inside an SVG file: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 50" enable-background="new 0 0 149 50" xml:space="preserve"> We need to make Internet Explorer 10 preserve the aspect ratio by slicing the image accordingly. For this to happen,preserveAspectRatio="none slice" should be added to the <svg>like so: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 50" enable-background="new 0 0 149 50" xml:space="preserve" […]