tessl/npm-semantic-ui-css

CSS-only distribution of Semantic UI providing comprehensive styling and JavaScript behaviors for web applications

—

Pending

Overview

Eval results

Files

UI Views

Name: tessl/npm-semantic-ui-css
Author: tessl

Content presentation components including cards, comments, feeds, and statistics for displaying rich content and data visualization.

Capabilities

Card

Content cards for displaying structured information in visually appealing containers.

.ui.card                      /* Single card */
.ui.cards                     /* Card group container */

/* Card content areas */
.ui.card .content             /* Card content section */
.ui.card .image               /* Card image area */
.ui.card .header              /* Card header text */
.ui.card .meta                /* Card metadata */
.ui.card .description         /* Card description text */
.ui.card .extra.content       /* Additional card content */

/* Card variations */
.ui.fluid.card                /* Full-width card */
.ui.centered.card             /* Centered single card */
.ui.raised.card               /* Card with shadow */
.ui.link.card                 /* Clickable card */

/* Card groups */
.ui.one.cards                 /* Single column cards */
.ui.two.cards                 /* Two column cards */
.ui.three.cards               /* Three column cards */
.ui.four.cards                /* Four column cards */
.ui.five.cards                /* Five column cards */
.ui.six.cards                 /* Six column cards */
.ui.seven.cards               /* Seven column cards */
.ui.eight.cards               /* Eight column cards */

/* Card states */
.ui.card .disabled            /* Disabled card content */
.ui.cards .disabled.card      /* Disabled card in group */

/* Responsive cards */
.ui.stackable.cards           /* Cards stack on mobile */
.ui.doubling.cards            /* Cards double up on larger screens */

Usage Examples:

<!-- Single card -->
<div class="ui card">
  <div class="image">
    <img src="avatar.jpg">
  </div>
  <div class="content">
    <div class="header">John Doe</div>
    <div class="meta">Developer</div>
    <div class="description">
      John is a software developer working on web applications.
    </div>
  </div>
  <div class="extra content">
    <a><i class="user icon"></i>22 Friends</a>
  </div>
</div>

<!-- Card group -->
<div class="ui three cards">
  <div class="card">
    <div class="content">
      <div class="header">Project Alpha</div>
      <div class="description">Web application project</div>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <div class="header">Project Beta</div>
      <div class="description">Mobile application project</div>
    </div>
  </div>
  <div class="card">
    <div class="content">
      <div class="header">Project Gamma</div>
      <div class="description">Desktop application project</div>
    </div>
  </div>
</div>

<!-- Link cards -->
<div class="ui link cards">
  <div class="card">
    <div class="content">
      <div class="header">Article Title</div>
      <div class="description">Article summary goes here...</div>
    </div>
  </div>
</div>

Comment

Comment threads and discussion systems for user-generated content.

.ui.comments                  /* Comments container */

/* Comment structure */
.ui.comments .comment         /* Individual comment */
.ui.comments .avatar          /* Comment author avatar */
.ui.comments .content         /* Comment content area */
.ui.comments .author          /* Comment author name */
.ui.comments .metadata        /* Comment metadata */
.ui.comments .text            /* Comment text content */
.ui.comments .actions         /* Comment action links */

/* Comment variations */
.ui.minimal.comments          /* Minimal comment styling */
.ui.small.comments            /* Small sized comments */
.ui.large.comments            /* Large sized comments */

/* Comment states */
.ui.comments .collapsed.comment   /* Collapsed comment */
.ui.comments .comment .reply      /* Reply to comment */

/* Nested comments */
.ui.comments .comments        /* Nested comment thread */

Usage Examples:

<!-- Comment thread -->
<div class="ui comments">
  <h3 class="ui dividing header">Comments</h3>
  
  <div class="comment">
    <a class="avatar">
      <img src="avatar1.jpg">
    </a>
    <div class="content">
      <a class="author">Tom Lukic</a>
      <div class="metadata">
        <span class="date">Today at 5:42PM</span>
      </div>
      <div class="text">
        This is a great article! I really enjoyed reading it.
      </div>
      <div class="actions">
        <a class="reply">Reply</a>
      </div>
    </div>
  </div>
  
  <div class="comment">
    <a class="avatar">
      <img src="avatar2.jpg">
    </a>
    <div class="content">
      <a class="author">Sarah Connor</a>
      <div class="metadata">
        <span class="date">Yesterday at 12:30AM</span>
      </div>
      <div class="text">
        I agree with Tom, very well written.
      </div>
      <div class="actions">
        <a class="reply">Reply</a>
      </div>
      <!-- Nested reply -->
      <div class="comments">
        <div class="comment">
          <a class="avatar">
            <img src="avatar3.jpg">
          </a>
          <div class="content">
            <a class="author">John Smith</a>
            <div class="metadata">
              <span class="date">Just now</span>
            </div>
            <div class="text">
              Thanks for the feedback!
            </div>
            <div class="actions">
              <a class="reply">Reply</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Feed

Activity feeds for displaying chronological lists of events and updates.

.ui.feed                      /* Feed container */

/* Feed structure */
.ui.feed .event               /* Individual feed event */
.ui.feed .label               /* Event label/avatar */
.ui.feed .content             /* Event content */
.ui.feed .summary             /* Event summary */
.ui.feed .date                /* Event date */
.ui.feed .meta                /* Event metadata */
.ui.feed .extra               /* Extra event content */

/* Feed variations */
.ui.small.feed                /* Small sized feed */
.ui.large.feed                /* Large sized feed */

/* Feed elements */
.ui.feed .event .image        /* Event image */
.ui.feed .event .icon         /* Event icon */
.ui.feed .event .user         /* Event user reference */

Usage Examples:

<!-- Activity feed -->
<div class="ui feed">
  <div class="event">
    <div class="label">
      <img src="user1.jpg">
    </div>
    <div class="content">
      <div class="summary">
        <a class="user">Elliot Fu</a> added <a>Rachel Royce</a> as a friend
        <div class="date">1 Hour Ago</div>
      </div>
      <div class="meta">
        <a class="like">
          <i class="like icon"></i> 4 Likes
        </a>
      </div>
    </div>
  </div>
  
  <div class="event">
    <div class="label">
      <i class="pencil icon"></i>
    </div>
    <div class="content">
      <div class="summary">
        You submitted a new post to the page
        <div class="date">3 days ago</div>
      </div>
      <div class="extra text">
        I'm having a great time in Nepal. I hope everyone is having a good time back home.
      </div>
      <div class="meta">
        <a class="like">
          <i class="like icon"></i> 11 Likes
        </a>
      </div>
    </div>
  </div>
  
  <div class="event">
    <div class="label">
      <img src="user2.jpg">
    </div>
    <div class="content">
      <div class="summary">
        <a>Helen Troy</a> added 2 photos
        <div class="date">4 days ago</div>
      </div>
      <div class="extra images">
        <a><img src="photo1.jpg"></a>
        <a><img src="photo2.jpg"></a>
      </div>
    </div>
  </div>
</div>

Item

Content items for displaying lists of structured content with images and metadata.

.ui.items                     /* Items container */

/* Item structure */
.ui.items .item               /* Individual item */
.ui.items .image              /* Item image */
.ui.items .content            /* Item content area */
.ui.items .header             /* Item header/title */
.ui.items .meta               /* Item metadata */
.ui.items .description        /* Item description */
.ui.items .extra              /* Extra item content */

/* Item variations */
.ui.relaxed.items             /* Items with extra spacing */
.ui.divided.items             /* Items with dividers */
.ui.link.items                /* Clickable items */

/* Item states */
.ui.items .disabled.item      /* Disabled item */
.ui.items .active.item        /* Active item */

Usage Examples:

<!-- Items list -->
<div class="ui items">
  <div class="item">
    <div class="image">
      <img src="product1.jpg">
    </div>
    <div class="content">
      <a class="header">Laptop Computer</a>
      <div class="meta">
        <span class="price">$1200</span>
        <span class="stay">1TB SSD</span>
      </div>
      <div class="description">
        <p>High-performance laptop perfect for development work.</p>
      </div>
      <div class="extra">
        <div class="ui label">Technology</div>
        <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
      </div>
    </div>
  </div>
  
  <div class="item">
    <div class="image">
      <img src="product2.jpg">
    </div>
    <div class="content">
      <a class="header">Wireless Mouse</a>
      <div class="meta">
        <span class="price">$29</span>
        <span class="stay">Bluetooth</span>
      </div>
      <div class="description">
        <p>Ergonomic wireless mouse with long battery life.</p>
      </div>
      <div class="extra">
        <div class="ui right floated primary button">
          Buy now
          <i class="right chevron icon"></i>
        </div>
        <div class="ui label">Accessories</div>
      </div>
    </div>
  </div>
</div>

Statistic

Statistical displays for presenting numerical data and metrics.

.ui.statistic                 /* Single statistic */
.ui.statistics                /* Statistics group */

/* Statistic content */
.ui.statistic .value          /* Statistic value */
.ui.statistic .label          /* Statistic label */

