Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
10

Cssformalize v2⁠⁠

Это продолжение этого поста: Кастомные формы Html
Не прошло и двух лет как я смог найти время для продолжения работы над проектом.


Но сейчас изменения на много глобальнее:

  1. Проект обзавелся сайтом: cssformalize.com

  2. Стили для форм можно генерировать на сайте и потом просто скопировать в свой проект.

  3. Есть поддержка тем

В общем теперь можно самому создавать дизайн форм прямо в генераторе на сайте и использовать их. Есть удобная установка через npm или CDN

P.S. Напомню что это только кастомизация нативных html форм без применения js. только css

Всегда рад критике и советам.
Пока что нет адаптивности для самого сайта. Это в планах.
CSS писал я, js ChatGPT

[моё] HTML Html 5 CSS Css3 Текст
19

ИТ-проекты пикабушников

558 постов3.4K подписчиков

Добавить пост

Правила сообщества

0. Запрещены посты вне тематики сообщества

1. Уважайте труд людей, пишите только конструктивную критику,

2. Не выкладывайте информацию по своему проекту чаще 2ух раз в месяц

Все комментарии Автора
0
Аватар пользователя PeachessPeachess
Автор поста оценил этот комментарий

Очень круто! Ты молодец! На моем небольшом экране смотрится хорошо. А максимальную ширину родительскому контейнеру не надо задать, чтобы и на огромных экранах смотрелось компактно? Или я опять же придираюсь? :-D

раскрыть ветку (1)
0
Аватар пользователя marilymmarilym
Автор поста оценил этот комментарий

спасибо!
да, ты права. опять забыл про большие экраны :)

0
Аватар пользователя PeachessPeachess
Автор поста оценил этот комментарий

Да, все срабатывает, только что проверила.

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

раскрыть ветку (1)
0
Аватар пользователя marilymmarilym
Автор поста оценил этот комментарий

уже исправил часть. и добавил адаптивность :)

показать ответы
0
Аватар пользователя PeachessPeachess
Автор поста оценил этот комментарий

Я видела про адаптив и потому не проверяла. Но обратила внимание, что когда я пытаюсь уменьшить размер чекбокса или слайдера, то сам range после сдвига влево в определенный момент перестает изменять размеры элемента. Второй момент - при выборе цвета элемента я вижу снизу поле, в котором можно задать свои параметры, только вот сам цвет при этом не меняется; ты просто не ставил это целью или это небольшой баг?

раскрыть ветку (1)
0
Аватар пользователя marilymmarilym
Автор поста оценил этот комментарий

на счет range
там есть ограничение в самом css поэтому не становится меньше. нужно подправить.
на счет цвета, ты про то поле где там rgba(...)? я пробовал у меня работает. ставлю другой цвет и он срабатывает.

Спасибо большое за фидбэк. Трудно работать самому, глаз замыливается...

показать ответы
0
Аватар пользователя PeachessPeachess
Автор поста оценил этот комментарий

Нет, под каждым - это я погорячилась. Но первый блок я бы разделила на 2-3 блока поменьше, для удобства. И в блоке с кнопками я бы разместила всю инфу горизонтально, а то она сначала поделена на колонки, а потом идут две строчки, немного запутано. Я не придираюсь, просто хотелось бы, чтобы все было интуитивно понятно с первого взгляда.

Есть еще пара маленьких замечаний, продолжать?

раскрыть ветку (1)
0
Аватар пользователя marilymmarilym
Автор поста оценил этот комментарий

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

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

показать ответы
1
Аватар пользователя PeachessPeachess
Автор поста оценил этот комментарий

Выглядит очень интересно, похоже на PrimeNg, библиотеку для Angular. Цвета сразу же намекают на интеграцию с SASS, приятно. Из пожеланий - хотелось бы видеть html код под каждым элементом вместо того, чтобы прокручивать вниз и искать его в общем файле.

раскрыть ветку (1)
0
Аватар пользователя marilymmarilym
Автор поста оценил этот комментарий

спасибо. под каждым инпутом?
думаю получилась бы каша...
думаешь сложно понять что и к чему относится?

показать ответы
0
10010010
Автор поста оценил этот комментарий
Так рейтинг и не появится если ты такую хуйню будешь постить. Пости котиков, баяны и сиськи!
раскрыть ветку (1)
0
Аватар пользователя marilymmarilym
Автор поста оценил этот комментарий

:)
толку от этого рейтинга. проще вообще не постить если есть ограничения чем гнаться за ним...
у меня 23 565 рейтинг и это не позволяет вставить картинку. Очень тупо я считаю.

показать ответы
0
Аватар пользователя nyan92213nyan92213
Автор поста оценил этот комментарий
Сори, смотрел с мобилки, не очень удобно было, думал там только инпуты) Но в любом случае наличие того же календаря, который в консоли не накидаешь, как бы предполагает что 1) ты его сделал и он у тебя есть, значит ты спокойно можешь где-то что-то крутить, 2) Кто-то его сделал, тебе отдали только украсить и соответственно в таком случае тебе скажут как он должен выглядеть. Дизайнер там или разработчик. 3) ты где-то взял готовый календарь. Там точно так же надо раскидать классы взятые у тебя, они могут не подойти куда-нибудь потому что где-то лишний див или еще что-то. Тот же бутстрап вообще иногда перестает анимироваться, когда ему докидываешь классы. Кароч не уверен, что это будет использоваться. Но красивое, не спорю)
раскрыть ветку (1)
Аватар пользователя marilymmarilym
Автор поста оценил этот комментарий

ну с мобилы да. лучше не смотреть. пока что.
ну календарь там нативный браузерный. его особне поменяешь. только само поле.
Этот проект как отправная точка для нового проекта чтоб не писать самому стили для форм. Я много таких проектов делал и каждый раз приходилось делать стили сброса сначала для форм и только потом нормально стилизовать.
Я не навижу работать с формами. Поэтому и сделал такой проект. Но само собой что не всем он подойдет. Но может кому-то понравится

показать ответы
Аватар пользователя marilymmarilym
Автор поста оценил этот комментарий

так и не нашел как в сам пост добавить картинку. наверное не хватает рейтинга

Иллюстрация к комментарию
показать ответы
0
Аватар пользователя nyan92213nyan92213
Автор поста оценил этот комментарий
Прикольная тема как пет проект. Насчет использования я чет хз прям. По факту же ты прям в браузере это можешь накидать, в консоли так же покрутить все, только цифрами писать
раскрыть ветку (1)
Аватар пользователя marilymmarilym
Автор поста оценил этот комментарий

ну не совсем так. попробуй в консоле поменять какие-то стили кроме инпутов тайп текст. поменяй те же чекбоксы или стрелку в селекте к примеру.

показать ответы