nekitk

CodePen Collection

Page Layout

1. Simple page layout
2. Animating grid (FireFox only)
3. Using instead of Bootstrap grid

Items list variations

4. Basic items list
5. Using explicit and implicit properties together

ai

Amplifr Landings Rules

Amplifr’s rules for landing pages created by outsource.

Requirements

A-Ostrovnyy

// Giant unsorted class
/*
* Some sprcific rules better put in global scope
* Use comments to describe sections of class. Example: box-model, typgraphy ...
*/
 &__button-input {
    appearance: none;
    box-sizing: content-box;
    font-family: "ddg-serp-icons";
    speak: none;

anschaef

/* -------------------------------------------------------------------------- */
// All Bootstrap 4 Sass Mixins [Cheat sheet]
// Updated to Bootstrap v4.5.x
// @author https://anschaef.de
// @see https://github.com/twbs/bootstrap/tree/master/scss/mixins
/* -------------------------------------------------------------------------- */

/*
// ########################################################################## */
// New cheat sheet for Bootstrap 5:

tomhodgins

Element/Container Queries Reading List

Written by me

The Edge of CSS slides

• The Edge of CSS slides from talk given for DublinCSS, April 20 2017

CSS Element Queries Spec

n0ts

#!/bin/bash

for c in $(brew cask list); do
    info=$(brew cask info $c)
    installed_ver=$(echo "$info" | cut -d$'\n' -f1 | tr -d ' ' | cut -d':' -f 2)
    current_ver=$(echo "$info" | cut -d$'\n' -f3 | cut -d' ' -f 1 | rev | cut -d'/' -f 1 | rev)
    if [ "$installed_ver" != "$current_ver" ]; then
        echo "$c is installed '$installed_ver', current is '$current_ver'"
        brew cask reinstall $c
    fi

ravibhure

In your local clone of your forked repository, you can add the original GitHub repository as a "remote". ("Remotes" are like nicknames for the URLs of repositories - origin is one, for example.) Then you can fetch all the branches from that upstream repository, and rebase your work to continue working on the upstream version. In terms of commands that might look like:

Add the remote, call it "upstream":

git remote add upstream https://github.com/whoever/whatever.git

Fetch all the branches of that remote into remote-tracking branches, such as upstream/master:

git fetch upstream

akella

=force-new-lines-for-long-words
	-ms-word-break: break-all
	word-break: break-all
	word-break: break-word
	-webkit-hyphens: auto
	-moz-hyphens: auto
	hyphens: auto

iAdramelk

Английская версия: https://evilmartians.com/chronicles/bootstrap-an-intervention

Вводная часть

У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:

1. Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.

2. Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент h1.title, на него сработают все правила для тегов h1 и все правила для класса .title. Так как весь html состоит из тегов, то правил которые п

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent