LINUX.ORG.RU
решено Форум — Web-development  

Статичный сайт

 


0

2

Появилась нужда сделать страничку с кратким рассказом о своей деятельности. Погуглил. Оказывается есть тыщи всяко разных генераторов для подобных вещей аля Jekyll. Понравился roots, что возможно не оптимально. Может кто посоветует лучше?

Еще вопрос. Как я понимаю в наше время css никто руками не пишет, а пользуют LESS, Stylus и тепе. Всеж хотелось бы понять как оно работает. Посоветуйте внятную мурзилку про css. Спасибо.

PS: хотел поставить тег «ассемблер для мудаков», а не дали.

← Удаленная отладка PHP
защита от xss и sql инъекций →

Появилась нужда сделать страничку с кратким рассказом о своей деятельности.

Jekyll + Github Pages /thread

mix_mix ★★★★★
()

Как я понимаю в наше время css никто руками не пишет, а пользуют LESS, Stylus и тепе. Всеж хотелось бы понять как оно работает.

Это всё небольшие надстройки над CSS, для автоматизации каких-то рутинных вещей (например в десяти местах нужно указать один и тот-же цвет). Если не умеешь в CSS то LESS и компания не помогут, если умеешь то можно и без него, но с ними удобнее (для большёго проекта во всяком случае).

MrClon ★★★★★
()
Ответ на: комментарий от nutsandmilk

А я и не знал, что застрял в нулевых :(

В вебдеве я профан, потому и интересуюсь. Просто смотрю на примеры типа bootstrap'а и вижу что там люди генерят.

ebantrop ★
() автор топика
Ответ на: комментарий от ebantrop

Лично я просто не вижу смысла в этих LESS/SCSS — мне хватает с головой обычного CSS. И в общем-то в твоём случае тоже хватит обычного CSS.

nutsandmilk ★★★
()

Как я понимаю в наше время css никто руками не пишет, а пользуют LESS, Stylus и тепе.

Ещё как пишут, даже если берут какой-нибудь бутстрап. Особенно если проект не большой.

risenshnobel ★★★
()
Ответ на: комментарий от nutsandmilk

Вполне допускаю что хватит. Мне в генерации понравилось что он все дело скручивает в одно файло и минифаит его, поэтому во всех страницах будет одна ссылка.

ebantrop ★
() автор топика
Ответ на: комментарий от risenshnobel

Ещё как пишут, даже если берут какой-нибудь бутстрап.

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

ebantrop ★
() автор топика
Ответ на: комментарий от ebantrop

jeet.gs

Не вникал, но похоже это ещё один css фрэймворк. В общем просто кусок CSS который задаёт какие-то готовые стили (в данном случае для раскладки элементов на странице).

Css media query

Думай об этом как о блоках IF. Кусок кода который работает если некоторое условие истинно.

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

MrClon ★★★★★
()
Ответ на: комментарий от ebantrop

Минифицировать и склеивать можно и без всяких лесов

MrClon ★★★★★
()
Ответ на: комментарий от ebantrop

Просто смотрю на примеры типа bootstrap'а и вижу что там люди генерят.

Советую не трогать эту заразную каку даже длинной палкой, натянув на голову презерватив.

anonymous
()

в наше время css никто руками не пишет

Нормальные верстальщики пишут, а таких мало.

Посоветуйте внятную мурзилку про css.

r3lgar ★★★★★
()
Ответ на: комментарий от nutsandmilk

Лично я просто не вижу смысла в этих LESS/SCSS — мне хватает с головой обычного CSS

less/etc оправданы для меня в случае изменения констант. Массово поменять цвет или перерасчитать ширину фиксированной колонки. На CSS задолбаешься ручками по тексту править. Особенно, когда речь о расчётах.

KRoN73 ★★★★★
()
Ответ на: комментарий от KRoN73

А ты не пробовал распределить нужные стили по классам, а классы уже дать элементам в html?

.p80{
  width:80%;
  margin:0 auto;
}
.light{
  background-color:rgb(224,224,224);
  color:rgb(0,0,0);
}
.dark{
  background-color:rgb(82,82,82);
  color:rgb(255,255,255);
}

<body>
  <p class="p80 light">
    ololo
    ololo
    <pre class="dark">
      trololo
    </pre>
  </p>
  <p class="p80 dark">
    ololo
  </p>
</body>

Ну а с рассчётами (ширины, высоты, положения) можно и в js.

r3lgar ★★★★★
()
Ответ на: комментарий от r3lgar

распределить нужные стили по классам, а классы уже дать элементам в html?

Постоянно практиковал. Теперь стараюсь избегать — это ущербная практика. HTML начинает от логической разметки переходить к визуальной. Если ты пишешь class="posting", то это чистая логика. И этот самый «posting» может обозначать что угодно и с разными CSS иметь очень разный вид. А вот class="block border shadow pad8 width-half" — это уже чистая визуальщина, прибитая гвоздями. Я подобного много наплодил, сейчас расхлёбываю :)

И даже такой вариант всё равно не спасает от параметров, которые требуют расчёта. Например, левая колонка — 250px. Значит, у правой надо оставить слева padding в 250px+бордюры+расстояние между ними. И так в куче мест. Надо потом (ага, через 5 лет, когда всё забылось уже!) поменять 250px на 300px — и начинается цирк с конями по поиску и замене производных величин, где-то 250px, где-то 260px, где-то 264px...

