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? 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. Much of the purpose of categorizing things is to codify patterns—things that repeat themselves within our design. Base rules are the defaults. Examples of Base Styles Example classes. 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. You can configure sharding and replication for the cluster through the database's built-in administrative Web interface. The RethinkDB query language, which is called ReQL, embeds natively into the code in which you write your application.
A brief introduction to ReQL RethinkDB databases contain tables, which store conventional JSON documents. How ReQL works. 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. For more, check out CSS Tricks's article about box sizing. Update: The "right way" to do this stuff is now with flexbox. It's pretty well-known that you don't use tables for layout; you use CSS. Enter display: table and its buddies. Most notably, it lets you do vertical centering real nice (here's a demo): The HTML: The CSS: Sweet damn. You can't read about web development without seeing oceans of new HTML5/CSS3 features. 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 element’s children (which become Grid Items). Get the poster! Reference this guide a lot? Pin a copy up on the office wall. Buy Poster Introduction 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.
There are two primary things that inspired me to create this guide. My intention with this guide is to present the Grid concepts as they exist in the very latest version of the specification. Basics and Browser Support This browser support data is from Caniuse, which has more detail. Desktop Mobile / Tablet Important Terminology Grid Container Grid Line Grid Track.
A Complete Guide to Flexbox. Background The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) 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. Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
Basics & Terminology Get the poster! Reference this guide a lot? Display. 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: <form><label> Label text <input></label></form> 2. 3. 4. 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: Blocks have a default width of 100% Blocks must be contained in a block-group To display blocks side by side (like columns), just give them a width in percentage (for example 30% and 70% to make 2 columns) Automatic rows: blocks automatically go to a new row if the current row is full, like words in a text! Creating rows and columns: the classical way... Like most CSS grid systems, PocketGrid can create rows (using <div class="block-group">) and columns (using <div class="block">).
Css - IE8 display inline-block not working.