/* Statistic variations */
.ui.horizontal.statistic      /* Horizontal layout statistic */
.ui.inverted.statistics       /* Inverted color statistics */

/* Statistic sizes */
.ui.mini.statistic            /* Mini statistic */
.ui.tiny.statistic            /* Tiny statistic */
.ui.small.statistic           /* Small statistic */
.ui.large.statistic           /* Large statistic */
.ui.huge.statistic            /* Huge statistic */

/* Statistic groups */
.ui.one.statistics            /* Single statistic group */
.ui.two.statistics            /* Two statistics group */
.ui.three.statistics          /* Three statistics group */
.ui.four.statistics           /* Four statistics group */
.ui.five.statistics           /* Five statistics group */
.ui.six.statistics            /* Six statistics group */
.ui.seven.statistics          /* Seven statistics group */
.ui.eight.statistics          /* Eight statistics group */
.ui.nine.statistics           /* Nine statistics group */
.ui.ten.statistics            /* Ten statistics group */

/* Statistic content types */
.ui.statistic .text.value     /* Text value statistic */

Usage Examples:

<!-- Single statistic -->
<div class="ui statistic">
  <div class="value">22</div>
  <div class="label">Saves</div>
</div>

<!-- Statistics group -->
<div class="ui statistics">
  <div class="statistic">
    <div class="value">22</div>
    <div class="label">Faves</div>
  </div>
  <div class="statistic">
    <div class="value">31,200</div>
    <div class="label">Views</div>
  </div>
  <div class="statistic">
    <div class="value">22</div>
    <div class="label">Members</div>
  </div>
</div>

<!-- Horizontal statistics -->
<div class="ui horizontal statistics">
  <div class="statistic">
    <div class="value">2,204</div>
    <div class="label">Views</div>
  </div>
  <div class="statistic">
    <div class="value">3,322</div>
    <div class="label">Downloads</div>
  </div>
</div>

<!-- Colored and sized statistics -->
<div class="ui huge red statistic">
  <div class="value">54</div>
  <div class="label">Signups</div>
</div>

<!-- Text value statistic -->
<div class="ui statistic">
  <div class="text value">
    Three<br>
    Thousand
  </div>
  <div class="label">Signups</div>
</div>

Advertisement placeholders for content monetization and promotional spaces.

.ui.ad                        /* Advertisement container */

/* Ad sizes (standard IAB sizes) */
.ui.banner.ad                 /* 728x90 banner ad */
.ui.leaderboard.ad            /* 728x90 leaderboard ad */
.ui.medium.rectangle.ad       /* 300x250 medium rectangle ad */
.ui.large.rectangle.ad        /* 336x280 large rectangle ad */
.ui.half.page.ad              /* 300x600 half page ad */
.ui.small.rectangle.ad        /* 180x150 small rectangle ad */
.ui.vertical.banner.ad        /* 120x240 vertical banner ad */
.ui.button.ad                 /* 125x125 button ad */
.ui.square.ad                 /* 250x250 square ad */
.ui.small.square.ad           /* 200x200 small square ad */
.ui.skyscraper.ad             /* 120x600 skyscraper ad */
.ui.wide.skyscraper.ad        /* 160x600 wide skyscraper ad */

/* Mobile ad sizes */
.ui.mobile.banner.ad          /* 320x50 mobile banner ad */
.ui.mobile.leaderboard.ad     /* 320x50 mobile leaderboard ad */

/* Ad states */
.ui.centered.ad               /* Centered advertisement */

Usage Examples:

<!-- Standard banner ad -->
<div class="ui banner ad" data-text="Advertisement"></div>

<!-- Medium rectangle ad -->
<div class="ui medium rectangle ad" data-text="Advertisement"></div>

<!-- Centered ad -->
<div class="ui centered banner ad" data-text="Advertisement"></div>

<!-- Mobile banner ad -->
<div class="ui mobile banner ad" data-text="Mobile Ad"></div>

View Patterns

Responsive Behavior

Views adapt to screen size changes:

.ui.stackable.cards           /* Cards stack on mobile */
.ui.doubling.cards            /* Cards double up on larger screens */
.ui.stackable.statistics      /* Statistics stack on mobile */

Color Variations

Views support standard color theming:

.ui.red.statistic             /* Red colored statistic */
.ui.blue.card                 /* Blue colored card */
.ui.green.feed                /* Green colored feed */

Size Variations

Views support the standard size scale:

.ui.mini.statistic            /* Mini sized statistic */
.ui.small.comments            /* Small sized comments */
.ui.large.feed                /* Large sized feed */

Install with Tessl CLI