Капли дождя
Демка 1, Демка 2
Демку выложил Marek Brodziak в своем блоге, там же можно почитать рассказ о разработке. Жалко не сделал такой скринсейвер.
Планы на Twitter Bootstrap 3.0
Docs
- Removed all i18n tags from Mustache templates. No more
{{_i}}
and{{/i}}
in the docs templates, just raw HTML. - Consolidated the Scaffolding and Base CSS pages into a new CSS page. Helps simplify where to find CSS-related things and removes a bunch of overhead in the docs.
- ❑ Add full gallery showcase page to expand on homepage highlights.
- ❑ Add variables to dictate page titles for docs pages (rather than abstract from file name). Would improve capitalization, enable more accurate titles, etc.
Global CSS
- Dropped support for IE7. Removed all
*
hacks, such as*zoom: 1;
, and other IE7-specific lines of CSS. - Dropped support for Firefox 3.6. Removed
-moz-box-shadow
instances and button inner padding hacks. - All variables now use dashes instead of camelCase. For example, it's now
@body-background
instead of@bodyBackground
. - Responsive CSS is no longer separate. All responsive features are now compiled into the core
bootstrap.css
file. Separate files are no longer required, and have thus been removed. - Removed all color variables (e.g.,
@blue
,@orange
, etc). New, more meaningful variables are on their way (such as@state-warning-text
). - Removed
.border-radius()
and.border-*-*-radius
mixins. As only Android 2.1, iOS 3.2, and older desktop browsers require a prefixed version, we've removed the base mixin. Since we no longer require prefixes for independent corners, we've dropped those mixins as well. Mixins for a single side, however, are still in use. - Removed layouts.less. Since it only held styles
.container
and.container-fluid
, and the fluid container has been removed (see next section), we move the default.container
styles togrid.less
. - Changed name of clearfix mixin. Mixin itself is now
.clear_float()
and class is.clearfix
. Currently Less doesn't support using a class with the same name as the mixin, thus the change to support the "no classes in mixins.less" attitude. - ❑ Standardize use of
.*-important
and.*-danger
classes. Includes buttons, labels, badges, text, alerts. and progress bars. - ❑ Update clearfix docs to reflect CSS changes.
Layout and grid system
- Dropped all things fluid. We removed the fluid grid system, fluid container, and fluid layout.
- Overhauled default grid system. Now uses percentage widths, padding, and
box-sizing: border-box
instead of pixel widths and margins. Nesting and offsets remain the same. - Removed dedicated table grid system classes.
.container
now usesmax-width
instead ofwidth
. Helps resolve some issues with containers in components like navbars.
Type
- Dropped the
@altFontFamily
variable.
Forms
- Updated box modal for inputs. Switched to
box-sizing: border-box;
andwidth: 100%;
by default for all textual inputs. This means you'll need to specify a size for inputs, whereas before 3.0 inputs had a set width (around 220px) to start. - Deprecated
.input-prepend
and.input-append
for.input-group
. - ❑ Finish implementing new input groups with segmented button dropdowns.
- ❑ Separate single button dropdowns from segmented button dropdowns with unique classes.
- ❑ Rename button group to segmented controller.
- ❑ Allow form field states to apply to individual inputs.
Icons
- Converted to Glyphicons v1.7 @font-face, dropping the old PNGs.
Buttons and button groups
- ❑ Refactor to allow dropdowns within button groups
- ❑ Separate classes for regular button dropdown and segmented button dropdown
Labels and badges
- ❑ Consolidate down to a single component with a modifier.
Hero unit
- ❑ Convert class to
.jumbotron
.
Navigation
- Removed the
.nav-list
option to simplify nav offerings. - ❑ Instead,
.nav-stacked
will be a modifier class for tabs and pills to achieve virtually the same component. - ❑ Improve collapsed navbar behavior for better handling of dropdowns and other content.
Thumbnails
- Dropped the
.thumbnails
meta component. Instead of special HTML and CSS for grid sizing, just use the grid system itself. - Individual
.thumbnail
styles are still available, but for sizing, require a parent with a setwidth
(e.g., grid columns).
Modals
We might punt this to a 3.1 release, but I want to record this here for a heads up to keep momentum going after 3.0.
- ❑ Realigned aesthetics
- ❑ No more inner modal scrolling. Instead, modals will grow to house their content and the page scroll to house the modal.
- ❑ Maybe: Three size options (normal, large, and small).
- ❑ Maybe: Improved vertical and horizontal positioning.
What's being punted
- Redesigned carousel. Should ideally include new next/prev controls, vertical option, and indicators
W3C объявили о завершении работы над спецификациями HTML 5 и Сanvas 2D, а также о начале работы над HTML 5.1
Как сегодня заявил председатель W3C HTML Working Group Пол Коттон: «Новые функции не будут включены в итоговые рекомендации HTML5 или Canvas2D. Некоторые функции отмечены 'группой риска', но разработчики и компании могут рассчитывать на то, что все остальные оcтанутся в финальных рекомендациях HTML5 и Canvas2D».
«Чем шире охват web-технологии, тем больше заинтересованных сторон требует стабильных стандартов», – сказал генеральный директор W3C Джеф Джейф сегодня утром. «На сегодняшний день компании знают, что они могут возложить на HTML5 и что будет востребовано в ближайшие годы. Кроме того, разработчики будут иметь в виду, какие навыки развивать, чтобы работать со смартфонами, автомобилями, телевизорами, электронными книгами и другими устройствами».
https://habrahabr.ru/post/162931/
Как сделать стрелочки для всплывающих сообщений
Треугольнички на чистом CSS
Где-то на просторах интернета мной был честно подсмотрен оригинальный способ создания прямоугольных треугольничков с помощью CSS-свойстваborder
.
Вот пример направленного вверх треугольника высотой 10 пикселей и шириной 20 пикселей.
.triangle { position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #e0e0e0; }
В данном случае у нас получился блок нулевого размера с видимой нижней рамкой и прозрачными боковыми. Но у этого способа есть недостаток — в некоторых браузерах (например, Firefox) в месте перехода нижней рамки в боковую будет наблюдаться неприятная темная окантовка, так как истинный цвет боковых рамок будет черным. Поэтому заменимtransparent
наrgba(224, 224, 224, 0)
.
.triangle { position: absolute; border-left: 10px solid rgba(224, 224, 224, 0); border-right: 10px solid rgba(224, 224, 224, 0); border-bottom: 10px solid #e0e0e0; }
Полученный результат будет без указанного выше недостатка.
https://habrahabr.ru/post/161041/
CSS версии для печати
Правила страницы для печати
1. Современные браузеры умеют удалять фоновое изображение. Однако желательно добавлятьbackground-image: none, чтобы старые браузеры тоже умели это.
2. Могут возникать несоответствия распечатанной страницы с ее отображением на экране при назначении размеров в пикселях. Поэтому стоит использовать дюймы, сантиметры или проценты.
https://habrahabr.ru/post/160997/
Советы по увеличению производительности
Я думаю ни для кого не секрет, что скорость загрузки страницы влияет на множество факторов. Если кто-то не в курсе, то вкратце скажу следующее, что скорость загрузки влияет не только на то, дождется ли посетитель, когда загрузится Ваш сайт, но и на SEO оптимизацию. Ведь на сегодняшний день уже многие поисковые системы при ранжировании сайтов, начали учитывать скорость загрузки страницы. Поэтому чем быстрее будет грузиться Ваш сайт, тем больше посетителей Вы можете получить с поисковых систем, а, следовательно, и больше денег на этом заработать.
Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.
Топ-10 советов о том, как увеличить скорость загрузки страницы
Для тех кто только начал постигать азы клиентской оптимизации будет самое оно. Для тех кто хочет погрузиться глубже в тему, следует почитать книгу "Разгони свой сайт".
Какие функции HTML5 использовать?
Иногда не совсем понятно какие функции HTML5 уже поддерживаются всеми современными браузерами и их можно использовать безо всяких дополнительных интрументов, а какие надо использовать аккуратно, попутно встраивая в сайт напильник для браузера, чтобы модная фишка могла нормально отображаться в нем. Нашел недавно сайт https://html5please.us/, в котором просто и понятно расписано что и как. Есть функция, для нее отображается можно ли ее использовать просто так, или надо обязательно использовать с ней дополнительный интрумент. Удобно.
Статья про LESS на Хабре
LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в CSS. Он вводит переменные, операции, function-like элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.
LESS: программируемый язык стилей
Для тех, кто хочет разобраться в LESS - самое оно!
Twitter bootstrap
Когда надо по-быстрому сделать что-нибудь красивое, то очень помогает Twitter Bootstrap. Что это такое? Это файлики .css и .js, которые помогут сделать ваши элементы интерфейса как у твиттера. То есть кнопки, списки, поля ввода и так далее станут выглядеть круто, современно и красиво при минимальных усилиях с вашей стороны.
Подробное описание на английском, вместе с примерами: https://twitter.github.com/bootstrap/
Также имеется поддержка Less.