A modern, fully-responsive, lightweight CSS framework to make websites in no time!
It already contains all the necessary CSS, so you don't need to mess with styling the elements in your website - just use DS-CSS and focus on the content. It removes the difficulty of switching repeatedly between HTML and CSS files. Contains all commonly used functionalities like animations, carousels etc. It saves your time while creating a website and is normalized - so no cross browser bugs!
A simple example showing how to style a button using DS-CSS: <button class="ds-button ds-sea-green ds-text-white ds-padding-xlarge">Explore Now</button>
You can download the CSS file (http://ds-css.16mb.com/css/ds.css) or just include this code in your HTML to use DS-CSS directly:
<link rel="stylesheet" type="text/css" href="http://ds-css.16mb.com/css/ds.css" />
With 80+ colors in our library, responsive layout elements, large number of preset animations, you just need to write their names in your HTML code. Example: <p class="animate-fade">Feeling fuzzy!</p>. The fade-in animation will automatically apply on the paragraph.
- Easiest to use and learn
- Saves time
- You don't have to worry too much about styles and responsive layout - just focus on your content
- Fully responsive
- Normalized - no cross-browser issues
- Beautiful and aesthetic styles
To build a website, we have to focus extensively on CSS styling just to ensure that the site is attractive the layout is unbreakable. So why not use a CSS file which already has beautifully coded CSS classes for every element needed to build a website? What more - it is also fully responsive!
- animate-top
- animate-bottom
- animate-left
- animate-right
- animate-fade
- animate-zoom
- animate-flickr
- animate-spin-clockwise
- Any many more...
<div class="animate-top">I slide up!</div>
- ds-border (adds a simple border)
- ds-border1 (Adds 1px solid border )
- ds-border2 (Adds 2px solid border )
- ds-border3 (Adds 3px solid border )
- ds-border-dot (Adds dotted border)
- ds-border-dash (Adds dashed border)
- ds-border-groove (Adds groove border)
- And many more...
- ds-leftbar
- ds-rightbar
- ds-topbar
- ds-bottombar
<div class="ds-leftbar ds-padding-xlarge">A leftbar block element</div>
- ds-rounded-corner (Adds border-radius 15px)
- ds-half-rounded-corner (Adds border-radius 25px)
- ds-full-rounded-corner (Adds border-radius 35px)
- ds-border-hover-red
- ds-border-hover-green
- ds-border-hover-blue
- And more...
- bgrepeat
- bgrepeat-x
- bg-fixed
- bg-scroll
- And more...
- ds-letter-spacing
- ds-letter-spacing-small
- ds-letter-spacing-large
- ds-hide-mobile
- ds-hide-tablet
- ds-hide-desktop
<h2 class="ds-letter-spacing">YOUR <span class="ds-hide-mobile">WEBSITE</span> HEADING</h2>
- ds-display-top-right
- ds-display-top-left
- ds-display-bottom-left
- And more...
- ds-overlay
- 80+ colors in the library. You can use them as backgrounds, borders, text colors wherever you want.
- ds-small (Sets font size to 16px)
- ds-medium (Sets font size to 24px)
- ds-large (Sets font size to 32px)
- ds-extralarge (Sets font size to 41px)
- ds-center
- ds-left
- ds-right
- ds-justify
- Used after closing ds-container or ds-full-container as it closes children of respective container and allows start of next container.
<div class="ds-full-container">
<div class="row">Some content here.</div>
</div>
<div class="clearfix"></div>
There are yet many, many more things in dS-CSS which can make your CSS life easier. Just go through the documentation to know more.
We update dS-CSS timely so that we can give best experience to users. Soon launching update v2.0.1.
This project is licensed under the terms of the GNU General Public License version 3 available online under: http://www.gnu.org/licenses/gpl-3.0.html. This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
Copyright (C) 2016 dS-CSS