TypeSource: Google Web Font inspiration in HTML & CSS. Book - Scalable and Modular Architecture for CSS. Every project needs some organization.
Throwing every new style you create onto the end of a single file would make finding things more difficult and would be very confusing for anybody else working on the project. Of course, you likely have some organization in place already. Hopefully, what you read among these pages will highlight what works with your existing process and, if I’m lucky, you will see new ways in which you can improve your process.
How do you decide whether to use ID selectors, or class selectors, or any number of selectors that are at your disposal? How do you decide which elements should get the styling magic you wish to bestow upon it? At the very core of SMACSS is categorization. There are five types of categories: Base Layout Module State Theme We often find ourselves mixing styles across each of these categories. Each category has certain guidelines that apply to it. Base rules are the defaults. Examples of Base Styles Layout rules divide the page into sections.
Book - Scalable and Modular Architecture for CSS. GitHub - kss-node/kss-node: The Node.js implementation of KSS: a methodology for documenting CSS and generating style guides. Skeleton: Responsive CSS Boilerplate. Build real-time Web apps with RethinkDB. RethinkDB is an open source database for the real-time Web.
It has a built-in change notification system that streams live updates to your application. Instead of polling for new data, you can have the database push the latest to changes to you. The ability to subscribe to streaming updates from the persistence layer can simplify your application architecture and make it easier to support clients that maintain persistent connections to your back end. RethinkDB is a schemaless JSON document store, but it also supports relational features like table joins. RethinkDB supports clustering, which makes it easy to scale. The RethinkDB query language, which is called ReQL, embeds natively into the code in which you write your application. Four CSS tips that have changed me as a man › Evan Hahn (dot com) CSS is impossibly weird.
These four tricks have helped me mitigate its weirdness and have saved me hecka time: The first thing in your CSS should be a CSS reset, which helps keep pages more consistent across browsers by overriding their default styles. Eric Meyer's CSS reset is the one I use. I'd also recommend normalize.css, which sets up a bunch of sensible defaults and fixes a bunch of subtle browser inconsistencies. The CSS box model is funky. Enter box-sizing: border-box. I add padding recklessly, not worrying that my element's going to be destroyed.
A Complete Guide to Grid. CSS Grid Layout is the most powerful layout system available in CSS.
It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items). This article was ported over from Chris House's guide, by Chris himself, who is keeping both up-to-date. CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. A Complete Guide to Flexbox. The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow. Four CSS tips that have changed me as a man › Evan Hahn (dot com) Sass vs. LESS vs. Stylus: Preprocessor Shootout.
Wielding the true power of a CSS preprocessor is an adventure.
There are countless languages, syntaxes, and features, all ready for use right now. In this article, we will be covering the various features and benefits of using three different preprocessors—Sass, LESS, and Stylus. Preprocessors produce CSS that works in all browsers. CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to CSS without breaking browser compatibility. They do this by compiling the code we write into regular CSS that can be used in any browser all the way back to the stone ages.
The most important part of writing code in a CSS preprocessor is understanding the syntax. Sass and LESS both use the standard CSS syntax. As you may have noticed, this is just regular CSS, which compiles perfectly in both Sass and LESS. It's important to note that Sass also has an older syntax, which omits semicolons and curly brackets. The syntax for Stylus is much more verbose. Learn CSS Layout. MOSTO: A lightweight framework for forms - Valdelama. Forms aren't much fun to build, I think most web designers find them pretty tedious to design and code.
For that reason I wanted to make this framework which should suit most situations where you need a form on your site. Why not just use a framework like Bootstrap or Foundation? I think both Bootstrap and Foundation are awesome frameworks but when it comes to forms I like to wrap the <input> in a <label>, and by doing that you can reduce structural HTML. It also means you forget about the for="" attribute because wrapping the <input> with the <label> gives you implicit association. End result is less code to write and easier maintenance. Apart from using less HTML, I also wanted a framework with less CSS and more emphasis on using this as your basic starter kit from which you can extend and embellish per site. 1.
The simplest, most basic form has the input below the label and the help text below the input. Code structure overview: PocketGrid Documentation. Table of Contents Quick start Here is the minimal markup you need to put in your pages: As you can see, you just have to include the pocketgrid.css (or pocketgrid.min.css) file in the <head> tag of your page and don't forget to set the viewport meta tag to manage media queries correctly on mobile.
That's all you need to work with PocketGrid! Basic rules Instead of creating grids with rows and columns, PocketGrid introduces a more flexible concept with blocks and block groups. The basic rules with PocketGrid are: Css - IE8 display inline-block not working.