Barcelona CSS
<link href="../styles/screen.css" rel="stylesheet" media="screen"> <link href="../styles/components.css" rel="stylesheet" media="screen"> <link href="../src/styles/your-skin.css" rel="stylesheet" media="screen">
CSS PURISM
Simple CSS?
· Layouts
· Grids
· Dialogs
· Collapsers
· Accordions
· Tabs
· Alerts
· Menus
· Tooltips
· Sliders
· Flips
· Navs
· Lightboxes
...
With Barcelona CSS
Barcelona CSS (or BCN CSS)
is an open source CSS framework:
· Semantic HTML
· Simple CSS
· Transportable from Markdown
· Zero Javascript
· No dependencies
· No massive libraries
· No divitis
· 1 component = 1 class
· All features
· Responsive
· 4 Themes
· Extremely light
Ingenious HTML
No more fake buttons
<a class="button"></a>
Meet the emphatic links
<em><a></a></em>
Bye, bye events
<a class="trigger"></a> <script> ... </script>
Hello checkbox states
<input id="modal-one" type="checkbox" hidden> <label for="modal-one"></label>
BCNCSS: stylesheets
2 combinable stylesheets + your customizable skin
<!-- Screen styles --> <link href="../src/styles/screen.css" rel="stylesheet" media="screen"> <link href="../src/styles/components.css" rel="stylesheet" media="screen"> <link href="../src/styles/your-skin.css" rel="stylesheet" media="screen">
BCNCSS: builds
CSS base
<link href="../src/styles/screen.css" rel="stylesheet" media="screen">
CSS base + components
<link href="../src/styles/screen.components.css" rel="stylesheet" media="screen">
CSS base (min)
<link href="../src/styles/screen.min.css" rel="stylesheet" media="screen">
CSS base + components (min)
<link href="../src/styles/screen.components.min.css" rel="stylesheet" media="screen">