Igloo Theme
Go to iglootheme.com
  • Welcome
  • FAQ
  • Changelog
  • Common Issues
  • Getting started
    • Installation
    • Theme customization
    • Header and navigation
    • Footer
    • Multilingual site
    • Umbraco Upgrade v8 -> v13
  • Page Types
    • Site
    • Page
    • Feed
      • Post
    • Global content
    • People
    • Sitemap
    • Search
  • Widgets
    • Hero
    • Text
    • Grid
      • Header
      • Text
      • Image
      • Quote
      • Pod
      • Card
      • Code
      • Accordion
      • Price List
      • Line Break
      • Button
      • Video
      • Umbraco Form
      • Price Table
      • Navigation
      • Sub Grid
      • Slider
      • Person
    • Image
    • Text and images
    • Gallery
    • Slider
    • Tabs
    • Latest from feed
    • Map
    • Umbraco forms
    • Contact form
    • Newsletter
    • Logos
    • Instagram feed
    • Global content
    • Login
    • Register
    • Breadcrumbs
    • People
    • Section Navigation
  • Extending
    • Front-end UI
      • CSS variables
      • Buttons
      • Grid
      • Widgets
      • Forms
      • Typography
      • Helpers
    • Create a new widget
    • Intellisense on models in Visual studio
Powered by GitBook
On this page

Was this helpful?

  1. Extending
  2. Front-end UI

Helpers

Here you can see a list of CSS helper classes. They can be found in the ig-base.css file

<p class="nm">Removes margin from element</p>
<div class="nm">Removes padding from element</div>
<div class="flex-center">
    <div>Centers first level child vertically and horizontally<div>
</div>
<div class="text-left">Aligns text to the left</div>
<div class="text-center">Aligns text to the center</div>
<div class="text-right">Aligns text to the right</div>
<div class="hidden">Hides element using visibility and opacity</div>
<div class="hide">Hides element using display none</div>
<div class="hide--important">Hides element using display none important</div>
<div class="show--m">Visible from selected viewport width size and lower</div>
<div class="show--s">Visible from selected viewport width size and lower</div>
<div class="show--xs">Visible from selected viewport width size and lower</div>

<div class="hide--m">Hidden from selected viewport width size and lower</div>
<div class="hide--s">Hidden from selected viewport width size and lower</div>
<div class="hide--xs">Hidden from selected viewport width size and lower</div>
<div class="sr-only">Element will only be visible to screen readers</div>
<div class="loading">Adds loading animation to element.</div>
PreviousTypographyNextCreate a new widget

Last updated 4 years ago

Was this helpful?