Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Davina Leong
Davina Leong

Posted on • Edited on

     

Released my first Bootstrap 4 template!

template screenshot

Links

Teck Stack

This template is built in Bootstrap 4 with Font Awesome 5 for icons.
I also decided to useSASS to code up the styles to make it easier to assign colours, and font families through the use of variables, functions and mixins.

Purpose

This template is actually the first half of a 2-part demo project I built last week. I was scheduled to do a presentation on CraftCMS earlier this week. This is the template which the Craft side would use to display entry records.

Idea

I came up with the idea of creating a fake company. This company specializes in developing custom web and mobile applications for clients. The audience of the talk was a local PHP community. Hence, I came up with the company's name"Comphanny" which is a play on the words "company", "php", and "ph" being pronunced as "f" in "elephant" which is the animal typically associated with PHP.

Reflection

I initally wanted to build this template from scratch, to practise myCSS & web design skills, as well as explore Flexbox and CSS grid. But due to time constraints from my day job, and still having the Craft part of the project to build, I felt it was too ambitious. So I decided to go building off Bootstrap since it was what I was familiar with.

Top comments(4)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
edwinthinks profile image
Edwin Mak
An aspiring artist using code as another medium for creation. I am currently a software developer in an EdTech company focused on improving communication in the workplace. I work heavily in Ruby!
  • Email
  • Location
    New York / Bogotá, Colombia
  • Work
    Lead Engineer at LingoLive
  • Joined

Hey Davina! Your template looks great thanks for showcasing it!

I noticed that you mentioned your desire to work with Flexbox and CSS grid but due to time constraints you weren't able to apply these concepts. I think ultimately using Bootstrap was a good call. Next time you might be able to usebulma.io/ which is very alike to bootstrap :)

CollapseExpand
 
priteshusadadiya profile image
Pritesh Usadadiya
Performance Engineer 🔥 | agile tester | 💡 Improving Products | 🔦 searching for 🐞 bugs | Love Coding in spare time 💻
  • Location
    https://softwaretestingnotes.com
  • Education
    Masters in Computer Applications
  • Work
    Performance Engineer 🔥
  • Joined

a big ++1 for Bluma :)

CollapseExpand
 
priteshusadadiya profile image
Pritesh Usadadiya
Performance Engineer 🔥 | agile tester | 💡 Improving Products | 🔦 searching for 🐞 bugs | Love Coding in spare time 💻
  • Location
    https://softwaretestingnotes.com
  • Education
    Masters in Computer Applications
  • Work
    Performance Engineer 🔥
  • Joined

The template looks great. Congratulations!...

CollapseExpand
 
lukaszsarzynski profile image
Łukasz Sarzyński
Front-end Web Developer, Angular enthusiast.
  • Location
    Wroclaw Metropolitan Area
  • Education
    Wroclaw University of Science and Technology
  • Work
    fronted developer
  • Joined

🐲 Good looking on phone. Congratulations !

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Web developer, designer, storyteller, Jesus follower, lifelong learner, Singaporean.
  • Location
    Singapore
  • Pronouns
    Her/She
  • Joined

More fromDavina Leong

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp