This is card with image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit nulla non aliquam mollis.
The biggest part of Skar.IS library is the components part. Almost every component use variables from settings file, some of them need the JS part and jQuery to make them work.
Text components includes titles (.c-h1, .c-h2, .c-h3), paragraph component and list component.
This is paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non nulla massa. Etiam vel elit non lacus maximus varius. Donec pulvinar sollicitudin ligula, vitae congue ante volutpat ac. Aenean porttitor justo massa, in dignissim ipsum faucibus tincidunt. Praesent et mi dapibus massa mattis sagittis. Curabitur laoreet ante et venenatis porta. Donec ut pretium risus. Aenean in luctus nisi. Maecenas iaculis lacinia mi non condimentum.
This is paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non nulla massa. Etiam vel elit non lacus maximus varius. Donec pulvinar sollicitudin ligula, vitae congue ante volutpat ac. Aenean porttitor justo massa, in dignissim ipsum faucibus tincidunt. Praesent et mi dapibus massa mattis sagittis. Curabitur laoreet ante et venenatis porta. Donec ut pretium risus. Aenean in luctus nisi. Maecenas iaculis lacinia mi non condimentum.
<h1 class="c-h1">H1 title</h1>
<h2 class="c-h2">H2 title</h2>
<h3 class="c-h3">H3 title</h3>
<p class="c-paragraph">This is paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non nulla massa. Etiam vel elit non lacus maximus varius. Donec pulvinar sollicitudin ligula, vitae congue ante volutpat ac. Aenean porttitor justo massa, in dignissim ipsum faucibus tincidunt. Praesent et mi dapibus massa mattis sagittis. Curabitur laoreet ante et venenatis porta. Donec ut pretium risus. Aenean in luctus nisi. Maecenas iaculis lacinia mi non condimentum.</p>
<p class="c-paragraph">This is paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non nulla massa. Etiam vel elit non lacus maximus varius. Donec pulvinar sollicitudin ligula, vitae congue ante volutpat ac. Aenean porttitor justo massa, in dignissim ipsum faucibus tincidunt. Praesent et mi dapibus massa mattis sagittis. Curabitur laoreet ante et venenatis porta. Donec ut pretium risus. Aenean in luctus nisi. Maecenas iaculis lacinia mi non condimentum.</p>
<ul class="c-list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<ol class="c-list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
The following variables can be changed:
$headingsMarginBottom: 2rem;
$headingsFontWeight: 500;
$h1fontSize: 3.6rem;
$h2fontSize: 2.7rem;
$h3fontSize: 2.1rem;
$paragraphMarginBottom: 2rem;
$paragraphLine: 1.75;
$paragraphFontSize: 1.6rem;
$listPaddingLeft: 2rem;
$listMarginBottom: 2rem;
$listLineHeight: 1.75;
$listItemPaddingLeft: 2rem;
<ul class="c-breadcrumbs">
<li><a href="#">Main page</a></li>
<li><a href="#">Category page</a></li>
<li><a href="#">Another page</a></li>
<li>This page</li>
</ul>
The following variables can be changed:
$breadcrumbsPadding: 1.5rem 0;
$breadcrumbsFontSize: 1.8rem;
$breadcrumbsDividerPadding: 1rem;
<div class="c-carousel" data-carousel="carousel-1" data-autoslide="3000">
<div class="slide">
<div class="c-mediaWrapper-21_9">
<img src="https://picsum.photos/1320/743?image=0" alt="Picture"/>
</div>
</div>
<div class="slide">
<div class="c-mediaWrapper-21_9">
<img src="https://picsum.photos/1320/743?image=1" alt="Picture"/>
</div>
</div>
<div class="slide">
<div class="c-mediaWrapper-21_9">
<img src="https://picsum.photos/1320/743?image=2" alt="Picture"/>
</div>
</div>
</div>
<div class="c-carousel" data-carousel="carousel-2">
<div class="previous-slide" data-previous-carousel="carousel-2"></div>
<div class="slide">
<div class="c-mediaWrapper-21_9">
<img src="https://picsum.photos/1320/743?image=3" alt="Picture"/>
</div>
</div>
<div class="slide">
<div class="c-mediaWrapper-21_9">
<img src="https://picsum.photos/1320/743?image=4" alt="Picture"/>
</div>
</div>
<div class="slide">
<div class="c-mediaWrapper-21_9">
<img src="https://picsum.photos/1320/743?image=5" alt="Picture"/>
</div>
</div>
<div class="slide">
<div class="c-mediaWrapper-21_9">
<img src="https://picsum.photos/1320/743?image=6" alt="Picture"/>
</div>
</div>
<div class="slide">
<div class="c-mediaWrapper-21_9">
<img src="https://picsum.photos/1320/743?image=7" alt="Picture"/>
</div>
</div>
<div class="next-slide" data-next-carousel="carousel-2"></div>
<ul class="indicators">
<li class="active" data-numbers-carousel="carousel-2" data-number="1"></li>
<li data-numbers-carousel="carousel-2" data-number="2"></li>
<li data-numbers-carousel="carousel-2" data-number="3"></li>
<li data-numbers-carousel="carousel-2" data-number="4"></li>
<li data-numbers-carousel="carousel-2" data-number="5"></li>
</ul>
</div>
$carouselCurrentSlides: 1;
$carouselLinkWidth: 8rem;
$carouselArrowSize: 4rem;
$carouselArrowColor: white;
$carouselIndicatorsBottom: 2rem;
$carouselIndicatorsWidth: 4rem;
$carouselIndicatorsHeight: .5rem;
$carouselIndicatorsColor: white;
$carouselIndicatorsSpace: .6rem;
For example of sticky footer component, you must download the library. The following variables can be changed:
$footerHeight: 10rem;
$footerBg: #282828;
$footerBreakpoint: 80000000rem;
Inputs components can look a bit different on each browser.
Forms componentsForms components includes input/textarea/select component, label component, error component, range input component, svg radio/checkbox component and button component. The validation of forms is not part of library.
Inputs components can look a bit different on each browser.
<p class="c-paragraph">
<label for="textinput" class="c-label">Invalid text input:</label>
<input type="text" id="textinput" class="c-input error"/>
<div class="c-formError">Field above should be filled</div>
</p>
<p class="c-paragraph">
<label for="textarea" class="c-label">Textarea:</label>
<textarea class="c-input" id="textarea"></textarea>
</p>
<p class="c-paragraph">
<label for="select" class="c-label">Select:</label>
<select class="c-input" id="select">
<option>Option</option>
<option>Option</option>
</select>
</p>
<p class="c-paragraph">
<label for="range" class="c-label">Range input:</label>
<input type="range" class="c-rangeInput" id="range"/>
</p>
<p class="c-paragraph">
<label for="testradio" class="c-label">Radio inputs:</label>
<div class="c-svgInput">
<input type="radio" name="test" value="First radio input" id="test-radio" checked/>
<label for="test-radio">
<svg height="12" width="12">
<circle cx="6" cy="6" r="6" fill="#282828"></circle>
</svg>
</label>
</div>
<div class="c-svgInput">
<input type="radio" name="test" id="test-radio-2" value="Second radio input"/>
<label for="test-radio-2">
<svg height="12" width="12">
<circle cx="6" cy="6" r="6" fill="#282828"></circle>
</svg>
</label>
</div>
</p>
<p class="c-paragraph">
<label for="testradio" class="c-label">Checkbox input:</label>
<div class="c-svgInput">
<input type="checkbox" id="test-checkbox">
<label for="test-checkbox">
<svg overflow="scroll" baseProfile="tiny" version="1.1" viewBox="0 0 10.001 7.993" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="M8.428,0L3.936,4.7L1.574,2.229L0,3.875L3.149,7.17l0.787,0.824l6.066-6.347L8.428,0z" fill-rule="evenodd"></path>
</svg>
</label>
</div>
</p>
<p class="c-paragraph">
<br>
<input type="submit" class="c-button"/>
</p>
The following variables can be changed:
//FORMS COMPONENTS SETTINGS
//normal inputs
$textInputHeight: 5rem;
$textInputPadding: 1.5rem;
$textInputFontSize: 1.8rem;
$textInputBorder: .2rem solid #A9A8B2;
$textInputBorderFocus: .2rem solid #282828;
$textInputBorderError: .2rem solid red;
$textInputColor: #A9A8B2;
$textInputColorFocus: #282828;
$textInputColorError: red;
$textInputPlaceholderColor: #A9A8B2;
//range input
$rangeInputThumbBorderWidth: .2rem;
$rangeInputThumbBorderColor: #A9A8B2;
$rangeInputThumbHeight: 1.6rem;
$rangeInputThumbWidth: 1.6rem;
$rangeInputThumbBg: white;
$rangeInputThumbBorderRadius: 50%;
$rangeInputSliderHeight: 0.5rem;
$rangeInputSliderBg: #282828;
//svg input (radio+checkbox)
$svgInputWidthHeight: 2.4rem;
$svgInputPadding: .4rem;
$svgInputBorder: .2rem solid #A9A8B2;
$svgInputBg: white;
$svgInputCheckedBorder: .2rem solid #282828;
$svgInputCheckedBg: white;
$svgInputCheckedColor: #282828;
$svgInputBorderRadius: 50%;
//selects
$selectArrowColor: #A9A8B2;
$selectArrowFocusColor: #282828;
$selectArrowWidth: 1.6rem;
$selectArrowHeight: .8rem;
$selectArrowRight: 1.5rem;
$selectArrowTop: 2rem;
//buttons and button-like inputs
$buttonPadding: 3rem;
$buttonHeight: 5rem;
$buttonBg: #282828;
$buttonColor: white;
$buttonFontSize: 1.6rem;
//label
$labelMarginBottom: 1rem;
//error
$errorMarginTop: 1rem;
$errorMarginBottom: 1rem;
$errorColor: red;
Menu component has two states. Mobile - hamburger menu and desktop. Desktop state can be horizontal or vertical.
<div class="c-menu horizontal" data-menu="menu-1">
<div class="wrapper">
<a class="logo" href="#">
<img src="http://via.placeholder.com/80x80" alt="Logo"/>
</a>
<nav class="nav">
<ul class="nav-list">
<li>
<a href="#" class="active">Menu item 1</a>
</li>
</ul>
<ul class="nav-list">
<li>
<a href="#">Right menu item</a>
</li>
</ul>
</nav>
<div class="hamburger js-menu" data-start-menu="menu-1">
<div class="line"></div>
</div>
</div>
</div>
<div class="c-menu vertical" data-menu="menu-2">
<div class="wrapper">
<a class="logo" href="#">
<img src="http://via.placeholder.com/80x80" alt="Logo"/>
</a>
<nav class="nav">
<ul class="nav-list">
<li>
<a href="#" class="active">Menu item 1</a>
</li>
<li>
<a href="#">Menu item 2</a>
</li>
<li>
<a href="#">Menu item 3</a>
</li>
</ul>
<ul class="nav-list">
<li>
<a href="#">Another menu item</a>
</li>
<li>
<a href="#">Last menu item</a>
</li>
</ul>
</nav>
<div class="hamburger js-menu" data-start-menu="menu-2">
<div class="line"></div>
</div>
</div>
</div>
$menuBg: #282828;
$menuFontSize: 1.8rem;
$menuColor: white;
//menu in hamburger mode
$menuHeight: 6rem;
$menuLineHeight: 4.2rem;
$hamburgerWidth: 3rem;
$hamburgerHeight: 2rem;
$hamburgerLineHeight: .2rem;
$hamburgerLineBg: white;
$navMarginTop: 1.5rem;
$navMarginBottom: 1.5rem;
//breakpoint when hamburger menus change to normal
$menuBreakpoint: $screen-md;
//dimension for normal horizontal menu
$menuDesktopHeight: 10rem;
$menuDesktopItemsSpace: 2rem;
//dimension for normal vertical menu
$menuVerticalLogoTop: 4rem;
$menuVerticalLogoBottom: 4rem;
$menuVerticalNavTop: 0;
$menuVerticalNavBottom: 4rem;
$menuVerticalLineHeight: 5rem;
Card component is useful to make equally looking cards and media wrappers includes images, videos and embed videos inside thme in correct size ratio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit nulla non aliquam mollis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit nulla non aliquam mollis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit nulla non aliquam mollis.
<div class="row">
<div class="column xs-12 lg-default h-displayFlex">
<div class="c-card">
<div class="c-mediaWrapper-16_9">
<img src="http://via.placeholder.com/800x150" alt="Picture"/>
</div>
<div class="content">
<h2 class="c-h2">This is card with image</h2>
<p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit nulla non aliquam mollis. </p>
</div>
</div>
</div>
<div class="column xs-12 lg-default h-displayFlex">
<div class="c-card">
<div class="c-mediaWrapper-4_3">
<video autoplay loop muted width="320" height="240">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"/>
</video>
</div>
<div class="content">
<h2 class="c-h2">This is card with video</h2>
<p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit nulla non aliquam mollis.</p>
</div>
</div>
</div>
<div class="column xs-12 lg-default h-displayFlex">
<div class="c-card">
<div class="c-mediaWrapper-1_1">
<iframe src="https://www.youtube.com/embed/NpEaa2P7qZI" width="560" height="315" frameborder="0"></iframe>
</div>
<div class="content">
<h2 class="c-h2">This is card with embed video</h2>
<p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit nulla non aliquam mollis.</p>
</div>
</div>
</div>
</div>
Media wrappers use CSS property object-fit, which is not supported by Android Browser 4.4 and Internet Explorer. For Media wrappers wirh images, Skar.IS includes a polyfill. In case you are using Media Wrapper component with images and videos on Android Browser or with videos on Edge, the images and videos ratio should be same as the ratio of media wrapper.
The following variables can be changed:
$cardBg: white;
$cardShadow: 0 .5rem 1rem 0 hsla(0,0%,47%,.3);
$cardPadding: 3rem;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ornare wisi eu metus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Integer pellentesque quam vel velit. Suspendisse sagittis ultrices augue. Integer tempor. Aliquam erat volutpat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Curabitur sagittis hendrerit ante. Etiam quis quam. Praesent id justo in neque elementum ultrices. Nam sed tellus id magna elementum tincidunt. Duis risus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
<div class="c-overlay" data-close="modal-1"></div>
<div class="c-modal" id="modal-1">
<div class="close" data-close="modal-1"></div>
<div class="content">
<h2 class="c-h2">I am modal!</h2>
<p class="c-paragraph h-textJustify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ornare wisi eu metus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Integer pellentesque quam vel velit. Suspendisse sagittis ultrices augue. Integer tempor. Aliquam erat volutpat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Curabitur sagittis hendrerit ante. Etiam quis quam. Praesent id justo in neque elementum ultrices. Nam sed tellus id magna elementum tincidunt. Duis risus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
</div>
</div>
The following variables can be changed:
$overlayBg: rgba(0,0,0,.9);
$modalMaxWidth: 90vw;
$modalMaxHeight: 90vh;
$modalBg: white;
$modalContentPadding: 3rem;
$modalCloseWidth: 3rem;
$modalCloseHeight: 3rem;
$modalCloseRight: 3rem;
$modalCloseTop: 3rem;
$modalCloseLine: .2rem;
$modalCloseColor: #282828;
<ul class="c-pagination">
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
The following variables can be changed:
$paginationSpace: 1rem;
$paginationItemWidthHeight: 3.6rem;
$paginationBorderWidth: .2rem;
$paginationColor: #282828;
$paginationActiveColor: white;
Progress component can look a bit different on each browser.
<progress max="100" value="67" class="c-progress"></progress>
The following variables can be changed:
$progressHeight: 2rem;
$progressBg: #A9A8B2;
$progressValueBg: #282828;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Mauris tincidunt sem sed arcu. Aenean vel massa quis mauris vehicula lacinia. Duis viverra diam non justo. In dapibus augue non sapien. Aliquam erat volutpat. Duis condimentum augue id magna semper rutrum. Nulla quis diam. Integer in sapien. Maecenas libero. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Vivamus ac leo pretium faucibus. In rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque porta. Nullam at arcu a est sollicitudin euismod. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Maecenas sollicitudin. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Mauris tincidunt sem sed arcu. Aenean vel massa quis mauris vehicula lacinia. Duis viverra diam non justo. In dapibus augue non sapien. Aliquam erat volutpat. Duis condimentum augue id magna semper rutrum. Nulla quis diam. Integer in sapien. Maecenas libero. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Vivamus ac leo pretium faucibus. In rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque porta. Nullam at arcu a est sollicitudin euismod. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Maecenas sollicitudin. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
<button class="c-button" data-tabs="tabs-1" data-tab="1">Tab 1</button>
<button class="c-button" data-tabs="tabs-1" data-tab="2">Tab 2</button>
<button class="c-button" data-tabs="tabs-1" data-tab="3">Tab 3</button>
<div class="c-tabs" data-tabs="tabs-1">
<div class="tab active">
<h2 class="c-h2">Tab 1 title</h2>
<p class="c-paragraph">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Mauris tincidunt sem sed arcu. Aenean vel massa quis mauris vehicula lacinia. Duis viverra diam non justo. In dapibus augue non sapien. Aliquam erat volutpat. Duis condimentum augue id magna semper rutrum. Nulla quis diam. Integer in sapien. Maecenas libero. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Vivamus ac leo pretium faucibus. In rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque porta. Nullam at arcu a est sollicitudin euismod. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Maecenas sollicitudin. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
</p>
</div>
<div class="tab">
<h2 class="c-h2">Tab 2 title</h2>
<p class="c-paragraph">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Mauris tincidunt sem sed arcu. Aenean vel massa quis mauris vehicula lacinia. Duis viverra diam non justo. In dapibus augue non sapien. Aliquam erat volutpat. Duis condimentum augue id magna semper rutrum. Nulla quis diam. Integer in sapien. Maecenas libero. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Vivamus ac leo pretium faucibus. In rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque porta. Nullam at arcu a est sollicitudin euismod. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Maecenas sollicitudin. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
</p>
</div>
<div class="tab">
<h2 class="c-h2">Tab 3 title</h2>
<div class="c-mediaWrapper-21_9">
<video autoplay loop muted width="320" height="240">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"/>
</video>
</div>
</div>
</div>
<div class="c-vizual"></div>
<div class="c-videoVizual">
<video muted autoplay loop>
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
The following variables can be changed:
$vizualHeight: 40rem;
$vizualBg: #282828;