Рубрика «sass» - 2

в 7:00, , рубрики: autoprefixer, gulp, phpstorm, postcss, sass, верстальщик, верстка сайтов, Разработка веб-сайтов

Добрый день

Так сложилось, что возникла необходимость подготовить единую рабочую среду (workflow) для всех верстальщиков в группе на ОС Windows. Основная цель — это в минимальные сроки передать минимум необходимых знаний всем участникам группы. Основная проблема была в том, что многие не знакомы с unix-системами и понятия не имеют, как завести тот же SASS на ОС Windows. Поэтому было принято решение составить ознакомительную статью (пошаговую инструкцию) по настройке рабочей среды.

По совету коллег решил выложить ее в открытый доступ. Думаю, начинающим верстальщикам это пригодится, т.к. когда-то я потратил немало времени, чтобы прийти к простым истинам.

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

Итак начнём!
Читать полностью »

в 14:14, , рубрики: coffeescript, css, haml, html, javascript, parallax, sass, scss, Разработка веб-сайтов

image
Рисунок используемый для parallax эффекта. Автор Patryk Zabielski
Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).
Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.
Финальное демо
Читать полностью »

в 9:59, , рубрики: css, html, motion ui, sass, zurb, анимация, библиотека, Блог компании ua-hosting.company, веб-дизайн, переход, метки:

Анимация и переходы позволяют разработчикам визуализировать изменения и модернизировать контент. Динамичный дизайн улучшает веб-сайты, а также делает их более привлекательными и понятными для восприятия.

Можно самостоятельно анимировать различные элементы страницы или же воспользоваться Motion UI. Это библиотека для создания плавных переходов и анимаций на Sass, вышедшая из семейства Foundation.

Как создать анимацию и переходы с помощью Motion UI - 1

Читать полностью »

в 0:11, , рубрики: agile, apache storm, bash, drupal, ember, freelance, Google Glass, haml, heroku, javascript, jquery, linux, nodejs, oracle, ruby, ruby on rails, sass, stackoverflow, tdd, конференции, конференция, конференция для разработчиков, разработка по, хакатон, Хакатоны

image

22-25 февраля 2016 года будет проходить знаковое событие в сфере разработки ПО — hack.summit(). Это крупнейшая виртуальная конференция в истории. Самая большая в истории конференция по программированию. Самый крупный из проходивших в мире хакатонов с общим призовым фондом в 140000$ (на главной странице проекта почему то фигурирует 150000$, но в описании призовых мест 100k, 30k и 10k, может чего пропустил).

Для тех, кому достаточно hack.summit().
Читать полностью »

в 12:06, , рубрики: css, css3, html, sass

Компонент пагинации, дружественный к мобильным телефонам, который легко можно настроить при помощи CSS и Sass.

Пагинация — простой способ перемещения пользователя между контентом на вашим сайте. Другая альтернатива — бесконечная прокрутка, которая имеет как сильные так и слабые стороны. Я знаю что фреймворки, такие как Bootstrap, позволяют Вам создавать пагинацию в секундах, однако, 1) не все используют фреймворки или не могут использовать для каждого проекта и 2) я создал сниппет с предварительной установкой классов CSS, который немного легче настроить, при этом Вы экономите свое время.
Читать полностью »

в 19:23, , рубрики: css, gulp, html, javascript, JS, node.js, sass, Веб-разработка, оптимизация трудозатрат, метки:

В этой статье мы подробно разберем процесс сборки фронтенд проекта, который прижился в моей повседневной работе и очень облегчил рутину.
Статья не претендует на истину в последней инстанции, так как сегодня существует большое количество различных сборщиков и подходов к сборке, и каждый выбирает по вкусу. Я лишь поделюсь своими мыслями по этой теме и покажу свой workflow.

Приятная сборка frontend проекта - 1
Читать полностью »

в 7:21, , рубрики: css, sass, Веб-разработка, верстка

Существуют разные подходы для организации sass-архитектуры, какую бы вы не выбрали, главное, чтобы она была.

Я отношусь к организации sass, как к инструменту, в первую очередь, он не должен мешать и тормозить ход мыслей. Поэтому начиная проект, я не знаю какой получится архитектура, она устаканивается по ходу работы и принимает форму подходящую для требований проекта.

Bem, Smacss, Oocss, Organic-css должны давать вам гибкость мысли, чтобы построить свой проект.
Читать полностью »

в 18:51, , рубрики: css, less, sass, Веб-разработка, препроцессоры

LessПримерно полгода назад я прочитал статью «Почему стоит использовать препроцессоры». В ней автор описывает преимущества препроцессоров на примере реализации кастомных кнопок. Статья оказалась познавательна и очень интересна. Автор приводил в примеры разные препроцессоры и объяснял, почему остановился на Sass. На счет цвета карандашей и вкуса я не в праве спорить, у каждого свои взгляды. Но еще тогда мне показались не справедливыми описания о том, что Less не достаточно мощный. Еще тогда хотелось сделать что-то подобное, воплотить идею автора на других препроцессорных языках (Less, Stylus). На момент прочтения статьи времени что-то сделать свое не было. И вот недавно, в один из выходных, я вспомнил об этой статье и решил реализовать идею автора — только средствами Less. Делать что-то новое я не видел смысла, поэтому решил помочь автору в развитии проекта, сделал форк с его репозитория, проделал необходимую работу и создал pull request.
Читать полностью »

в 19:16, , рубрики: coffeescript, javascript, nali, ruby, sass, Веб-разработка

image

Меня всегда привлекали отзывчивые, динамичные интерфейсы, созданные на Javascript, но каждый раз, пытаясь погрузиться в изучение этого языка, я превращал свой мозг в кашу и ел её оставлял это до «лучших» времен, возвращаясь к статичным страницам на клиенте и PHP на сервере. Время шло.

Год назад, шатаясь по страницам сети, я наткнулся на статью про Coffeescript. Хм, интересно… Пары примеров кода было достаточно, чтобы заразиться идеей где-то его применить, но что то меня напрягало — хотелось мне какой-то фреймворк, который сам заботился бы о компиляции coffee в js. Так я нашел Rails, а вместе с ним ruby, gems, sass и кучу всего того, что привело меня в экстаз критическую точку невозврата…

Доброго времени суток, господа! Меня зовут Денис, и в этой статье я хочу поделиться с вами своими взглядами на разработку front-end'a и небольшой историей изобретения одного велосипеда, а вот очередного или нет — судить вам.
Читать полностью »

в 8:26, , рубрики: codepen, css, flexbox, Grid, html, responsive, sass, Веб-разработка
Создаем сетку с помощью Susy

Susy — тулкит для создания сеток, с помощью которого можно решать множество разнообразных задач по расположению контента. В отличии от фреймворков, таких как Bootstrap или Foundation, Susy не предоставляет предопределенных классов для использования, а только лишь набор функций и миксин, после знакомства с которыми можно сделать много большее.

В этой публикации будут рассмотрены основные возможности Susy на примерах, а так же будет добавлен вывод с использованием flexbox.
Читать полностью »

123...6
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js