CSS Grid - это невероятно мощный способ создания макетов. Но поскольку у нее «богатые» возможности (и в большинстве уроков авторы любят показывать все модные вещи, которые может сделать с помощью нее сразу), изучение основ может быть ошеломляющим.

В этой статье автор хочет демистифицировать CSS Grid и показать вам, как создать несколько простых макетов на основе сетки с помощью всего лишь нескольких строк CSS-кода.

В CSS есть проблема с отображением круглого изображения, так как изображения имеют прямоугольную или квадратную форму.

Вы всегда можете использовать графический редактор, например, Gimp или Photoshop чтобы обрезать изображение в виде круга или даже использовать онлайн-инструменты, такие как MockoFun, чтобы обрезать изображение онлайн. Но эта заметка о том, как сделать круглые изображения с помощью CSS.

Дизайнер Вентинг Чжан из Adode создал интересное веб-приложение для генерации простых CSS-иконок. У него простое название “CSS Icon” и, возможно, это одно из самых крутых генераторов иконок для фронтенд-разработчиков.

Что если я скажу вам, что вам нужно знать только 3 свойства CSS, чтобы создать полностью адаптивную CSS сетку, показанyю ниже:

Давайте начнем с HTML кода.

Syntactically awesome style sheets или сокращенно SASS – это CSS препроцессор, который позволяет разработчикам писать код на одном языке, а затем компилировать его в другой. SASS – это расширение CSS, которое позволяет вам создавать ваш код быстрее и делать его чище.

Здесь, в Weeare, мы используем SASS, чтобы сократить время разработки и держать наш CSS-код более упорядоченным. В этой статье мы расскажем, как понять основы SASS за 20 минут или даже меньше. В зависимости от отзывов об этом уроке мы можем публиковать дополнительные обучающие статьи на этом сайте.