---
title: "Печенюки или мини-фреймворк от домохозяйки"
description: "Довелось мне прошлый месяц озадачится веб-интерфейсом. Со всей начинкой, которая там полагается - к..."
author: "Kimberly"
published: "2013-05-13T12:27:37+00:00"
modified: "2013-05-13T12:27:37+00:00"
locale: "ru"
canonical_url: "https://yvision.kz/post/pechenyuki-ili-mini-freymvork-ot-domohozyayki-352428"
markdown_url: "https://yvision.kz/post/pechenyuki-ili-mini-freymvork-ot-domohozyayki-352428/markdown"
site_name: "Yvision.kz"
---

# Печенюки или мини-фреймворк от домохозяйки

> Довелось мне прошлый месяц озадачится веб-интерфейсом. Со всей начинкой, которая там полагается - к...

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

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

В интерфейсе есть много кнопочек, хороших и разных. Разных габаритов (2 вида габарита) и четыре цветовых решения. Проект , изначально, сам по себе мультиязычный, и обходится деревенскими костылями вроде "запекания картинки-кнопочки для разных языковых версий" это не комильфо ни разу. Посему, пришлось выкручиваться.

![Печенюки или мини-фреймворк от домохозяйки](http://storage.yvision.kz/images/user/kimberly/6y7CA4gdhrLtQVKb4QFgCjog0bn60S.png)

![Печенюки или мини-фреймворк от домохозяйки](http://storage.yvision.kz/images/user/kimberly/u0FteT29526CTjPYzx68gKw86jrh2X.png)

рисунок 1. так выглядят кнопочки в макете

вот так выглядит разметка для кнопки

>  Leave

Как известно, у элемента может быть один ID и несколько классов. Этим можно как раз грязно воспользоваться - описать габарит кнопки, цветовое решение (это общие классы) и расположение кнопки (дополнительный класс) отдельно.

в классе, который предназначен для габарита кнопки, указываем следующие параметры:

> .size {width: ; height: ; display: ; font-size:; text-align:center ; text-decoration:none ; color: ; }

(где width ,height и font-size разные для разных габаритов)

в классе, который предназначен для цвета, прописываем

> .color {backgound:(url'') no-repeat top left }

и при наведении мыши, естественно

.color:hover {backgound:(url'') no-repeat top left }

background, естественно, разный для каждого цветового решения: это картинка - фон кнопки

![Печенюки или мини-фреймворк от домохозяйки](http://storage.yvision.kz/images/user/kimberly/5o3yNnND8wdDfOwiPxudcGRr5D1CgW.png)

рисунок2 . фон кнопки - каждому свой

и третий вид класса - расположение. где указываете position, если нужно, или float

в итоге, в сборке, разметка будет выглядеть вот так:

 Leave

 

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

Или название кнопки. Было Yes, станет No или еще как-нибудь.

При отключенных картинках все будет замечательно читаться и видеться.

Такие дела. Домохозяйки пекут не только пироги, но и вот такие вот печеньки.

---

Source: [https://yvision.kz/post/pechenyuki-ili-mini-freymvork-ot-domohozyayki-352428](https://yvision.kz/post/pechenyuki-ili-mini-freymvork-ot-domohozyayki-352428)