mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-02 12:00:36 +02:00
Code Issues Releases Wiki Activity
Page: Navigation
Pages
Base Buttons Carousel Collapse Documentation Extra utilities and experimental classes Flavors Forms Grid Home Labels and Badges Modals Navigation Navigation: Dropdown Progress Bars Spinners Tables Tabs Utilities and helper classes
Clone
1
Navigation
Angelos Chalaris edited this page 2016-08-26 09:41:45 +03:00
Table of Contents

With mini.css's navigation bars can be easily customized to your liking and made responsive, so that they work very well on mobile. All of the navigation system is customizable.

To customizze your navigation system, use the make-nav mixin provided in the _nav.scss partial file.

Definition

make-nav(
	$nav-name, 
	$nav-vertical-name, 
	$nav-fixed-name, 
	$nav-logo-name,
	$nav-logo-size, 
	$nav-link-name, 
	$nav-padding, 
	$nav-color,
	$nav-bg-color,   
	$nav-hover-style, 
	$nav-hover-style-percentage,
	$nav-disabled-cursor, 
	$nav-disabled-opacity, 
	$nav-fixed-left-right, 
	$grid-columns-total, 
	$grid-columns-count-for-nav-fixed-vertical, 
	$nav-fixed-collapse-breakpoint,
	$nav-fixed-collapse-label-location, 
	$nav-fixed-collapse-label-margin,
	$nav-fixed-collapse-label-font-size)

Parameters

  • $nav-name : The class name for the navigation bar.
  • $nav-vertical-name : The class name for the vertical style of the navigation bar.
  • $nav-fixed-name : The class name for the fixed style of the navigation bar.
  • $nav-logo-name : The class name for the logo item of the navigation bar.
  • $nav-logo-size : The font-size of the logo item of the navigation bar.
  • $nav-link-name : The class name for the navigation links of the navigation bar.
  • $nav-padding : The padding of the elements of the navigation bar. [1]
  • $nav-color : The text color of the navigation elements.
  • $nav-bg-color : The background color of the navigation bar.
  • $nav-hover-style : Hover/active/focus style of the navigation elements. [2]
  • $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier.
  • $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled.
  • $nav-disabled-opacity : The opacity of the navigation elements when disabled.
  • $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4]
  • $grid-columns-total : Total amount fo columns in the used grid. [5]
  • $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5]
  • $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button.
  • $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6]
  • $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label.
  • $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label.

Notes:

  • [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed). For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to avoid CSS errors and ultimately the style not being applied to some elements.
  • [2] : The values that $nav-hover-style can take are lighten and darken. The inside condition only checks if the value is lighten and acts accordingly. Invalid values are treated as darken.
  • [3] : The values of $nav-fixed-left-right recognizes are left and right. However if invalid values are provided, due to the inside condition only checking for left, right will be used as the default value.
  • [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars should not be affected as they are 100% width, meaning that anchoring to left or right should have the same result.
  • [5] : These values are used to make the navigation bar work better with the grid system. Values do not have to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving a small gap just before the third column in the grid. If no grid is specified, you can use percentage values like 100 and 15 to get a 15% width for example.
  • [6] : The value $nav-fixed-collapse-label-location recognizes are top-left, top-right, bottom-left and bottom-right. Due to the way the conditional checking is implemented, bottom-right will be used as a default if no valid value is specified.

Remarks

  • Fixed navigation bars are designed to be used only once inside each page. This is an intentional design decision to avoid cluttering and promote better design practices.
  • To use fixed navigation bars that collapse in mobile devices, an <input type="checkbox"> must precede them and a <label> referencing that checkbox should follow them. This is due to the fact that the framework uses the checkbox hack to allow for collapsing of the menu, thus removing the need for Javascript code.
  • Fixed menus will collapse below the breakpoint specified by the user. This is in line wit the framework's mobile-first approach.
  • Some design decisions are already made beforehand to make sure styling choices by the user appear correctly on most devices. This includes some margins, list styling and font weight for the label of collapsed menus. These properties can be manually changed by tweaking the mixin itself or the resulting CSS file.

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework that allows you to build very lightweight pages with minimal effort. It is built using Sass (SCSS), is fully customizable and hopes to allow designers and developers build the webpages they want. The framework is licensed under the MIT license. Contributions and feedback are always welcome.