Tablesīy default to tables applied simple styles: 100% width, background, header styles, row dividers.Īlso there are additional classes for table element: Body tag class main-shift-up rises main content over header area on 128px.
#Drupal responsive grids full
In Material Base implemented class card-main which can be added to any card element to make it take full width on narrow screens.īody tag class content-card does same thing for region Main content in default layout.
On narrow screens columns are getting stacked. To make two columned card you need to add card-vertical class to card element and create two additional wrappers for child elements - card-column-left and card-column-right. Id bg-object is necessary for background object.Īlso implemented the way, which provide adding icons to element by adding class services-icon-left or services-icon-right and data-icon attribute.īy this way icons can be easily added to link, button, menu item and other elements. Static background image can be set by just adding header-bg-image class to body tag and placing image header-bg.jpg to theme img folder.įor using complicated background elements you should add header-bg-object class to body tag and add some block with background object to Header background region. Solid primary color background is default for header.
Height of header depends on placed content. Header background - for complicated background elements, such as changeable image, video, slider.Header content - for any kind of content, such as title, slogan, logo.There are two regions designed for creating custom headers: Header in Material Base has many variants for customization. Navbar elements accepts pull-*, hidden-* and visible-* helper classes.Īlso there are classes for specific child elements: For menu element also should be added navbar-menu class. navbar-dark - changes navbar background to dark gray.Įvery element which is child of navbar should have class navbar-item.navbar-light - changes navbar background to white.navbar-transparent - removes navbar background.navbar-fixed - fixes navbar at top of the page.Navbar has some options presented as classes which should be added to body tag: Navbar has fixed height 64px and primary color background as described in guidelines. layout-left - makes content area aligned left (by default it is centered).įor changing default widths of content, sidebar and gutter see Sizes in Styles section.full-width - removes main content width limits.wide-two-side - makes width of content area wider on the width of two sidebars.wide-one-side - makes width of content area wider on the width of one sidebar.two-sidebars - adds by Drupal if exist content for two sidebars.one-sidebar - adds by Drupal if exist content for one sidebar.no-sidebars - adds by Drupal if no sidebars content.To modify default layout behavior there are some options presented as classes which should be added to body tag: There is no settings for change structure of basic layout unless placing content in necessary Drupal regions. Make sure you choose the Grid Style Format from your view format settings.By default Material Base provide classic responsive layout with navbar, header, content, sidebars and footer areas.
#Drupal responsive grids code
Override in your theme with the code below.Here's a quick hack override to make your favorite Grid Style Format, responsive and play well without any need for extra CSS.Įasy! The whole purpose is to replace the html tags in to us instead of, and Bootstrap's grid instead of and. You also probably noted that the Grid Style Format uses tables, which is not responsive, and is does not play well with Twitter's Bootstrap UI library. You probably used the Views' famous Grid Style Format to easily output items in a grid.
0 kommentar(er)
