Using Furtive Framework
Please click here to view my website made with the Furtive framework.
For this task we were asked to create a web page with a framework other than Bootstrap. Working from recommendations on the Hongkiat website I chose to use Furtive. I chose this framework to use because of my issues with making my Bootstrap website responsive on multiple devices. Furtive is strongly advertised as mobile-first, and it certainly lives up to the hype. When I first visited the website I enjoyed the minimalist theme and neutral colours. In comparison to the other frameworks provided to us, this was definitely the one that most caught my interest.
Once I had the relevant CSS code in Visual Studio I followed the same process as with Bootstrap and gave it all a read through first. I soon gained a solid knowledge of my way around and could begin to edit. One of my favourite things when choosing Furtive was the clear sections element it catered for along with various type options and simple form creating facility. Firstly I decided to add a make-shift menu bar to the top to give my website the feel of more depth. Underneath this I could add the header text and image. This is the relevant HTML code for the header and image.
<div class="py2">
<div class="txt--center">
<div class="bg--light-gray">
<div class="p1 my1">
<a href="#" class="btn" title="Home">Home</a>
<a href="#" class="btn" title="About">About</a>
<a href="#" class="btn" title="Contact">Contact</a>
</div>
</div>
<img src="breathe-cropped.gif" alt="Breathe"/>
<h3>Breathe</h3>
</div>
</div>
Following this, I wanted to start editing the section elements. Initially I stuck with the predetermined .bg–white .bg–off-white and .bg–light-gray classes but soon realised this wasn’t going to bode well with the pink sunset colour scheme I had planned. Neither were the predetermined colours shown in the preview.
This was my inspiration for the sunset colour scheme:
I tried to put each quote in a light grey border but the text was coming too close to the borders. I experimented with adding padding on each side but this resulted in being a very tedious project and looked messy if not executed carefully. After trying various things I decided to not go with the border idea at all, but I do look to incorporate this into my projects in the future.
Lastly I needed a way to include the name of who said the quote in and seeing as the number was centralised and the quote was left-aligned, I thought it best to experiment with aligning text to the right.
This is all the relevant CSS and HTML code:
.bg--gradientOne {
background-color: #FFD3D4
}
.measure {
max-width: 48rem;
margin: 0 auto
}
.p2 {
padding: 2rem
}
.muted {
opacity: .7
}
.h4, h4 {
font-size: 1.414rem;
/**padding-left: 0.5em;*/
font-variant: small-caps;
text-align: justify
}
.h6, h6 {
font-size: .88rem;
text-align: right
}
<div class="bg--gradientOne">
<section class="measure p2">
<div class="muted">
<h2>1</h2>
<p class="h4"> Happiness in intelligent people is the rarest thing I know. </p>
<h6>- Ernest Hemingway</h6>
</section/>
</div>
At this point I realised I was missing some key elements from the original framework and wanted to include something that links the whole thing back to the ease of Furtive. The use of a submission form at the bottom of the website that I could customise to my advantage was a good way to compliment the framework. This is the originial shown on the website:
The example shown here is to help the user create an account on the site. This style of form wasn’t suited to the nature of my website because it’s not something I would like the user to create an account for. A submission form would fit my idea better as users could submit their own quotes and after a moderation process, they can be added to a big list. This is how I designed my form:
Conclusion
In conclusion, I enjoyed using Furtive and think it’s a great framework to use because of it’s simplicity and excellent responsiveness. However, this can also be viewed as its downfall. In the screenshots below, it’s very apparent that my design displays a lot better on a smaller screen (iPhone 7) rather then on desktop (27″ Dell Monitor).
I’ve learnt a lot from this project about the different frameworks available for web designers and how they range in power and simplicity. When I use a framework again in the future I hope to use more of the inbuilt elements. This time I got very involved in my idea and didn’t include as many elements as I had liked. Possible improvements include:
- Adding images in underneath the quotes
- Condensing the form into the middle of the page. The text boxes don’t require the whole width of the screen.
- Incorporate a list at the top to.
- Add more content to be able to show off the text and section elements to their full capacity.
Bibliography
HKDC. (2017). 10 Lightweight Alternatives To Bootstrap & Foundation. [online] Available at: http://www.hongkiat.com/blog/bootstrap-alternatives/ [Accessed 19 Oct. 2017].
Otander, J. (2017). Furtive CSS. [online] Furtive.co. Available at: http://furtive.co [Accessed 19 Oct. 2017].
Design Seeds. (2017). Color Dream. [online] Available at: https://www.design-seeds.com/category/in-nature/heavens/page/4/ [Accessed 19 Oct. 2017].