Section pure css section style with colors

base #

Example Code

Section header Action

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum enim veniam quos similique animi recusandae sit dignissimos maxime repellat maiores ab ad, quas libero fugiat laboriosam ipsam nisi, adipisci velit?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat ducimus quas qui enim doloribus incidunt tenetur suscipit maxime? Perspiciatis labore magni provident tempora libero eum blanditiis eligendi nesciunt doloremque velit?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum est, exercitationem porro eaque, expedita architecto sed cum consectetur odio aperiam culpa cupiditate eveniet officiis ipsam perspiciatis consequuntur, id nobis placeat?

Section Footer Save

            
              
  
    Section header
    Action
  
  
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum enim veniam quos similique animi recusandae sit dignissimos maxime repellat maiores ab ad, quas libero fugiat laboriosam ipsam nisi, adipisci velit?
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat ducimus quas qui enim doloribus incidunt tenetur suscipit maxime? Perspiciatis labore magni provident tempora libero eum blanditiis eligendi nesciunt doloremque velit?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum est, exercitationem porro eaque, expedita architecto sed cum consectetur odio aperiam culpa cupiditate eveniet officiis ipsam perspiciatis consequuntur, id nobis placeat?
  
  
    Section Footer
    Save

colors #

Example Code

Section tag

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reiciendis velit assumenda adipisci eveniet, perspiciatis at delectus id culpa ullam nisi similique explicabo dolorum nulla autem rem voluptate, eos minima?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut expedita inventore minima vel quas vero nam sequi cumque ipsa consectetur beatae iusto aliquam error accusamus, labore incidunt nisi repellendus quam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quae, similique debitis rerum molestiae commodi? Doloremque vitae est tempora rerum labore praesentium, nam dolorum incidunt? Veniam exercitationem autem dolores quis?

Section class with margin

Hoverable

            
              Section tag

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reiciendis velit assumenda adipisci eveniet, perspiciatis at delectus id culpa ullam nisi similique explicabo dolorum nulla autem rem voluptate, eos minima?


  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut expedita inventore minima vel quas vero nam sequi cumque ipsa consectetur beatae iusto aliquam error accusamus, labore incidunt nisi repellendus quam!


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quae, similique debitis rerum molestiae commodi? Doloremque vitae est tempora rerum labore praesentium, nam dolorum incidunt? Veniam exercitationem autem dolores quis?


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quae, similique debitis rerum molestiae commodi? Doloremque vitae est tempora rerum labore praesentium, nam dolorum incidunt? Veniam exercitationem autem dolores quis?

Section class with margin

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reiciendis velit assumenda adipisci eveniet, perspiciatis at delectus id culpa ullam nisi similique explicabo dolorum nulla autem rem voluptate, eos minima?


  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut expedita inventore minima vel quas vero nam sequi cumque ipsa consectetur beatae iusto aliquam error accusamus, labore incidunt nisi repellendus quam!


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quae, similique debitis rerum molestiae commodi? Doloremque vitae est tempora rerum labore praesentium, nam dolorum incidunt? Veniam exercitationem autem dolores quis?


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quae, similique debitis rerum molestiae commodi? Doloremque vitae est tempora rerum labore praesentium, nam dolorum incidunt? Veniam exercitationem autem dolores quis?

Hoverable

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reiciendis velit assumenda adipisci eveniet, perspiciatis at delectus id culpa ullam nisi similique explicabo dolorum nulla autem rem voluptate, eos minima?


  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut expedita inventore minima vel quas vero nam sequi cumque ipsa consectetur beatae iusto aliquam error accusamus, labore incidunt nisi repellendus quam!


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quae, similique debitis rerum molestiae commodi? Doloremque vitae est tempora rerum labore praesentium, nam dolorum incidunt? Veniam exercitationem autem dolores quis?


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quae, similique debitis rerum molestiae commodi? Doloremque vitae est tempora rerum labore praesentium, nam dolorum incidunt? Veniam exercitationem autem dolores quis?

Setup #

classes less/formir/setup/classes.less #

        
          @section: section;  //without . (dot for class)
@section-full-height: full-height;

@section-header: section-header;
@section-footer: section-footer;
@section-content: section-content;
@section-expandable: section-expandable;
@with-padding: with-padding;
@with-table: with-table;
@with-tabs: with-tabs;
@with-border: with-border;
@overflow-hidden: overflow-hidden;

// Colors
@background-color: background;
@background-color-hoverable: hoverable;
@text-color: text;
@border-color: boder;

core less/formir/setup/core.less #

        
          @colors: body, primary, alternative, link, mute, cancel, success, info, warning, danger, color-1, color-2, color-3;

variables less/formir/setup/variables.less #

        
          @section-radius: 4px;
@section-header-padding: 1.5rem 1rem; //with .with-padding class
@section-footer-padding: 1.5rem 1rem;  //with .with-padding class
@section-content-padding: 1.5rem 1rem; //with .with-padding class

@section-table-padding-left: 1rem;
@section-table-padding-right: 1rem;
@section-shadow: 0 0 4px rgba(21, 16, 60, 0.22);
@section-border: 1px solid lighten(@color-mute, 60%);
@section-background: #fff;
@section-margin: @h-margin * @size-l 0;