barrd NET (Bauhaus Social)
Services Provided
An in house production, used as a test bed for some of my ‘outside the box’ concept ideas. As a rarity it also has a specialised print.css file. Formerly run on the domain barrd.net it is now hosted and run on Netlify on a subdomain, bdn.barrd.dev
Project Details
I have long had an interest in Bauhaus design, so I decided to give myself a challenge and create three different layouts for Desktop, Tablet and Mobile. This is now an experimental home for my social media links. All images are SVG that contain text enabling me to manipulate with granular control their length to allow for a responsive environment.
Fun Stuff and Challenges
The original plan was to use a fancier font for the larger text using the JavaScript library fittext.js to expand the text to fully fit a container. However this idea quickly failed as adding additional CSS to position the elements caused the JS to error. I switched to using macSVG for creating text based SVG headers and whilst not a perfect solution did actually get me out of a pickle.
Print CSS File
I also wanted to add a bit of flair if a user opted to print the page off, so using the facilities offered via a print.css file I created the printable page below.
Head over to the site and try it out in the three different layout modes – Desktop, Tablet and Mobile. If you encounter any issues, design, accessibility or printing please let me know.
// End of Project
More Information
Further Reading
- Bauhaus Modernism Art (wikipedia.org)
- macSVG SVG Editor (macsvg.org)
- Netlify Website (netlify.com)
About Dave A.K.A. 'barrd'
