CSS Module Tester


Systems like SMACSS, OOCSS and BEM are great for managing CSS complexity, reducing redundancy and creating reusability. Each organisations implementation of these ideas is likely to be different and depend on their design/developer needs and reflect the vocabulary of the organisation. Visual style guides are a great way to show how you have implemented reusable CSS and bring the principles of re-usable CSS to all the members of your web team, it’s possible to go one better though, with an interactive style guide. I built one for Goldsmiths and here’s an example of how it works.

 

Use the drop down to select the module and switch between ‘visual’ and ‘edit’ mode.

 

 


  

 

div.highlights div.content-box.lightbg-1 div.inner-content h2.box-heading

div.highlights div.content-box.lightbg-1 div.inner-content p

div.highlights div.content-box a.button.medium

div.highlights div.content-box.lightbg-1 div.inner-content h2.box-heading

div.highlights div.content-box.lightbg-1 div.inner-content p

div.highlights div.content-box a.button.medium

div.highlights div.content-box.lightbg-1 div.inner-content h2.box-heading

div.highlights div.content-box.lightbg-1 div.inner-content p

div.highlights div.content-box a.button.medium

div.highlights div.content-box.lightbg-1 div.inner-content h2.box-heading

div.highlights div.content-box.lightbg-1 div.inner-content p

div.highlights div.content-box a.button.medium

div.highlights div.content-box.lightbg-1 div.inner-content h2.box-heading

div.highlights div.content-box.lightbg-1 div.inner-content p

div.highlights div.content-box a.button.medium

An image of …

div.content-box.side-image-box.left div.inner-content h2.box-heading

div.content-box.side-image-box.left div.inner-content p.welcome-text

div.content-box.side-image-box.left div.inner-content h3

div.content-box.side-image-box.left div.inner-content p

An image of …

div.content-box.side-image-box.right div.inner-content h2.box-heading

div.content-box.side-image-box.right div.inner-content p.welcome-text

div.content-box.side-image-box.right div.inner-content h3

div.content-box.side-image-box.right div.inner-content p

div.content-box.bd-1 h3.box-heading.blocked

div.content-box.bd-1 h4.box-heading.blocked.bg-1

div.content-box.bd-1 div.inner-content p

div.content-box.bd-1 div.inner-content p

div.content-box.bd-1 div.inner-content p

  • ul li.listing div.listing-text h3.listing-title

    ul li.listing div.listing-text p.listing-summary

    ul li.listing div.listing-text p.listing-info

  • ul li.listing div.listing-text h3.listing-title

    ul li.listing div.listing-text p.listing-summary

    ul li.listing div.listing-text p.listing-info

Leave a Reply

Your email address will not be published. Required fields are marked *