Так что тут LESS рулит. Вот SCSS менее интересен. Синтаксис отличный, я, вообще, фанат YAML, но разрыв сильно большой получается между исходником и результатом. Я, кстати, из-за этого же почти перестал HAML использовать. Красиво, компактно, но... когда начинается сложная работа половину времени тратишь на всякие хаки и трюки, вместо того, чтобы просто описать нужное сразу в HTML (в шаблонизаторе, конечно). Вот и с SCSS что-то подобное. LESS как-то ближе к делу. Простые вещи получаются, возможно, и сложнее, а как закапываться начинаешь, то наоборот, доступнее.

KRoN73 ★★★★★
()
Ответ на: комментарий от r3lgar

Ну а с рассчётами (ширины, высоты, положения) можно и в js

Это заметно замедляет отображение. Фактически парсеру браузера двойная работа. Сперва распарсить как нужно, потом менять... К тому же в любом случае проще один раз посчитать на сервере и в таком виде запомнить и раздавать, чем каждый раз парсить на клиенте...

KRoN73 ★★★★★
()
Ответ на: комментарий от KRoN73

Остынь! ТСу нужен статичный сайт, страниц на пять-десять максимум, и без суперсложных изысков, и в его случае LESS — оверхед, это только усложнит ему задачу и отобьёт желание верстать вообще.

Я не спорю, что для больших проектов это нужно, особенно если проект долгоживущий.

r3lgar ★★★★★
()
Ответ на: комментарий от r3lgar

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

Остановился на roots, у них Stylus и Jade по умолчанию. Пока нравится.

ebantrop ★
() автор топика
Ответ на: комментарий от mix_mix

Почему?

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

Хороший пример также - топикстартер. Начал изучать CSS с бутстрапа и уже заложились в голове неверные понятия. И самое плохое - сейчас уже взращено целое поколение подобных верстаков, когда их нанимают к тебе на фронтенд, объяснить что хорошо, что плохо - становится мучением. Тянут Less на простейшие странички и никак не переубедить что это изврат.

anonymous
()
Ответ на: комментарий от anonymous

А потом интернеты пестрят совершенно одинаковыми внешне сайтами, которые к тому же сверстаны коряво, без понимания самой верстки.

Можно пример корявости? Ну а то что сейчас все сайты выглядят одинаково — это просто вопрос моды. Тоже самое можно сказать про машины, мобилы, ноутбуки и прочее.

Тянут Less на простейшие странички и никак не переубедить что это изврат.

Думаю что лет нцать назад подобные разговоры имели вид типа «чего это он на фортране пишет простейшие программы». Тяжело переубедить ассемблер хавать. Ну или С/С++ заместо фортрана.

ebantrop ★
() автор топика
Ответ на: комментарий от ebantrop

Можно пример корявости?

Пардон, лень искать.

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

Это вопрос моды на фреймворк, а не на внешний вид. А результат проявляется внешне. Бывает, видишь какой-нибудь маленький стартапчик, у которого сайт на бутстрапе, и сразу понимаешь что конторка из 1-2 бородатых программеров, даже поскупились заказать дизайн, ибо «дизайн для лахов». И никакого желания с ними связываться не возникает - они не заинтересованы в потребительском качестве своего продукта.

Думаю что лет нцать назад подобные разговоры имели вид типа «чего это он на фортране пишет простейшие программы». Тяжело переубедить ассемблер хавать. Ну или С/С++ заместо фортрана.

Был бы смысл, если бы LESS не был бы тупо синтаксическим сахаром, требующим к тому же дополнительную зависимость для сборки фронтенда.

anonymous
()
Ответ на: комментарий от anonymous

...даже поскупились заказать дизайн, ибо «дизайн для лахов».

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

ebantrop ★
() автор топика

Как я понимаю в наше время css никто руками не пишет, а пользуют LESS, Stylus и тепе.
Оказывается есть тыщи всяко разных генераторов для подобных вещей аля Jekyll.

ШТО? Г-ди, что за хипстерство я сейчас прочитал?!

Заплати пару копеек, тебе любой хелловродист запилит статическую страничку и забудь о своих ненунжых велосипедах.

reprimand ★★★★★
()
Ответ на: комментарий от reprimand

Заплати пару копеек, тебе любой хелловродист запилит статическую страничку и забудь о своих ненунжых велосипедах.

Да с удовольствием, если бы это была бы только страничка с текстом.

ebantrop ★
() автор топика
Ответ на: комментарий от anonymous

Когда был сделан дизайн google.com репутация состояла из двух нердов, которые чего-то хотели.

За совет не пользовать бутстрапа, фундатион и прочего, спасибо. Пожалуй я им воспользуюсь.

ebantrop ★
() автор топика
Ответ на: комментарий от ebantrop

Когда был сделан дизайн google.com репутация состояла из двух нердов, которые чего-то хотели.

Тогда предпринимательство в интернете имело совсем другие формы.

За совет не пользовать бутстрапа, фундатион и прочего, спасибо. Пожалуй я им воспользуюсь.

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

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Удаленная отладка PHP
Web-development
защита от xss и sql инъекций →