<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

10 полезных SASS миксинов.

10 полезных SASS миксинов.

Всем привет! Сегодня мы рассмотрим 10 SASS миксинов, которые вам следует использовать в своих проектах.

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

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

Автоматическое центрирование

Чтобы быстро отцентрировать блочный элемент, не беспокоясь о верхних и нижних отступах, которые уже были применены.

@mixin push--auto {
  margin: {
   left: auto;
   right: auto;
  }
}

Псевдо

Когда вы используете ::before и ::after, вы всегда нуждаетесь в этих трех строчках кода. Используя этот миксин, вы сохраните свое время на их написание.

@mixin pseudo($display: block, $pos: absolute, $content: ''){
  content: $content;
  display: $display;
  position: $pos;
}

Смотрите ниже пример использованя миксина без каких-либо аргументов.

div::after {
  @include pseudo;
  top: -1rem; left: -1rem;
  width: 1rem; height: 1rem;
}

Отзывчивое соотношение

Мы используем этот миксин для создания масштабируемых элементов(обычно изображения/картинки заднего фона), чтобы поддерживать соотношение.

@mixin responsive-ratio($x,$y, $pseudo: false) {
  $padding: unquote( ( $y / $x ) * 100 + '%' );
  @if $pseudo {
   &:before {
    @include pseudo($pos: relative);
    width: 100%;
    padding-top: $padding;
   }
  } @else {
   padding-top: $padding;
  }
}

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

div {
  @include responsive-ratio(16,9);
}

CSS треугольники

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

@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
  @include pseudo($pos: $position);
  width: 0;
  height: 0;
  @if $round {
    border-radius: 3px;
  }
  @if $direction == down {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
    margin-top: 0 - round( $size / 2.5 );
  } @else if $direction == up {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    margin-bottom: 0 - round( $size / 2.5 );
  } @else if $direction == right {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
    margin-right: -$size;
  } @else if $direction == left {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
    margin-left: -$size;
  }
}

Стили шрифта

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

@mixin font-source-sans($size: false, $colour: false, $weight: false, $lh: false) {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  @if $size { font-size: $size; }
  @if $colour { color: $colour; }
  @if $weight { font-weight: $weight; }
  @if $lh { line-height: $lh; }
}

Плейсхолдеры

Утомляет устанавливать стили в определенных форматах. Этот миксин сделает это для вас сам.

@mixin input-placeholder {
  &.placeholder { @content; }
  &:-moz-placeholder { @content; }
  &::-moz-placeholder { @content; }
  &:-ms-input-placeholder { @content; }
  &::-webkit-input-placeholder { @content; }
}

Если вы не знаете, как использовать @content, вот пример:

input,
textarea {
  @include input-placeholder {
   color: $grey;
  }
}

Медиа-запросы

Миксин, который сохранит вам очень много времени! Вы можете использовать значения только в пикселях, но у нас есть также настройки контрольных точек по умолчанию, которые также работают, другие же – экономят время, сохраняя свои контрольные точки последовательно.

$breakpoints: (
  "phone": 400px,
  "phone-wide": 480px,
  "phablet": 560px,
  "tablet-small": 640px,
  "tablet": 768px,
  "tablet-wide": 1024px,
  "desktop": 1248px,
  "desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
  @if map_has_key($breakpoints, $width) {
   $width: map_get($breakpoints, $width);
   @if $type == max {
    $width: $width - 1px;
   }
   @media only screen and (#{$type}-width: $width) {
    @content;
   }
  }
}

Пример ниже показывает увеличение внутренних отступов и размера шрифта, когда вьюпорт становится больше 1024px.

.site-header {
  padding: 2rem;
  font-size: 1.8rem;
  @include mq('tablet-wide') {
   padding-top: 4rem;
   font-size: 2.4rem;
  }
}

Z-index

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

@function z($name) {
  @if index($z-indexes, $name) {
   @return (length($z-indexes) - index($z-indexes, $name)) + 1;
  } @else {
   @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
   @return null;
  }
}
$z-indexes: (
  "outdated-browser",
  "modal",
  "site-header",
  "page-wrapper",
  "site-footer"
);

Когда вы захотите использовать z-index, назовите его так же, как ваш класс, и добавьте в ваш файл переменных/настроек, как ниже. Вы никогда больше не будете иметь проблем с z-index: 9999999;.

.site-header {
  z-index: z('site-header');
}

Аппаратные средства

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

@mixin hardware($backface: true, $perspective: 1000) {
  @if $backface {
   backface-visibility: hidden;
  }
  perspective: $perspective;
}

Truncate

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

@mixin truncate($truncation-boundary) {
  max-width: $truncation-boundary;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Это не все

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

Источник

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.