Keep it simplest. Или про простые сайты

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

    Очевидным вариантом было бы набросать основную разметку, определить doctype и оставить браузерам работу по стилизации. Но это очень ленивый метод, который дает результат, вызывающий недоумение у будущего посетителя такой страницы. Хочется хотя бы базовой стилизации заголовков и ссылок, какой-то простой структуры.

    Так что следующим шагом стал просмотр готовых вариантов в сети.

    Поиск


    Шаблоны для CMS не подходят хотя бы потому, что CMS не будет. И такие шаблоны чаще всего рассчитаны на более сложные сайты. И они не будут радовать посетителей с мобильными устройствами.

    Хотя, сейчас появились шаблоны с адаптирующейся разметкой (responsive design), которые и вызвали у меня интерес. К сожалению, большинство найденных решений оказались платными, что не удивительно, учитывая объем работы, который проделывают их авторы.


    Поиск бесплатных вариантов приводит к базовым темплейтам, которые созданы с расчетом на то, что ты сам сделаешь свой дизайн на основе их кода.

    Тут уже стало возможно сформулировать требования, которые у меня были к искомому решению:
    • Простота работы
    • Наличие базового дизайна
    • Адаптивность разметки для мобильных устройств
    • Лучше, чтоб было на HTML5
    • Бесплатность

    Решение


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

    Simpliste — название, которое пришло само. Вот что предлагает шаблон:
    • CMS не требуется, это просто HTML-код.
    • Разметка создается простыми блоками, которых не слишком много, так что не запутаешься (возможны три, две или одна колонка). Готовые классы есть для большинства ситуаций.
    • Ресет от HTML5 бойлерплейт дает стабильность внешнего вида в разных браузерах.
    • HTML5 и CSS3. Предусмотрена загрузка HTML5 Shiv c сервера Гугл (это только для IE). Больше никаких скриптов к шаблону не подключено.
    • Есть несколько тем оформления. Все темы созданы без использования файлов изображений.
    • Адаптивность к ширине браузера. На мобильных устройствах колонки превратятся в вертикальный блок статей, CSS-классы предусматривают это автоматически.

    На сайте Simpliste можно рассмотреть шаблон.

    Можно скачать архив напрямую.

    Для интересующихся ссылка на страницу проекта на Гитхабе.

    Итого


    Если вам нужно быстро выложить в сеть некоторую информацию, сделать это в эстетически приемлемой форме, не забыть про мобильные браузеры и потратив минимум времени, то стоит обратить внимание на Simpliste.

    Достаточно базового понимания HTML, чтобы построить структуру. Есть несколько вполне нейтральных тем оформления (их станет больше, если будет интерес аудитории). Весь сайт на шаблоне изначально будет требовать всего 3 файла для скачивания: html, css и фавиконку.

    upd. По просьбам пользователей добавил лицензию. Это лицензия MIT, только без требования включать копии лицензии при распространении и тп. Коротко: можно бесплатно использовать, изменять, распространять. Обратная ссылка добровольна.

    upd2 Начинаем работы по созданию тем оформления: habrahabr.ru/blogs/webdev/136424
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 81

      +33
      То что вы сделали называется css framework, думаю вам по такому ключевику нужно позиционироваться.
        –9
        Посмотрите, например, Bootstrap.
        masterrr.name/ — 15 минут работы;
          0
          Да, кстати, bootstrap клёвая штука, делаю на нём админку и думаю заменить blueprintcss на этот фреймворк.
            0
            у bootstrap есть(или были) некоторые проблемы с jqueryUI
              +1
              конкретнее можно?
                +1
                насколько я помню проблема заключалась в стилях bootstrap которые конфликтовали со стилями jqueryUI — проявлялось например в виджете календаря.
                  0
                  Да и не только в календаре. Много там конфликтов в стилях возникало.
                    0
                    Эту проблему даже пытались исправить — там был скриншот, где все красиво, но по-моему PR так и не был запилен.
                      0
                      А уже есть специальная сборка jQuery UI, заточенная под Bootstrap addyosmani.github.com/jquery-ui-bootstrap/
                    +4
                    есть еще jQuery UI Bootstrap
                    0
                    Советую также посмотреть на Zurb Foundation. Там есть большой плюс в сравнение с Bootstrap — поддержка из «коробки» мобильных платформ. То есть создавая html layout для десктопной версии сайта, сразу получаешь и мобильную.
                    –1
                    При изменении ширины экрана всё едет.
                      0
                      Вы имеет ввиду динамическое изменение с помощью "css media queries" или баги?
                        +1
                        Насколько я сейчас вижу — у html/body стоит min-width на примерно 800 пикселей (точно сказать не могу, лень) — так что о поддержке мобильных девайсов можно забыть.
                          0
                          Минимальной ширины там нет. Комментарием выше правильную вещь сказали. При ширине меньше 800 пикселей (768px) начинают применяться стили для планшета. При ширине меньше 480px для смартфонов.

                          Если есть проблемы с мобильными устройствами, отпишите.
                            +1
                            Я не вижу смысла в таких жестких рамках — резина же проще в таком случае. Никто не может гарантировать на 100% что планшет Васи пупкина именно с таким же разрешением экрана, как и хваленый iPad. Адаптивный дизайн он на то и адаптивный, ибо предназначен по большей части для реорганизации рабочей площади.
                            В идеале горизонтального скрола вообще не должно быть.
                              +1
                              Да, горизонтальный скрол или зум на мобильных устройствах могут начать раздражать.

                              Поэтому-то в Simpliste 3-х и 2-х колоночная верстка превращается в одноколоночную на малых разрешениях. Но если ширина окна достаточна на планшете Васи, то колонки ему не должны мешать, а скрола не появится из-за ширины колонок в процентах.
                          0
                          И динамическое, и с перезагрузкой страницы — едет.
                            0
                            В таких случаях браузер написать бы хорошо. Возможно, у вас IE и он не поддерживает media queries.
                              0
                              Linux: FF9 и Epiphany (webkit). И едет не у вас, а у вот этого автора. Читайте внимательно.
                        0
                        ну как бы тут и без фреймворков минут на 15 работы, это не показатель. Фреймворки нужны для каких-то общих задач, скажем оформление админ панели.
                          +4
                          Я бы не смог без фреймворка сделать такую страницу за 15 минут.
                          0
                          А почему голосуют против моего комментария?
                            +1
                            однако, тенденция
                              0
                              Может, из-за рекламы сайта? На котором, кстати, и без bootstrap'a можно было обойтись — использовано очень немного возможностей.
                            +2
                            Фреймворк на то и фреймворк, что его как-то допиливать и переделывать полагается. А я попытался именно шаблон с нейтральными темами создать, для возможности скачать, наполнить контентом и положить на сервер.

                            Да и язык не поднимается фреймворком назвать пару файлов в архиве. Но тема для размышления, спасибо.
                            +8
                            Если еще не смотрели, то очень рекомендую: twitter.github.com/bootstrap/
                              0
                              Всегда использовал 960.gs, но этот будет функциональнее, спасибо за наводку, не знал.
                                0
                                И я уже выше комментировал, советую все же Zurb Foundation foundation.zurb.com
                                Поддержка мобильных платформ, относительные величины вместо абсолютных и т.д.

                                Плюс дополнительные полезные фишки, которые можно найти в их «песочнице» www.zurb.com/playground

                                Единственно, он не столь красив по умолчанию, как Twitter Bootstrap, но, во-первых, все эти стили в большинстве случаях все равно заменяются в процессе разработки, а, во вторых, если так уже это важно, то для «зурба» тоже есть решения, как например www.zurb.com/playground/super-awesome-buttons

                              0
                              Наверное, у каждого верстальщика есть что-то подобное, т.к. каждый раз писать с нуля все стили утомляет
                                +3
                                Сам такое свое делал, пока из-за лени не перешел на готовые фреймворки (там с типографикой все уже порешали). Но идея отличная, прожиточный минимум учтен, все responsive. Обязательно кому-то пригодится, автор молодец.
                                  +2
                                  Я то думал, что как раз из-за лени готовые фреймворки и используют.
                                    +1
                                    так вы говорите, что готовые фреймворки из-за лени используют? я думал раньше, что их используют потому что лень.
                                  +11
                                  Укажите, пожалуйста, лицензию.
                                    +2
                                    Это упустил. Начал думать.

                                    Пока могу сказать, что не возражаю против модификаций и использования в коммерческих проектах. Ссылка на авторство не обязательна.
                                      +9
                                      WTFPL, не?

                                      DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                                                         Version 2, December 2004
                                      
                                      Copyright © 2004 Sam Hocevar <sam@hocevar.net>
                                      
                                      Everyone is permitted to copy and distribute verbatim or modified
                                      copies of this license document, and changing it is allowed as long
                                      as the name is changed.
                                      
                                                 DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                                        TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
                                      
                                       0. You just DO WHAT THE FUCK YOU WANT TO.
                                      
                                      
                                        0
                                        И в чём разница между этим и Public Domain через CC0?
                                          +5
                                          понятия не имею, но мне нравится дух WTFPL
                                            0
                                            В том, что CC0 это практически отказ от авторства, а WTFPL это все же лицензия.
                                              +1
                                              Как это «отказ от авторства»? Автором можно называться всегда.
                                                +1
                                                +1 — авторское право — неотделимое право
                                                  0
                                                  Обще́ственное достоя́ние (англ. Public Domain) — совокупность творческих произведений, авторские права на которые истекли или никогда не существовали. Также «общественным достоянием» иногда называют изобретения, срок патента на которые истёк. Распространять и использовать общественное достояние могут все без ограничений.
                                                    0
                                                    Ии? Право на распространение и использование — это не то же самое, что авторское право.
                                                      0
                                                      «совокупность творческих произведений, _авторские права_ на которые _истекли_ или _никогда не существовали_.»
                                                        0
                                                        Я имел ввиду это:

                                                        Право авторства, право на имя и иные личные неимущественные права автора неотчуждаемы и непередаваемы. (ГК РФ, ч4. Статья 1228 пункт 2)

                                                        www.consultant.ru/online/base/?req=doc;base=LAW;n=122998
                                                          0
                                                          Извиняюсь. Только сейчас заметил, что написал " от авторства", хотя хотел сказать «от авторского права.»
                                                            0
                                                            Недоразумение из-за того, что часто под авторскими правами имеют в виду исключительные авторские права и прочие имущественные авторские права. Хотя право на авторство это тоже авторское право.
                                      –2
                                      На ловца и зверь бежит :)
                                      Реализую задачу по работе на этой штуке.
                                      Смысл — находить лучший пост (исходя из количества лайков и коментов) у топблогеров фэйсбука и выводить его. Удачи мне! Спасибо за пост.
                                        +2
                                        Спасибо! Как раз нужна была простая и легкая тема для админки.
                                          +1
                                          Отличная штука, именно то, что искал. Надоели всякие красивости, хочется просто и лаконично выложить свои данные в сеть. Главное, не усложняйте, оставьте таким простым и классным. Спасибо!
                                            +1
                                            Спасибо за интерес. Похоже, придется все-таки увеличить количество тем оформления=)
                                              +3
                                              Например, в серых тонах =)
                                            –3
                                            Идея хорошая, но я для таких целей нарисовал небольшой велосипед, чтобы через браузер редактировать html содержание страницы, чтобы на ftp не лазить. Как раз подходит для небольших проектов + поддержка дополнительных модулей, если кому захочется расширить возможности.
                                              0
                                              Цвета под сообщения подобраны ужасно с точки зрения дальтоника. Различить практически невозможно. Следует изменить интенсивность.
                                                0
                                                Как вы об этом узнали? Как об этом узнать, если я не дальтоник?

                                                Есть ли какой-то способ изменить скриншот так, чтобы понять, как он будет выглядеть для всех типов дальтоников/цветоаномалов?
                                                  0
                                                  На все типы дальтоников сервисов не напасешься, но большинство различает интенсивность. Еще вроде как синий, белый, серый и желтый нормально воспринимаются, но для показа ошибок они не подходят.
                                                    0
                                                    Я четырьмя способами пользуюсь: преобразование в черно-белую картинку и отключение по очереди каждого из RGB каналов. Если пропадает оформление ещё не смертельно, а вот когда текст с фоном сливаются — надо что-то менять. Но на самом деле это так, интуитивно — прислали один раз благодарность, а я проанализировал гамму сайта.
                                                    0
                                                    Думаю, я сам примерно ответил на свой вопрос: www.etre.com/tools/colourblindsimulator/
                                                      0
                                                      Был скрипт, в который можно было вбивать адрес сайта, и вроде как даже ходить потом по нему, но адрес не вспомню.
                                                    +2
                                                    Мегареспект автору! Лучший css framework по соотношению полезность/минимализм из всех, которые доводилось видеть, при этом всё просто и понятно. Хотелось бы увидеть ещё .col_25 и 75, ну и побольше тем, конечно.
                                                      0
                                                      >всё просто и понятно
                                                      Вот этого и хотел.

                                                      >.col_25 и 75
                                                      Я не помню, чтоб на более-менее простых сайтах приходилось делать 4 колонки, даже 3 редко. Разве что есть потребность в очень узкой колонке с боку от текста, но это можно самостоятельно сделать. Пока не уверен, добавлять ли эту пару, во всяком случае, начинается усложнение.
                                                      0
                                                      Попробуйте Initializr. Идея очень похожа. Еще есть html5 boilerplate, но он более монстрообразный.
                                                        +1
                                                        очень аккуратно все внутри, приятно менять значения)
                                                        спасибо. использую в ближайшем простом проекте.
                                                          0
                                                          Посмотрите на Hyde, это намного проще и мощнее.
                                                            +1
                                                            А залейте-ка всё это дело на ГитХаб, чтобы проект потихоньку обрастал новыми пользовательскими темами.
                                                              +1
                                                              Так оно и лежит на гитхабе. Просто автор вместо того, чтоб дать ссылку на весь проект — github.com/rafikov/Simpliste/ — сослался лишь на скачивание зип-архива.
                                                                0
                                                                Не ожидал, что интереса будет достаточно, чтобы нашлись добровольцы для создания тем. Теперь думаю, что можно попробовать привлечь авторов. Буду работать над какими-то несложными гайдлайнами или инструкциями.

                                                                А тем уже становится больше. Сегодня подготовил четвертую, несколько уже на подходе.
                                                                0
                                                                Не пробовали посмотреть в сторону google sites? Там, вроде, всё просто и CMS нету.
                                                                  0
                                                                  Судя по интересу публики, не зря время потрачено.

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

                                                                      А про велосипед это зря. До Бутстрапа их было множество, некоторые я даже изучать пробовал. Но теперь вот говорите, что Бутстрап идеален, а не один из его предшественников=)
                                                                        +1
                                                                        У Bootstrap'a в 2.0-wip версии есть т.н. responsive design — жутко глючный (до той степени, что приходится его вырезать из CSS на продакшене), но тот факт, что его начали делать намекает на то, что скоро будет и мобильность.

                                                                        И да, Bootstrap, похоже, самый лучший фреймворк, который сейчас есть. В нем есть практически все, что нужно, и все это очень высокого качества.
                                                                  +1
                                                                  Круто, буду пользоваться. Правый верхний блок едет в ие6-7 (смотрел в онлайн браузер скриншотилках).
                                                                    0
                                                                    Ие будет только 8+. Естественно, контент доступен и в прежних версиях браузеров, но людей с ие 6-7 все меньше (даже вы в скриншоталках смотрите), поэтому не думаю, что стоит из-за них усложнять код
                                                                    +1
                                                                    OMG. Ушел пилить в свою CMS как шаблон.
                                                                      0
                                                                      Очень красиво и удобно! Спасибо за Ваш труд! =)
                                                                        0
                                                                        Спасибо за интерес!
                                                                        +1
                                                                        Отличная вещь! Спасибо!
                                                                        А шаблоны то как смотрятся в мобильных устройствах — жесть. Пойду ставить
                                                                          0
                                                                          А можно попросить кого-нибудь написать код для sumbit'a? Чтобы, скажем, через гуглопочту отправлялись мне письма…
                                                                            0
                                                                            Увы, это уже не к шаблону вопрос, вам надо скрипт искать, который делает такие вещи
                                                                            0
                                                                            Подвал бы еще прикрепить к нижнему краю окна. А то запарился править…

                                                                            Only users with full accounts can post comments. Log in, please.