beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Built navigation for core, added ids

Browse source 
Added ids to all parts of the modules docs, linked to them through a nav sidebar in core. (Next commit will implement this for all modules)
This commit is contained in:
Angelos Chalaris 2017-04-28 00:25:22 +03:00
parent 829b47cce4
commit df91cadf49
10 changed files with 248 additions and 222 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/card.html
View file

@ -41,7 +41,7 @@
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="row" style="padding-top: 40px;" id="card-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Card</h1>
<p>The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
@ -64,7 +64,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="basic-syntax">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"> <h2>Basic syntax</h2></div>
@ -180,7 +180,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="sections-media">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Sections &amp; media</h2></div>
@ -223,7 +223,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="sizing-fluidity">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Card sizing &amp; fluidity</h2></div>

10
docs/contextual.html
View file

@ -41,7 +41,7 @@
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="row" style="padding-top: 40px;" id="contextual-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Contextual</h1>
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
@ -64,7 +64,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="text-highlighting">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Text highlighting</h2></div>
@ -123,7 +123,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="alerts">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Alerts</h2></div>
@ -174,7 +174,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="animated-alerts">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Animated alerts</h2></div>
@ -210,7 +210,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="tooltips">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Tooltips</h2></div>

80
docs/core.html
View file

@ -21,28 +21,55 @@
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; } }
header.sticky a.button { padding: 4px 6px; font-size: 0.95em; }
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<header class="sticky" style="height:36px;">
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="core-title">
<div class="col-sm-12">
<h1>Core</h1>
<p>The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
@ -50,7 +77,7 @@
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@ -64,8 +91,8 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="row" id="typography">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Typography</h2></div>
<div class="section row">
@ -82,8 +109,8 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="row" id="headings">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Headings</h2></div>
<div class="section row">
@ -109,8 +136,8 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="row" id="common-textual-elements">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Common textual elements</h2></div>
<div class="section row">
@ -143,8 +170,8 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="row" id="lists">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Lists</h2></div>
<div class="section row">
@ -181,8 +208,8 @@
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="row" id="images-captions">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Image responsiveness &amp; captions</h2></div>
<div class="section row">
@ -202,12 +229,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

14
docs/grid.html
View file

@ -43,7 +43,7 @@
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="row" style="padding-top: 40px;" id="grid-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Grid</h1>
<p>The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p>
@ -66,7 +66,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="basic-layout">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Basic layout</h2></div>
@ -240,7 +240,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="screen-specific-layout">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Screen-specific layouts</h2></div>
@ -336,7 +336,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="predefined-layout">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Predefined layouts</h2></div>
@ -393,7 +393,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="column-offset">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Column offsets</h2></div>
@ -466,7 +466,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="column-reorder">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Column reordering</h2></div>
@ -540,7 +540,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="media-object">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Media object pattern</h2></div>

10
docs/input_control.html
View file

@ -42,7 +42,7 @@
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="row" style="padding-top: 40px;" id="input-control-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Input Control</h1>
<p>The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements' styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
@ -65,7 +65,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="forms-input">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Forms &amp; input</h2></div>
@ -237,7 +237,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="checkbox-radio">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Checkboxes &amp; radio buttons</h2></div>
@ -325,7 +325,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="buttons">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Buttons &amp; button groups</h2></div>
@ -406,7 +406,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="file-upload">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>File upload buttons</h2></div>

10
docs/navigation.html
View file

@ -41,7 +41,7 @@
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="row" style="padding-top: 40px;" id="navigation-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Navigation</h1>
<p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
@ -64,7 +64,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="header">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Header</h2></div>
@ -123,7 +123,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="navigation-bar">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Navigation bar</h2></div>
@ -176,7 +176,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="footer">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Footer</h2></div>
@ -197,7 +197,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="sticky">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Sticky headers and footers</h2></div>

10
docs/progress.html
View file

@ -43,7 +43,7 @@
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="row" style="padding-top: 40px;" id="progress-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Progress</h1>
<p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
@ -66,7 +66,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="basic-progress-bar">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Basic progress bar</h2></div>
@ -104,7 +104,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="progress-variants">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Progress bar variants</h2></div>
@ -147,7 +147,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="donut-spinner">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Donut spinner</h2></div>
@ -183,7 +183,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="spinner-variants">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Donut spinner variants</h2></div>

6
docs/tab.html
View file

@ -41,7 +41,7 @@
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="row" style="padding-top: 40px;" id="tab-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Tab</h1>
<p>The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p>
@ -64,7 +64,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="basic-syntax">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Basic syntax</h2></div>
@ -180,7 +180,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="stacked-tabs">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Stacked tabs</h2></div>

8
docs/table.html
View file

@ -47,7 +47,7 @@
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="row" style="padding-top: 40px;" id="table-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Table</h1>
<p>The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p>
@ -70,7 +70,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="syntax-responsiveness">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Basic syntax &amp; responsiveness</h2></div>
@ -197,7 +197,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="horizontal-tables">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section">
@ -274,7 +274,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="variants-matrices">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Table variants &amp; matrices</h2></div>

14
docs/utility.html
View file

@ -41,7 +41,7 @@
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="row" style="padding-top: 40px;" id="utility-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Utility</h1>
<p>The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p>
@ -64,7 +64,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="visibility-helpers">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Visibility helpers</h2></div>
@ -91,7 +91,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="borders-shadows">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Generic borders &amp; shadows</h2></div>
@ -140,7 +140,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="responsive-sizing">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Responsive sizing &amp; spacing classes</h2></div>
@ -168,7 +168,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="responsive-visibility">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Responsive visibility helpers</h2></div>
@ -216,7 +216,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="breadcrumbs">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Breadcrumbs</h2></div>
@ -268,7 +268,7 @@
</div>
</div>
</div>
<div class="row">
<div class="row" id="close-icon">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Close icon</h2></div>