mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-03 12:27:24 +02:00
Code Issues Releases Wiki Activity
Page: Carousel
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
Carousel
Angelos Chalaris edited this page 2016-09-09 10:58:34 +03:00
Table of Contents

The carousel provides a simple slideshow component without auto-cycling functionality. Almost every aspect of it is customizable, using the make-carousel mixin provided in the _carousel.scss partial file.

Definition

make-carousel(
	$carousel-name, 
	$carousel-width, 
	$carousel-height, 
	$carousel-border, 
	$carousel-border-radius, 
	$carousel-container-bg-color, 
	$carousel-content-padding,
	$carousel-description-color, 
	$carousel-description-bg-color, 
	$carousel-description-top, 
	$carousel-description-height, 
	$carousel-control-top,
	$carousel-control-font-size, 
	$carousel-control-color)

Parameters

  • $carousel-name : The class name for the carousel.
  • $carousel-width : The width of the carousel. [1]
  • $carousel-height : The height of the carousel.
  • $carousel-border : The style of the carousel's border.
  • $carousel-border-radius : The border-radius of the carousel.
  • $carousel-container-bg-color : The background color of the carousel.
  • $carousel-content-padding : The padding of the carousel's contents. [2]
  • $carousel-description-color : The text color of the carousel's description.
  • $carousel-description-bg-color : The background color of the carousel's description.
  • $carousel-description-top : The distance of the carousel's description from the top of the container. [3]
  • $carousel-description-height : The height of the carousel's description area. [3]
  • $carousel-control-top : The distance of the carousel's controls from the top of the container. [3]
  • $carousel-control-font-size : The font-size of the carousel's controls.
  • $carousel-control-color : The text color of the carousel's controls.

Notes:

  • [1] : The height of the carousel is suggested to be defined as a percentage so that it makes it responsive for smaller screens.
  • [2] : The value of $carousel-content-padding only applies to images inside the carousel.
  • [3] : The distances from the top are used for positioning the elements. The height of the desccription should normally be the height of the container minus the top distance of the description. Control distance should be about 90% of the container's height.

Remarks

  • The carousel component is not responsive out of the box. You can use a @media directive along with a height: XX; to make it scale down on smaller screens.
  • The carousel component does not automatically scroll between slides. In order to do that, you should periodically change the checked radio button using Javascript.
  • Some of the styling of the carousel has been pre-defined (especially the opacity of the description box and the fact that the controls are at the bottom). This can be changed manually.
  • No left and right arrows are supplied with the carousel, however these can be easily added manually and their behaviour can be dynamically scripted using Javascript.

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.