While away, I decided to play around with pure CSS3 and vanilla JavaScript. Been using frameworks almost every time I work on projects. Since I learn best by doing, I decided to build a one-page Customer Relationship Management (CRM) platform with some subtle animations using pure CSS3.<\/p>\n\n\n\n
<\/a>Features<\/h2>\n\n\n\nThe admin dashboard has, among others, the following features:<\/p>\n\n\n\n
- Clean and responsive design<\/li>
- Subtle animations with pure CSS3<\/li><\/ul>\n\n\n\n
<\/a>Source<\/h2>\n\n\n\nThe project’s complete code is online and it is entirely free both for private and commercial uses.<\/p>\n\n\n\n
![\"GitHub](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--566lAguM--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev.to\/assets\/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg\")
Sirneij <\/a>\/ carrotsuite-admin-ui<\/a><\/h2>\n\n\n\nImplementation of Carrotsuite’s UI in pure HTML5, CSS3 and JavaScript<\/h3>\n\n\n\ncarrotsuite-admin-ui<\/h1>\n\n\n\n
A feature-rich admin dashboard built with pure HTML5, CSS3 and JavaScript.<\/p>\n\n\n\n
It can be accessed via this link<\/a>.
View on GitHub<\/a><\/p>\n\n\n\nIt was also hosted on github pages<\/a>.<\/p>\n\n\n\n<\/a>Some implementation details<\/h2>\n\n\n\n![\"CRM](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--U_R94nCa--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/fffmam9c43ot8n4i9bjc.png\")
<\/a><\/figure>\n\n\n\nCSS3 flex boxes and grid system were heavily used with the former being more rampant.<\/p>\n\n\n\n
<\/a>header<\/h3>\n\n\n\n.carrotsuite-nav<\/code><\/a> is a flex container which is the baseline of the header. Header elements composed of mainly fontawesome<\/a> icons. The site’s logo wrapper was absolutely positioned<\/a> to aid easy positioning.<\/p>\n\n\n\n<\/a>main<\/h3>\n\n\n\n.main<\/code><\/a> was made a grid container with its columns made 28rem 2fr<\/code>.<\/p>\n\n\n\nThe first column houses the fixed .sidebar<\/code><\/a> whose .menu<\/code><\/a> was made a flex container to ensure that the icons and their corresponding texts are horizontally aligned. A subtle animation was chipped in which puts up only the icons, with the texts used as their title using the only few lines of JavaScript<\/a> that the code base has, when the viewport collapses to some breakpoint.<\/p>\n\n\n\n![\"Smaller](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--tJs_VeX6--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/w1uphc9i8gikhtbw0rcg.png\")
<\/a><\/figure>\n\n\n\n.page-content<\/code><\/a> occupies the remaining grid column followed by other convectional styles. The only thing worth noting is the animated .dropbtn<\/code><\/a> which rotates fontawesome’s<\/a> arrow-up<\/code> icon -180deg<\/code><\/a> on hover.<\/p>\n\n\n\n<\/a>Conclusion<\/h2>\n\n\n\nThe project wasn’t that fancy but it does help me brush up the fundamentals that were escaping.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction and Motivation It’s been a while I posted here. I was busy wrapping up my Bachelor’s degree and thankfully,\u00a0I graduated with first class honours\u00a0on the 26th of November, 2021.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[187,177],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2277"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2277"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2277\/revisions"}],"predecessor-version":[{"id":2278,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2277\/revisions\/2278"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a>Source<\/h2>\n\n\n\nThe project’s complete code is online and it is entirely free both for private and commercial uses.<\/p>\n\n\n\n
Sirneij <\/a>\/ carrotsuite-admin-ui<\/a><\/h2>\n\n\n\nImplementation of Carrotsuite’s UI in pure HTML5, CSS3 and JavaScript<\/h3>\n\n\n\ncarrotsuite-admin-ui<\/h1>\n\n\n\n
A feature-rich admin dashboard built with pure HTML5, CSS3 and JavaScript.<\/p>\n\n\n\n
It can be accessed via this link<\/a>.
View on GitHub<\/a><\/p>\n\n\n\nIt was also hosted on github pages<\/a>.<\/p>\n\n\n\n<\/a>Some implementation details<\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nCSS3 flex boxes and grid system were heavily used with the former being more rampant.<\/p>\n\n\n\n
<\/a>header<\/h3>\n\n\n\n.carrotsuite-nav<\/code><\/a> is a flex container which is the baseline of the header. Header elements composed of mainly fontawesome<\/a> icons. The site’s logo wrapper was absolutely positioned<\/a> to aid easy positioning.<\/p>\n\n\n\n<\/a>main<\/h3>\n\n\n\n.main<\/code><\/a> was made a grid container with its columns made 28rem 2fr<\/code>.<\/p>\n\n\n\nThe first column houses the fixed .sidebar<\/code><\/a> whose .menu<\/code><\/a> was made a flex container to ensure that the icons and their corresponding texts are horizontally aligned. A subtle animation was chipped in which puts up only the icons, with the texts used as their title using the only few lines of JavaScript<\/a> that the code base has, when the viewport collapses to some breakpoint.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n.page-content<\/code><\/a> occupies the remaining grid column followed by other convectional styles. The only thing worth noting is the animated .dropbtn<\/code><\/a> which rotates fontawesome’s<\/a> arrow-up<\/code> icon -180deg<\/code><\/a> on hover.<\/p>\n\n\n\n<\/a>Conclusion<\/h2>\n\n\n\nThe project wasn’t that fancy but it does help me brush up the fundamentals that were escaping.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction and Motivation It’s been a while I posted here. I was busy wrapping up my Bachelor’s degree and thankfully,\u00a0I graduated with first class honours\u00a0on the 26th of November, 2021.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[187,177],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2277"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2277"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2277\/revisions"}],"predecessor-version":[{"id":2278,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2277\/revisions\/2278"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Sirneij <\/a>\/ carrotsuite-admin-ui<\/a><\/h2>\n\n\n\nImplementation of Carrotsuite’s UI in pure HTML5, CSS3 and JavaScript<\/h3>\n\n\n\ncarrotsuite-admin-ui<\/h1>\n\n\n\n
A feature-rich admin dashboard built with pure HTML5, CSS3 and JavaScript.<\/p>\n\n\n\n
It can be accessed via this link<\/a>. It was also hosted on github pages<\/a>.<\/p>\n\n\n\n CSS3 flex boxes and grid system were heavily used with the former being more rampant.<\/p>\n\n\n\n The first column houses the fixed The project wasn’t that fancy but it does help me brush up the fundamentals that were escaping.<\/p>\n","protected":false},"excerpt":{"rendered":" Introduction and Motivation It’s been a while I posted here. I was busy wrapping up my Bachelor’s degree and thankfully,\u00a0I graduated with first class honours\u00a0on the 26th of November, 2021.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[187,177],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2277"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2277"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2277\/revisions"}],"predecessor-version":[{"id":2278,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2277\/revisions\/2278"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
View on GitHub<\/a><\/p>\n\n\n\n<\/a>Some implementation details<\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a>header<\/h3>\n\n\n\n
.carrotsuite-nav<\/code><\/a> is a flex container which is the baseline of the header. Header elements composed of mainly fontawesome<\/a> icons. The site’s logo wrapper was absolutely positioned<\/a> to aid easy positioning.<\/p>\n\n\n\n<\/a>main<\/h3>\n\n\n\n
.main<\/code><\/a> was made a grid container with its columns made 28rem 2fr<\/code>.<\/p>\n\n\n\n.sidebar<\/code><\/a> whose .menu<\/code><\/a> was made a flex container to ensure that the icons and their corresponding texts are horizontally aligned. A subtle animation was chipped in which puts up only the icons, with the texts used as their title using the only few lines of JavaScript<\/a> that the code base has, when the viewport collapses to some breakpoint.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n.page-content<\/code><\/a> occupies the remaining grid column followed by other convectional styles. The only thing worth noting is the animated .dropbtn<\/code><\/a> which rotates fontawesome’s<\/a> arrow-up<\/code> icon -180deg<\/code><\/a> on hover.<\/p>\n\n\n\n<\/a>Conclusion<\/h2>\n\n\n\n