DTX

1) Если у вас синхронные скрипты, то достаточно подключить jQuery раньше скрипта, где она используется
2) Если скрипты асинхронные, то лучше всего использовать как AMD модуль через RequireJS (или Alameda если современный браузер)

Проблема в бордере

всмысле как определить? ты сам пишешь когда тебе нужно. к примеру:

$(function (){ ...}); или $(document).ready(function() { ... });

- начнёт работу тогда, когда будет готов DOM, за исключением картинок

$(window).load(function() { ... }); - код будет запущен когда страница будет полностью загружена, включая все фреймы, объекты и изображения

На 100% гарантированный метод только один: тег загрузки jQuery в head, а сам скрипт использующий jQuery в конец body и обернуть код в $(document).ready(function() { ... });.

Но если очень надо вынести загрузку скриптов из head, то проверить можно так:

Костыль №1

if (window.jQuery) {  
    ...
}

Костыль №2

if (typeof jQuery == 'undefined') {  
    ...
}

Потому что плотность пикселей x2

Если имеется в виду получение единого именно шрифтового файла - нельзя.
Если формат файла пофиг, главное сократить число запросов к серверу - ну можно засунуть всё в CSS в виде base64 (хотя это менее гибко и есть ограничения в старых эксплорерах).

Вот здесь можно покупать изображения со многих стоков по одной за 0.7$ шт.

...

1. Полупрозрачный голубой div, у него :after белым треугольником.

2. А еще лучше просто фон градиентом.

background: linear-gradient(135deg, #27b3c3 0%, #27b3c3 49.9%, #b8e7eb 50%, #b8e7eb 100%) no-repeat;

угол, цвета и %% укажите на свой вкус.

В reset никто не мешает использовать. Единственным минусом, может быть разве что производительность, если сбрасывать через универсальный селектор. Но в том же Буцтрапе сбрасывают и ничего...

А многим наверное привычнее верстать по старому и прописывать border-box только в нужных местах

Надо отключить защиту от ввода html тегов:

mixin whyus_item(h2)
  .item
    h2!=h2
+whyus_item('Line1\nLine2')
+whyus_item('Line1 <br /> Line2')

На третьей строке.
Хотя если это дело генерится на сервере в онлайн доступе делать подобное надо с оглядкой чтобы не получить дыру. Если же локальная обработка - то все ок.

Вот можно руководство почитать: jsman.ru/jade/#section-15
Про незаэкранировнный вывод

Не совсем понятно, что именно вам надо, но если я правильно понял - то вот: http://cubic-bezier.com
Очень удобно для подбора анимаций.

Не обижайте codepen)
Ссылка

PSDRepo

Я об этом как-то блог пост написал.

text-align: center и псевдоэлементы inline-block с отрицательными отступами
https://jsfiddle.net/trushka/24nwxndo/

Сделай так!

<div class="strike">
    <span>Hello World</span>
</div>

.strike {
        display: block;
        text-align: center;
        overflow: hidden;
        white-space: nowrap; 
    }

    .strike > span {
        position: relative;
        display: inline-block;
    }
  
    .strike > span:before,
    .strike > span:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
        height: 1px;
        background: red;
    }

    .strike > span:before {
        right: 100%;
        margin-right: 15px;
    }

    .strike > span:after {
        left: 100%;
        margin-left: 15px;
    }

пример: https://jsfiddle.net/miha8722/n3hmk70x/