Search the Community

Не всем нравится адаптивный дизайн в новом опенкарте. Уже было несколько просьб от клиентов его выпылить. Но сделать это не так просто, как кажется. Попытался сделать это, изменив исходники бутстрапа и вот что вышло. PS. Кому лень читать дальше код, могут сразу скачать скомпилированый код в конце поста. PPS Это мой первый опыт работы с LESS файлами, так что, если что не так, прошу понять и простить :-D Итак, берем исходники бутстрапа на http://getbootstrap.com/getting-started/#download, там же курим мануал, как поднять node.js, npm и grunt. Разворачиваем все это добро у себя. В исходниках видим такие файлы Сразу попытался выпилить все правила, которые генерят @media (max-width: xxx) и @media (mix-width: xxx) во всех этих файлах. Понял что это будет долго и ошибки потом будет сложно найти. Поэтому сделал так: Берем файл variables.less и меняем все значения разрешений экранов на нули, кроме самого большого (1200px) // Extra small screen / phone //** Deprecated `@screen-xs` as of v3.0.1 @screen-xs: 480px; //** Deprecated `@screen-xs-min` as of v3.2.0 @screen-xs-min: @screen-xs; //** Deprecated `@screen-phone` as of v3.0.1 @screen-phone: @screen-xs-min; // Small screen / tablet //** Deprecated `@screen-sm` as of v3.0.1 @screen-sm: 768px; @screen-sm-min: @screen-sm; //** Deprecated `@screen-tablet` as of v3.0.1 @screen-tablet: @screen-sm-min; // Medium screen / desktop //** Deprecated `@screen-md` as of v3.0.1 @screen-md: 992px; @screen-md-min: @screen-md; //** Deprecated `@screen-desktop` as of v3.0.1 @screen-desktop: @screen-md-min; // Large screen / wide desktop //** Deprecated `@screen-lg` as of v3.0.1 @screen-lg: 1200px; @screen-lg-min: @screen-lg; //** Deprecated `@screen-lg-desktop` as of v3.0.1 @screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum @screen-xs-max: (@screen-sm-min - 1); @screen-sm-max: (@screen-md-min - 1); @screen-md-max: (@screen-lg-min - 1); //== Grid system // //## Define your custom responsive grid. //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px; // Navbar collapse //** Point at which the navbar becomes uncollapsed. @grid-float-breakpoint: @screen-sm-min; //** Point at which the navbar begins collapsing. @grid-float-breakpoint-max: (@grid-float-breakpoint - 1); на // Extra small screen / phone //** Deprecated `@screen-xs` as of v3.0.1 @screen-xs: 0; //** Deprecated `@screen-xs-min` as of v3.2.0 @screen-xs-min: @screen-xs; //** Deprecated `@screen-phone` as of v3.0.1 @screen-phone: @screen-xs-min; // Small screen / tablet //** Deprecated `@screen-sm` as of v3.0.1 @screen-sm: 0; @screen-sm-min: @screen-sm; //** Deprecated `@screen-tablet` as of v3.0.1 @screen-tablet: @screen-sm-min; // Medium screen / desktop //** Deprecated `@screen-md` as of v3.0.1 @screen-md: 0; @screen-md-min: @screen-md; //** Deprecated `@screen-desktop` as of v3.0.1 @screen-desktop: @screen-md-min; // Large screen / wide desktop //** Deprecated `@screen-lg` as of v3.0.1 @screen-lg: 1200px; @screen-lg-min: @screen-lg; //** Deprecated `@screen-lg-desktop` as of v3.0.1 @screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum @screen-xs-max: 0; @screen-sm-max: 0; @screen-md-max: 0; //== Grid system // //## Define your custom responsive grid. //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px; // Navbar collapse //** Point at which the navbar becomes uncollapsed. @grid-float-breakpoint: 0; //** Point at which the navbar begins collapsing. @grid-float-breakpoint-max: 0; Дальее берем grid.less и пытаемся сделать так чтобы правила col-xs col-sm итд работали одинаково на любых разрешениях. Ниже всесь перписаный файл. // // Grid system // -------------------------------------------------- // Container widths // // Set the container width, and override it for fixed navbars in media queries. .container { .container-fixed(); width: @container-lg; } // Fluid container // // Utilizes the mixin meant for fixed width containers, but without any defined // width for fluid, full width layouts. .container-fluid { .container-fixed(); } // Row // // Rows contain and clear the floats of your columns. .row { .make-row(); } // Columns // // Common styles for small and large grid columns .make-grid-columns(); // Extra small grid // // Columns, offsets, pushes, and pulls for extra small devices like // smartphones. .make-grid(xs); .make-grid(sm); .make-grid(md); .make-grid(lg); // Small grid // // Columns, offsets, pushes, and pulls for the small device range, from phones // to tablets. //@media (min-width: @screen-sm-min) { // .make-grid(sm); //} // Medium grid // // Columns, offsets, pushes, and pulls for the desktop device range. //@media (min-width: @screen-md-min) { // .make-grid(md); //} // Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range. //@media (min-width: @screen-lg-min) { // .make-grid(lg); //} И закоментим ненужное в bootstrap.less. /*! * Bootstrap v3.3.4 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ // Core variables and mixins @import "variables.less"; @import "mixins.less"; // Reset and dependencies @import "normalize.less"; @import "print.less"; @import "glyphicons.less"; // Core CSS @import "scaffolding.less"; @import "type.less"; @import "code.less"; @import "grid.less"; @import "tables.less"; @import "forms.less"; @import "buttons.less"; // Components @import "component-animations.less"; @import "dropdowns.less"; @import "button-groups.less"; @import "input-groups.less"; @import "navs.less"; @import "navbar.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; @import "labels.less"; @import "badges.less"; @import "jumbotron.less"; @import "thumbnails.less"; @import "alerts.less"; @import "progress-bars.less"; @import "media.less"; @import "list-group.less"; @import "panels.less"; @import "responsive-embed.less"; @import "wells.less"; @import "close.less"; // Components w/ JavaScript @import "modals.less"; @import "tooltip.less"; @import "popovers.less"; @import "carousel.less"; // Utility classes @import "utilities.less"; //@import "responsive-utilities.less"; Компилируем. Наш новый бутстрап появился в папке dist Все готово, ну почти )) Для дефолтного шаблона ок 2.0 нужно еще подправить стили в stylesheet.css. Теоретически, то же самое можно сделать для любых других шаблонов под бутстрап, если в них правила @media свалены все в один файл. Уберем ширину в 100% и пропишем минимальную ширину для body body { font-family: 'Open Sans', sans-serif; font-weight: 400; color: #666; font-size: 12px; line-height: 20px; min-width: 1170px; } теперь берем все правила @media (max-width: xxx) и @media (mix-width: xxx) и ставим там нули всесто значений, должно получится так @media (max-width: 0) и @media (mix-width: 0) Далее закоментим респонсив тег в header.tpl <?php /* <meta name="viewport" content="width=device-width, initial-scale=1"> */ ?> Все, теперь все. Глянуть можно здесь http://cart20.turbocart.pp.ua/ non-responsive bootstrap.zip