Awebdesign's Blog

SASS — для чайников — настройка

Posted in CSS, Видео, уроки CSS3 by awebdesign on 18.09.2016

sass_dreamweaver

Здравствуйте! Это краткая инструкция по настройке рабочей среды под SASS для самых тупых! (вроде меня)

Если не получилось разобраться с программами типа Compass, Bourbon и других, если вы работаете на Windows, если ничего не помогает — хорошая новость! Dreanweaver, начиная с версии CC, работает с SASS без каких-либо проблем! Все так же просто, как и написание обычных css файлов вместе с Дримвивер.

Для начала, конечно, устанавливаем Ruby on Rails для Windows, качаем здесь: http://rubyinstaller.org/downloads/. Кстати — самый простой способ обновить Ruby, это скачать последнюю версию и установить заново.

Далее открываем Dreamweaver CC или выше.

Затем ищем консоль. Нажмите Старт (кнопка Виндоус внизу слева, через которую вы отключаете компьютер), там в поисковой строке наберите Command Prompt — как только начнете набирать — программа высветится в виде иконки — черный экран с белыми буковками C:\_.

Я прилагаю видео-урок, он на английском, но объясню, как это работает. Например, у вас есть проект — какая-то папка на компьютере с файлами. В проекте есть папка css, где вы держите все свои листы стилей. Создайте рядом папку sass, то есть если корень — папка html, то в ней должны быть 2 папки — css и sass. Sass — папка для ваших scss-файлов.

Теперь нужно сказать Ruby, чтобы он следил за папкой sass и все изменения применял к папке css. Если вы создадите файл style.scss, то после генерации листа стилей в папке css появится файл style.css.

Естесственно, в html-файле вы привязываете style.css, как в обычном случае.

Итак, чтобы попасть в Command Prompt в нужную директорию, сначала нужно туда перейти, так как по умолчанию Command Prompt у вас открывается в C:\Users\Admin. Для этого набираем в черном окошке:
pushd d:\ваш_диск\папка_проектов\проект

Например у меня это выглядит так:
pushd d:\DATA E\2016\sitename

Далее пишем в Command Prompt:
sass —watch sass:css

Эта строка так и переводится — сасс —смотри за sass:css.

при условии, что в директории где мы сейчас находимся есть папки sass и css.

И все — октрываем в Дримвивере файлы scss и правим. Если после обновления html-файла в браузере изменений не видно, то откройте Command Prompt и проверьте — возможно, вы сделали какую-то ошибку при написании стилей в scss.

Ну и видео, чтобы стало еще понятнее:

jQuery slider — слайдер картинок во весь экран

The Expressive Web, все самые последние достижения HTML5 и CSS3 в реальном времени

Expressive Web - последние достижения HTML5 & CSS3

CSS3-анимацию можно посмотреть на сайте Expressive Web здесь.

Научиться делать покадровую CSS3-анимацию можно здесь.

Чтобы просматривать различные свойства CSS3, кликайте на пункты меню слева.

Когда откроете вкладку «CSS3 Media Queries» попробуйте поменять размер окна браузера — на маленьком размере вы должны получить бургер.

В CSS3 Shadows нужно нажимать на «лампочки», чтобы поменять направление тени солнечных часов.

CSS3 Transforms: после того, как бомба взорвется, потаскайте ползунки справа вверху. Первый искажает кусочки взорванной бомбы в двухмерном измерении. Второй крутит их в 3D (только сделайте кусочки нормального размера, чтобы было видно).

Кроме того в будущем мы сможем беспрепятственно вставлять аудио и видео на сайты, а также хранить информацию на клиентсой стороне. Web Storage — это почти как Cookies, только в отличие от них данные не высылаются на сервер при каждом обращении к сайту, не имеют ограничений в размере. Вы можете делать интерактивные игры, и вся получаемая от клиента информация (действия, количество шагов и пр.) будут сохраняться только посредством самого HTML.

Покадровая анимация HTML5 и CSS3 — урок

(Перевод Виктории Шидловской статьи Louis Lazaris в Smashing Magazine — An Introduction To CSS3 Keyframe Animations)

Покадровая анимация CSS3 и HTML5

Наверное, вы уже слышали о CSS3-анимации. Спецификация была разработана пару лет назад и, как показывает время, становится технологией будущего. Это элегантный способ решить проблему анимации в вебе.

Продолжение статьи здесь.

Boilerplate — как собирать сайты на HTML5 уже сейчас!

HTML5 Boilerplate - собирай сайты на HTML5 сейчас!

Boilerplate — это BADASS HTML/CSS/JS template (думаю, все поняли :)), с помощью которого вы можете собирать полнофункциональные интерактивные сайты на HTML5 и с уверенностью пользоваться всеми тегами HTML5!

Раньше я писала о том, как делать сайты, чтобы они были на острие новых технологий для самых последних версий браузеров, а также для мобильных и тач-скрин устройств, но при этом хорошо интерпретировались старыми браузерами и нашим «любимым» IE.

