Search
Social Header Links easy Drop in Code with Font Awesome Icons
Drop in this code in the header of your site to quickly add some social links in your header. Social Icons in Header This version uses foundation for the grid system. But you can swap this grid..
Create a button with CSS, HTML and Center it!
A nice quick video on how to create a button with css and center it. Going from a blank html page into a div element with a button in it and then centering the button and giving it some life wi..
Bootstrap 4.2 Kitchen Sink
Here is the full (almost full) collection of bootstrap elements in this kitchen sink code for bootstrap. Thanks to ycohio for this useful reference.
display items in a css grid
So i removed bootstrap and now the items in my post header look like this: and this: this was using the row and col format in bootstrap we can switch this to a css grid quite easily using..
Front-End Checklist
The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production. If you want to check your project for the best practi..
simple.css a nice simple and stylish framework replacement
What is simple.css? Simple CSS is a framework that you can just drop into your site, and it styles the actual html elements, so no class names are required for this out of the box, just add the scrip..
WCAG Responsive Accessible Menu Dropdown Library
What is WCAG Responsive Accessible Menu? Here we have a javascript library with css and html that produces a responsive and mobile compatible dropdown navigation system. When the screen size goes int..
Responsive Mobile Bootstrap 4 Animated Rounded Navbar
What is it? An Animated Bootstrap based navigation with font awesome icons What can i use this for? This navigation works on mobile and desktop browsers for a nice twist to your navigation needs.&n..
Lightbox for Bootstrap 5
A pure JavaScript Bootstrap 5 lightbox that supports images, galleries, YouTube, Vimeo, and Instagram—built around Bootstrap's Modal and Carousel plugins. Have you been using Lightbox for ..
404 Lost in Space Animated
An interesting take on a 404 error not found page with a space theme.
re theming the bootstrap card into something more stylish
I was thinking that i would re style the following default bootstrap card into something that looks a bit different. The bootstrap card is very functional and great for layouts but its not the best lo..
Pure CSS Gradient Background Animation
this animated background element can give your project a bit more life, with a nive subtle background gradient changing effect that cycles slowly between the selected colours.
adding some more padding to the card in content areas
i noticed that the content areas or the article areas are a bit close up to the margins making things look a bit cramped so i added the following media query css to pad it out a bit more. the query i..