SASS SWING CLASS LESS TEMPLATE

Use less class as possible in your HTML. Try to just use semantic.

Typography

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolorum ducimus, exercitationem hic illum in incidunt ipsa maiores maxime, officia quas quis quod recusandae repudiandae rerum saepe sed sequi sint sit soluta veritatis, voluptate voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dicta eaque eum, exercitationem fugit mollitia nobis! At autem commodi consectetur cumque dolore eligendi illo maiores modi molestias non quae quidem, recusandae rem reprehenderit tempora vitae.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio enim eum ipsa iste nobis odit placeat quidem veritatis. Alias aperiam asperiores enim explicabo facere fugiat ipsa maiores, necessitatibus nesciunt nobis quae, quidem rerum veritatis voluptatum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio dolor eius, enim et eveniet fuga ipsam nobis nulla obcaecati odio perspiciatis provident quae rem repellat sit, soluta vero voluptatem? Accusamus consequuntur enim ratione repellendus!

Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid aut commodi consequatur debitis dicta ducimus esse et in ipsam laudantium non nostrum pariatur, provident qui quibusdam reprehenderit sit ullam veritatis voluptatum. Architecto, error, nesciunt.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi facere fuga laudantium mollitia, nisi placeat quae voluptatem voluptatibus. Aliquam at doloremque in iusto, non odit qui voluptatum? Adipisci eveniet facere in molestiae natus ratione voluptatum!

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolorum ducimus, exercitationem hic illum in incidunt ipsa maiores maxime, officia quas quis quod recusandae repudiandae rerum saepe sed sequi sint sit soluta veritatis, voluptate voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dicta eaque eum, exercitationem fugit mollitia nobis! At autem commodi consectetur cumque dolore eligendi illo maiores modi molestias non quae quidem, recusandae rem reprehenderit tempora vitae.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolorum ducimus, exercitationem hic illum in incidunt ipsa maiores maxime, officia quas quis quod recusandae repudiandae rerum saepe sed sequi sint sit soluta veritatis, voluptate voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dicta eaque eum, exercitationem fugit mollitia nobis! At autem commodi consectetur cumque dolore eligendi illo maiores modi molestias non quae quidem, recusandae rem reprehenderit tempora vitae.

Inline text elements

Link Bold Italic
Underline Deleted Inserted
Strikethrough Small Abbr.
Text Sub Text Sup Kbd
Mark variable Samp
Code Time = Output = 60

Lists

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur.
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, fuga?
    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis mollitia nostrum tempore.
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, odit!
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, quia.
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    4. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, possimus?
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, veritatis?
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quam suscipit temporibus.
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, ut.
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo!
    • Lorem ipsum dolor sit amet, consectetur adipisicing.
      1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga!
      2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, laboriosam, sed!
      3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit!
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, harum!
    • Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet, consectetur adipisicing.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, incidunt.
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga!
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, laboriosam, sed!
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit!
    • Lorem ipsum dolor sit amet, consectetur adipisicing.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur delectus distinctio non.

Blockquotes

"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam atque, ex, facere fugit, laborum molestiae odio quam reprehenderit rerum sunt vel!"
- Lorem ipsum dolor.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam atque, ex, facere fugit, laborum molestiae odio quam reprehenderit rerum sunt vel!" - Lorem ipsum dolor.

Medias

Button

Link as button

Form elements

Radio buttons
Checkboxes
Switches

Tables

# Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell

Accordions

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aspernatur dolore natus, nostrum odio ratione repellendus veniam? Atque eos exercitationem impedit iste necessitatibus.

Accordion 2
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga!
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, laboriosam, sed!
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit!
  • Lorem ipsum dolor sit amet, consectetur adipisicing.

Progress bar

Preformated text

		_____________
		< Sass Swing !>
		-------------
		       \   ^__^
		        \  (oo)\_______
		           (__)\       )\/\
		               ||----w |
		               ||     ||
      
body {
  background-color : red;
}