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

Inline text elements

Link	Bold	Italic
Underline	~~Deleted~~	Inserted
~~Strikethrough~~	Small	Abbr.
Text _Sub	Text ^Sup	`Kbd`
Mark	`variable`	`Samp`
`Code`	Time = 7 Juillet	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?

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quam suscipit temporibus.
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.
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 Label as button

Form elements

Text Lorem ipsum dolor sit amet, consectetur adipisicing. Password Lorem ipsum dolor sit amet, consectetur adipisicing. Number Range slider

Radio buttons Radio button checked Radio button unchecked

Checkboxes Checkbox checked Checkbox unchecked

Switches Switch checked Switch unchecked

Select Date Time Telephone Color Search File browser Valid Invalid Disabled

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;
}