Yvision.kzYvision.kz
kk
Разное
Разное
399 772 постов41 подписчиков
Всяко-разно
1
12:27, 13 мая 2013

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

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

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

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

Blog post image Blog post image

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

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

<a href="#"> Leave</a>

Как известно, у элемента может быть один 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, естественно, разный для каждого цветового решения: это картинка - фон кнопки

Blog post image

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

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

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

<a href="#" class="size color position"> Leave</a>

 

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

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

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


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

1
361
6