Для каждого решения требовались свои уловки на ява-скрипте.

HTML5 Boilerplate содержит в себе, как я понимаю, все необходимые javascript-уловки, какие только могут быть, не нужно больше тратить часы и сутки на то, чтобы заставить сайт работать в Эксплорере.

Вот, что они пишут сами о себе:

Почему HTML5 Boilerplate это круто:

Кроссбраузерность (да-да, IE6 тоже);

HTML5-поддержка. Используйте любые тэги уверенно;

Оптимальное кэширование и компрессия для совершенного отображения сайта;

Лучшие установки по умолчанию;

Оптимизация для мобильных устройств;

Прогрессивное развитие и высокое качество деградации (то есть – все самое лучшее в новых браузерах и при этом в старых браузерах выглядит тоже прекрасно);

Специальные классы для IE для максимального контроля кроссбраузерности;

Управляемые .no-js и .js классы;

Хочешь написать тестовый сайт, но лень? Полностью готовый набор ждет тебя.

В общем, качать всем!

Горизонтальная прокрутка с ява-скрипт 4

Закончила свой сайт с горизонтальной прокруткой колесиком мыши и перетаскиванием – можете посмотреть и поскроллить здесь: http://awebdesign.ru

Сайт собран на основе урока Горизонтальная прокрутка с ява-скрипт 3, но так как использованы вместо текста картинки, к тому же эти изображения динамически меняют размер в зависимости от размеров окна браузера, то решила написать маленький тьютор по этому поводу.

Итак, смысл в том, что мы создаем список, пунктами которого являются изображения. И заставляем этот список прокручиваться горизонтально.

CSS

Стили для списка и его пунктов:

.in {
width: 7400px;
list-style: none;
padding: 0;
margin: 0;
}

.in li {
float: left;
margin: 0;
padding: 0;
}

Ширина списка класса in (7400px) – это ширина вашей горизонтальной страницы. К сожалению я не нашла способа динамически менять эту ширину в зависимости от суммы ширин всех изображений, возможно, вы найдете его сами. В противном случае нужно вручную настроить эту ширину в зависимости от количества изображений. Если, как в моем случае, изображения меняют свой размер динамически, то и ширина этого списка будет меняться, поэтому желательно тестировать страницу с максимальными размерами изображений, иначе последние в списке картинки «прыгнут» вниз. Если высота монитора не позволяет провести такой тест, оставляйте в ширине «запас».

jQuery

Для начала нужно подгрузить на страницу библиотеку jQuery и скрипт прокрутки:
(Ниже вы можете скачать исходные файлы вместе с ява-скриптами)
Скрипт, который нужно поставить в <header>:

<script charset="utf-8">
$(document).ready(function () {
$('#timeline').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function (event) {
$(this).data('down', false);
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}

}).mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 100);
}).css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
});

$(window).mouseout(function (event) {
if ($('#timeline').data('down')) {
try {
if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
$('#timeline').data('down', false);
}

} catch (e) {}
}
});

</script>

Timeline – это div, который содиржит список класса in. Именно этот див и прокручивается ява-скриптом.

HTML

Вкратце разметка выглядит таким образом:

<div>
<ul>
<li>
<img src="http://awebdesign.ru/img/grad.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#">
<img src="http://awebdesign.ru/img/origami_fish.jpg" class="source-image" alt="" />
</a>
</li>
<li>
<img src="http://awebdesign.ru/img/grad_mezhdu.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#" >
<img src="http://awebdesign.ru/img/origami_lily.jpg" class="source-image" alt="" />
</a>
</li>
</ul>
</div>

О том, как менять размеры изображения в зависимости от размеров окна браузера можете прочитать здесь:
Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

Скачать исходные файлы: http://awebdesign.ru/tutors/source_files.zip

Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

В комментариях пришел вопрос, можно ли динамически менять размер картинки в зависимости от размера браузера, как здесь: alexandergusev.com

Специально написала мини-тьютор, чтобы вы посмотрели, как это делается.

Пример здесь.

Попробуйте изменить размер браузера, и вы увидите, что размер картинки тоже меняется.

(Изображение в .png с прозрачностью, так что IE плохо его рендерит, с обычным прямоугольным изображением будет все в порядке в любом браузере.)

Итак, ява-скрипт динамического изменения размеров изображения:

<script type="text/javascript">
$(document).ready(function() {
var $winheight = $(window).height(); 

$(".source-image").attr({ height: $winheight });
$(window).bind("resize", function(){
var $winheight = $(window).height();
$(".source-image").attr({ height: $winheight });
});
});
</script>

Код очень простой. Класс .source-image относится к нашему изображению. Достаточно в коде HTML присвоить этот класс объекту img.

<img class="source-image" src="http://awebdesign.ru/tutors/img/fish.png" alt="" />

Не забудьте в header-е страницы прописать ссылку на jQuery, в моем случае ссылка на удаленный сервер:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 

type="text/javascript" charset="utf-8"></script>
%d такие блоггеры, как: